Gatsby vs Nextjs vs Storybook
component-controls allows using 3 different static site generators (SSG) 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.
- storybook - while storybook is not a general-purpose SSG, it comes with its own SSG engine under the hood.
In this blog post, we will research which solution offers the best development and production experience.
The documentation sites used throughout this post are essentially the same for the purpose of comparison. We would truly appreciate any feedback to additionally optimize our examples for the researched SSGs.
| source code | |
|---|---|
| gatsby | gatsby 2+ |
| nextjs | nextjs 9+ |
| storybook | storybook 6 |
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 |
| storybook | https://storybook.component-controls.com |
The web tests are conducted with WebPageTest and PageSpeed.
Measuring the time to start up in development mode. For this test, the projects were already run once upfront, to make sure all possible caches are created.
| time(s) | +/-% | |
|---|---|---|
| gatsby | 30s | +30% |
| nextjs | 23s | best |
| storybook | 32s | +39% |
The times are fairly similar, with nextjs having the fastest development time startup. However, nextjs compiles individual pages on-demand so there is a sensible slowdown navigating from page to page.
Measuring the time to create a static site. Prior to launching this test, all the caches are deleted to create a level testing field.
| time | +/-% | |
|---|---|---|
| gatsby | 7m35s | +638% |
| nextjs | 1m03s | best |
| storybook | 1m04s | best |
nextjs and storybook build the static site files the fastest, with gatsby much slower. To note that gatsby and nextjs create individual static pages for every document/story/page tab, while storybook creates one single bundle where all the pages are kept together under the same URL.
| time | |
|---|---|
| gatsby | results |
| nextjs | results |
| storybook | results |
An important, user-centric metric for measuring perceived load speed because it marks the point in the page load timeline when the page's main content has likely loaded—a fast LCP helps reassure the user that the page is useful.
| time | +/-% | |
|---|---|---|
| gatsby | 0.591s | +14% |
| nextjs | 0.519s | best |
| storybook | 11.182s | +2054.53% |
nextjs and gatsby are very close in this test, with storybook lagging by a staggering 2000+ percent.
An important lab metric for measuring load responsiveness because it helps quantify the severity of how non-interactive a page is before it becoming reliably interactive—a low TBT helps ensure that the page is usable.
| time | +/-% | |
|---|---|---|
| gatsby | 1.057s | +5% |
| nextjs | 1.004s | best |
| storybook | 2.448s | +143% |
nextjs and gatsby again are very close, with storybook over two times slower.
The time is takes to fully load all the content referenced in the HTML.
| time | +/-% | |
|---|---|---|
| gatsby | 2.206s | best |
| nextjs | 3.012s | +36% |
| storybook | 6.075s | +175% |
gatsby is in the lead, with nextjs almost a second slower and storybook about 3 times slower.
The size in kilobytes at the Document Complete Time.
| kb | +/-% | |
|---|---|---|
| gatsby | 755kb | best |
| nextjs | 1,452kb | +92% |
| storybook | 2,126kb | +181% |
gatsby generates significantly smaller bundles size, with nextjs almost twice larger and storybook about 3 times larger.
The time when a page completely stops loading content, including ads and below the fold elements.
| time | +/-% | |
|---|---|---|
| gatsby | 3.209s | best |
| nextjs | 3.122s | best |
| storybook | 8.253s | +164% |
gatsby and nextjs have very similar times, with storybook over two times slower.
The size in kilobytes at the Fully Loaded Time.
| kb | +/-% | |
|---|---|---|
| gatsby | 781kb | best |
| nextjs | 1,453kb | +86% |
| storybook | 3,014kb | +285% |
gatsby generates significantly smaller bundles size, with nextjs almost twice larger and storybook almost 4 times larger.
Measures how much it costs for someone to use your site on mobile networks around the world. For this comparison, we will use the USA location. This measure is mostly linked to the fully loaded size.
| USD | +/-% | |
|---|---|---|
| gatsby | $0.05 | best |
| nextjs | $0.09 | +80% |
| storybook | $0.19 | +280% |
gatsby sites are the cheapest to use, with nextjs twice more expensive and storybook almost 4 times more expensive.
The speed score is based on the lab data analyzed by Lighthouse. The results of this test vary to some extent on each run.
| results | score | +/-% | |
|---|---|---|---|
| gatsby | results | 29 | -29% |
| nextjs | results | 41 | best |
| storybook | results | 5 | -87% |
nextjs sites get the best mobile speed score, with gatsby underperforming and the storybook score is close to zero.
The speed score is based on the lab data analyzed by Lighthouse. The results of this test vary to some extent on each run.
| results | score | +/-% | |
|---|---|---|---|
| gatsby | results | 75 | -7% |
| nextjs | results | 81 | best |
| storybook | results | 57 | -29% |
nextjs sites get the best desktop speed score, with gatsby very close and the storybook score significantly lower..
- build time gatsby is significantly slower, however this process is usually performed on a CI server.
- blocking time gatsby and nextjs sites have very similar times, with storybook over twice slower.
- bundle sizes gatsby shines here, and while it is expected that storybook creates 3 times larger bundles than gatsby since it generates one bundle for all pages, it is strange that the bundles from nextjs are twice as large as the gatsby bundles.
- loading time nextjs and gatsby are very similar, with storybook sites performing about 3 times slower.
- cost to use gatsby outperforms the other SSGs, with nextjs sites almost twice more expensive and storybook 4 times more expensive.
- google pagespeed nextjs has slightly better pagespeed scores than gatsby, with storybook sites significantly underperforming.
gatsby and nextjs generate fast and highly optimized documentation sites, with nextjs doing slightly better on the blocking time measurement but significantly worse on the bundle size. The storybook SSG engine does not stack up favorably and generates significantly slower and bulkier sites.