A next-generation tool to create blazing-fast documentation sites
API
created:3/13/2021
updated:3/16/2021

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 WebPageTest and PageSpeed.
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.
source code
gatsbygatsby 3+
nextjsnextjs 10+
webpackwebpack 5+

Live Sites

All the sites are hosted on a free tier at netlify. The tests are conducted on the same simple documentation page.
test page
gatsbyhttps://component-controls.com
nextjshttps://nextjs.component-controls.com
webpackhttps://webpack5.component-controls.com

Performance

gatsby-3nextjswebpack
score%score%score%
Development Mode Startup Time
50sbest50sbest50sbest
Production Mode build
3:30m+180%2:55m+130%1:15mbest
Deployment size
377.9MB+2072%378.6MB+2076%17.4MBbest
Largest Contentful Paint
0.69s+47%0.47sbest8.09s+1621%
Total Blocking Time
1,71sn/a1,97sn/a0,00sbest
Document Complete Time
5.72sbest7.46s+30%8.33s+46%
Document Complete Size
1,345KB+7%2,555KB+105%1,249KBbest
Fully Loaded Time
6.74sbest7.58s+12%8.40s+25%
Fully Loaded Size
1,366KB+9%2,556KB+105%1,249KBbest
Mobile Speed Score
49-23%64best21-67%
Desktop Speed Score
68-11%76best53-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.

Small sites

The following measurements are for the component-controls starter sites, which have separate 8 pages.

Examples Source Code

source code
gatsbygatsby 3+
nextjsnextjs 10+
webpackwebpack 5+

Live Sites

All the sites are hosted on a free tier at netlify. The tests are conducted on the same simple documentation page.
test page
gatsbyhttps://gatsby-controls-starter.netlify.app
nextjshttps://nextjs-controls-starter.netlify.app
webpackhttps://webpack-5-controls-starter.netlify.app

Performance

gatsby-3nextjswebpack
score%score%score%
Development Mode Startup Time
13s+86%7sbest10s+42%
Production Mode build
24s+84%13sbest18s+39%
Deployment size
10.3MB+415%26.3MB+1215%2MBbest
Largest Contentful Paint
0.50s+28%0.39sbest2.54s+551%
Total Blocking Time
0,48sn/a0,41sn/a0,00sbest
Document Complete Time
1.91sbest1.95sbest2.65s+39%
Document Complete Size
745KB+16%676KB+5%643KBbest
Fully Loaded Time
2.35s+12%2.09sbest2.65s+27%
Fully Loaded Size
766KB+19%1,181KB+84%643KBbest
Mobile Speed Score
70-18%85best43-49%
Desktop Speed Score
93best90best76-18%

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.