Comparing NextJS and GatsbyJS Static Site Generation
Both GatsbyJS and NextJS allow for the creation of static sites and so this post looks at both options when it comes to creating a static website.
In order to compare both GatsbyJS and NextJS, a simple 10 page website in both frameworks was created:
GatsbyJS & NextJS briefly explained
NextJS is a React framework capable of doing building static websites along with server-side rendered websites.
Starting the development server is almost instantaneous with NextJS, while it takes around 15s for GatsbyJS. This is because GatsbyJS builds out all the pages during development whereas NextJS builds the pages on-demand.
After the development server is running, navigating between pages with NextJS is a bit slow because NextJS builds the pages on demand. That being said, when navigating back to a page that's already been built, it is instantaneous since the page does not need to be rebuilt. In comparison, navigating between pages with GatsbyJS is instantaneous from the get go.
To generate the files for the static site, a build command needs to be executed. For NextJS you need to run
next build followed by
next export which will generate an
output folder that will contain all the files needed to serve a static site. For GatsbyJS, the
gatsby build command needs to be executed which will output all the generated files in a
When initially loading a page on NextJS, there is a flash of unstyled content because of the fact that the CSS needed for that page is not inlined into the HTML for that page. Comparatively, GatsbyJS does not flash an unstyled version of the page on the first page load.
Here are stats on the requested and loaded ressources for the initial load of the websites:
GatsbyJS makes more than double the number of requests than NextJS (34 vs 16) because it does a request to a JSON file that contains additional data required for a page.
Also to note is that using NextJS results in a bit less data being transferred through network requests than with GatsbyJS (340 KB vs 346KB). Furthermore, page load times for NextJS are about half the times for the site built with GatsbyJS (490ms vs 978ms).
Which framework should be used?
There a merits for using both frameworks, but here are some of the conclusions I have:
Building a static site with NextJS gives you the flexibility to switch to building a server-side rendered app if the need arises for dynamic website functionality. If unsure if your site will need include dynamic functionality, I would start out building the site with NextJS's static export feature in order to give you to opportunity to flexibly switch to a server-side rendered application down the road. With the release of NextJS v9, NextJS has some great performance optimizations for pages that don't require any sort of data fetching or dynamic behaviour (read about NextJS's automatic static optimizations).
I haven't mentioned this yet, but GatsbyJS really shines as a framework when you want to aggregate data from one or many external sources (like a CMS) and generate a static site based on the aggregated data. For example creating a static blog with content coming from a CMS is easily done with GatsbyJS. GatsbyJS can easily build static pages based on content from a CMS, whereas this would be difficult to do with NextJS's static export feature.
If interested in the source code for the demos, it is accessible on Github: