Compare performance of react sites
This article was originally published on component-controls blog to compare the development and production performance of documentation sites build with gatsby, nextjs or webpack/react-router.
# Overview
component-controls allows using several static site generators (SSG) as well as raw webpack builds to create the production version of your documentation sites.
- gastby — in many aspects, gatsby is the original static site generator for react and continues to be a leader in this space.
- nextjs — for many years, nextjs was known for SSR, however recent builds allow creating highly optimized static sites.
- webpack — you can also build your site directly with webpack, which is used by both gatsby and nextjs under the hood.
In this blog post, we will research which solution offers the best development and production experience.
For webpack, only one set of results will be displayed as webpack 4 and webpack 5 are very similar in performance — the one difference to keep in mind is that ts-node and typescript webpack configuration files add about 5–10s starting the webpack project.
## Performance Tools
The web tests are conducted with
> it must be noted that most tests will give different results each time they are taken.
# Large sites
The following measurements are for this live documentation site, which has ~1400 standalone pages.
## Examples Source Code
The documentation sites used throughout this post are essentially the same for comparison. We would truly appreciate any feedback to additionally optimize our examples for the researched SSGs.
## Live Sites
All the sites are hosted on a free tier at [netlify](https://www.netlify.com). The tests are conducted on the same simple documentation page.
## Performance
> gatsby and nextjs create much faster and better-optimized sites — as expected since they use code-splitting and create pre-rendered bundles for each page. On the other hand, webpack provides a somewhat better development experience with faster builds and smaller bundle sizes.
> gatsby 3 vastly improves on build times over gatsby 2 — the gatsby builds for this app of over 1400 pages came down from over 14 minutes to just over 3 minutes.
# Small sites
The following measurements are for the component-controls starter sites, which have separate 8 pages.
## Examples Source Code
## Live Sites
All the sites are hosted on a free tier at [netlify](https://www.netlify.com). The tests are conducted on the same simple documentation page.
## Performance
# Conclusion
- Gatsby and Nextjs produce the faster sites, which is especially valid for larger sites.
- Webpack/react-router SPA apps have faster build times and smaller deployment sizes.
- The differences are more clear for larger sites.