Gatsby vs Nextjs vs Webpack
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.
The web tests are conducted with WebPageTest and PageSpeed.
it must be noted that most tests will give different results each time they are taken.
The following measurements are for this live documentation site, which has ~1400 standalone pages.
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.
| source code | |
|---|---|
| gatsby | gatsby 3+ |
| nextjs | nextjs 10+ |
| webpack | webpack 5+ |
All the sites are hosted on a free tier at netlify. The tests are conducted on the same simple documentation page.
| test page | |
|---|---|
| gatsby | https://component-controls.com |
| nextjs | https://nextjs.component-controls.com |
| webpack | https://webpack5.component-controls.com |
| gatsby-3 | nextjs | webpack | ||||
|---|---|---|---|---|---|---|
| score | % | score | % | score | % | |
| Development Mode Startup Time | 50s | best | 50s | best | 50s | best |
| Production Mode build | 3:30m | +180% | 2:55m | +130% | 1:15m | best |
| Deployment size | 377.9MB | +2072% | 378.6MB | +2076% | 17.4MB | best |
| Largest Contentful Paint | 0.69s | +47% | 0.47s | best | 8.09s | +1621% |
| Total Blocking Time | 1,71s | n/a | 1,97s | n/a | 0,00s | best |
| Document Complete Time | 5.72s | best | 7.46s | +30% | 8.33s | +46% |
| Document Complete Size | 1,345KB | +7% | 2,555KB | +105% | 1,249KB | best |
| Fully Loaded Time | 6.74s | best | 7.58s | +12% | 8.40s | +25% |
| Fully Loaded Size | 1,366KB | +9% | 2,556KB | +105% | 1,249KB | best |
| Mobile Speed Score | 49 | -23% | 64 | best | 21 | -67% |
| Desktop Speed Score | 68 | -11% | 76 | best | 53 | -30% |
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.
The following measurements are for the component-controls starter sites, which have separate 8 pages.
| source code | |
|---|---|
| gatsby | gatsby 3+ |
| nextjs | nextjs 10+ |
| webpack | webpack 5+ |
All the sites are hosted on a free tier at netlify. The tests are conducted on the same simple documentation page.
| test page | |
|---|---|
| gatsby | https://gatsby-controls-starter.netlify.app |
| nextjs | https://nextjs-controls-starter.netlify.app |
| webpack | https://webpack-5-controls-starter.netlify.app |
| gatsby-3 | nextjs | webpack | ||||
|---|---|---|---|---|---|---|
| score | % | score | % | score | % | |
| Development Mode Startup Time | 13s | +86% | 7s | best | 10s | +42% |
| Production Mode build | 24s | +84% | 13s | best | 18s | +39% |
| Deployment size | 10.3MB | +415% | 26.3MB | +1215% | 2MB | best |
| Largest Contentful Paint | 0.50s | +28% | 0.39s | best | 2.54s | +551% |
| Total Blocking Time | 0,48s | n/a | 0,41s | n/a | 0,00s | best |
| Document Complete Time | 1.91s | best | 1.95s | best | 2.65s | +39% |
| Document Complete Size | 745KB | +16% | 676KB | +5% | 643KB | best |
| Fully Loaded Time | 2.35s | +12% | 2.09s | best | 2.65s | +27% |
| Fully Loaded Size | 766KB | +19% | 1,181KB | +84% | 643KB | best |
| Mobile Speed Score | 70 | -18% | 85 | best | 43 | -49% |
| Desktop Speed Score | 93 | best | 90 | best | 76 | -18% |
- 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.