Max Ikäheimo

Posted on Dec 27, 2022 • Originally published at ikius.com

Next.js vs. Gatsby: A Full Comparison

#nextjs #gatsby #javascript #beginners

Numerous React meta-frameworks help deliver complex websites, but two go way beyond the others: Gatsby and NextJS. Gatsby allows you to create almost any website with its extensive plugin ecosystem, while Next.js offers an effortless development process and remarkable scalability. Together, they account for ~30 % of the market share among the top 1000 websites.

Both frameworks are equally suitable for most projects, though sometimes, one may be better suited. This blog post will discuss the key differences between Gatsby and Next.js and elaborate on the specific cases.

However, in the first place, why use meta-frameworks and not limit yourself to React? Let’s shed more light on the debate of Next.js vs Gatsby.

This post covers

Why use meta-frameworks with React?

Meta-frameworks allow developers to create feature-rich applications faster than by working with React alone.

React does a fantastic job of handling data states for you. But when it comes to additional features, many are implemented only on a basic level. So you may need to go the extra mile to get what you need — decide how to handle routing, rendering methods, layouts, cashing, and integrations.

One way is to research all the available libraries and pick the ones that suit your project most. Though honestly, it would resemble crafting your own Linux distribution.

This is where meta-frameworks come into play: they provide many needed features conveniently assembled into one neat package. You’ll still need to include other libraries in your project — for instance, a UI library like Bootstrap. Yet you won’t need as many of them as with plain React.

Like other meta-frameworks, Next.js and Gatsby offer various features and optimizations. Let’s introduce each framework at a time and explore who’s better at image optimization, rendering, data fetching, and many more.

What is Next.js?

Next.js is a meta-framework released in 2016 by a platform-as-a-service company called Vercel. The meta-framework offers zero-configuration deployment on the Vercel platform and handy server-side rendering (SSR).

Speaking about rendering, client-side (CSR) was made popular by React back in 2013. However, it had issues with load speed and search engine optimization. So it didn’t take long for server-side rendering to come into fashion again — this time offered by meta-frameworks.

SSR has now become blazing fast with all the innovations like partial hydration, progressive hydration, and streaming. But it’s not the default rendering method in Next.js anymore. Now you can equally opt for static site generation (SSG) or combine the approaches. In this manner, the website can be built and cashed on a content delivery network (CDN) or Edge.

Though with SSG, big eCommerce websites with many products take incredibly long to build. In this case, you can go for Incremental static regeneration (ISR), as it solves the issue of scaling while preserving short load times.

Other than the multitude of rendering strategies, Next.js offers the following optimizations:

Code splitting (also called dynamic imports): separating the JS and CSS code into smaller bundles based on routes or components and loading them when needed.
Script optimization: enabling you to decide when to put third-party scripts into effect and when to wait for other components to render. (Third-party scripts can be resource-intensive and may lock up render-sensitive components).
Image optimization: resizing images according to the device size, displaying placeholders while the image is loading, and more. We discuss other image optimizations below.

Next.js is indeed performant. That’s why more than 100 000 sites are built on it, including ones for large businesses like Netflix and Uber. Then, what does Gatsby have to offer?

Read more: What is Next.js?

What is Gatsby?

Gatsby is a meta-framework created in 2015 to marry React with a static website.

Before Gatsby was out, old-fashioned SSGs dominated the field: they combined page templates with markdown files to create pages built with HTML code. Their major drawback was that they lacked dynamic behavior. Then, Gatsby revolutionized the field with its dynamic Jamstack architecture and hydration to deliver a single page application experience.

One important thing to mention is that all data is accumulated in a specific GraphQL data layer at build time. In this manner, you can query all your data from different sources universally — via GraphQL API queries. GraphQL helps to optimize images automatically and keeps data loading in the same place it’s used.

Gatsby is generally not recommended for big websites because build times may get long when your site grows. But this issue is common for all static sites, including those based on Next.js.

To resolve the problem, Gatsby enhanced its incremental builds in the latest version (v5). And lately, Gatsby also offers other rendering methods like SSR and deferred static generation (DSG), similar to ISR and used for better scaling.

Gatsby has ~54 000 Github stars and ~4 000 contributors. Its handles high-traffic sites extremely well. That’s why Cloudflare is based on Gatsby.

Read more: What is Gatsby?

How do the frameworks compare?

Next.js and Gatsby equally offer ease of development and a great user experience. They can be blazing fast if you combine the rendering methods optimally. With the fast refresh mechanism, the meta-frameworks allow you to preview changes without a build when you introduce changes.

Also, you’ll be on top of SEO with both options. Content optimizations, good sitemaps, and meaningful path names make you score high on Core Web Vitals.

The meta-frameworks are also very similar in architecture: you can couple them with a fully-fledged backend, a headless CMS, or a serverless cloud.

Here we come to the central question of our blog post: what are the differences?

Gatsby has opinions, while Next.js doesn’t

Next.js is loved for not forcing you into any particular technology stack — it’s efficient no matter how you handle your data or which rendering methods you prefer. Guillermo Rauch created the framework this way — to be versatile. Though, you’ll have to make more decisions.

On the contrary, Gatsby often offers only one way to do things, and you’ll write fewer lines of code and more lines of configuration.

Take, for example, the way how you create a favicon. In Gatsby, you do it by modifying the “gatsby-config.js” file. The meta-framework will generate a collection of files of different sizes for different devices — that’s how easy it gets.

Meanwhile, in Next.js, you have to handle favicons manually or go for a third-party service to generate all the different sizes.

Or take data fetching: Next.js doesn’t force you to use any protocol, be it REST, GraphQL, or even SOAP. However, you have to think about how to implement the integrations.

In Gatsby, the only proper way to handle data is through a GraphQL layer. (But even though such queries are claimed to be more understandable than the REST ones, they are often more lengthy).

Wait, but can you fetch data from a REST API with Gatsby? Yes, you can, with a plugin — like most other functionalities, integrations are available via a plugin.

Plugin ecosystem

Gatsby simplifies integrations: you only have to install and configure a plugin, given the API keys are provided. You don't need to bother with SDKs or delve through API documentation.

Next.js doesn’t include a plugin environment. To fetch data from a CMS, you must study its APIs, consider the re-usability of your integration in the website on various pages, and maybe develop some SDK wrappers for typical scenarios.

And in Gatsby, there are plugins for all sorts of needs, not only integrations. Need TypeScript support? There’s a plugin for it. Do you want to convert remark files into HTML? There’s a special transformer plugin.

Keep in mind that most plugins have to be configured. Sounds like a lot of configs, right? Luckily, Gatsby also has starters, which are special plugins that alleviate the need to set up all your configs from scratch, Gatsby image component, and themes that help you craft pages.

There’s a drawback to plugins, though— you can’t know how they work under the hood. If you need to tweak something impossible via configs or encounter faulty behavior, you’ll need to deal with the plugin’s source code.

Which framework serves static websites faster?

Static pages consist of HTML code spiced up with some JavaScript, which is the same for both frameworks. So, no JavaScript framework can influence loading speeds in this manner.

For hydration, both meta-frameworks call React’s hydrate() method and allow for partial hydration, so the JavaScript bundle is nearly identical.

In fact, the CDN you choose may have a much greater influence on your site's performance than the framework you select, especially if the site isn't overly reliant on JavaScript.

But one thing has a really significant effect on the website speed after hydration — it’s image optimization.

Read more: What is a static website?

How do the meta-frameworks compare on image optimization?

Both frameworks do a great job optimizing images: they support modern lightweight image formats like .webp and .avif and tune images with the sharp library.

Here are the features both frameworks support:

Placeholders: showing a version of the image with reduced quality while the high-resolution original is being retrieved.
Lazy loading: loading images only when they appear in the view front. (Images can be heavy, but you don’t need to load them all at once.)
Image CDN: serving files from a specific CDN suited for caching and resizing images.

Although the meta-frameworks offer similar optimizations, these are implemented differently. Next.js has a dedicated API for image optimization that accepts query string parameters and returns a processed image. Gatsby does all the magic with the power of their GraphQL API layer and transformer plugins (without accessing APIs).

Additionally, Gatsby is better at image art direction — defining different image sources for different screen sizes. It gets useful when you have a massive plot with many wordy labels that look good on a desktop but are unreadable on a mobile device. With image art direction, you instruct your website to show a different image with bigger smartphone labels.

Other differences

In Next.js, internationalization (i8n) is made more potent by Global Middlewares. This tool enables you to establish a top-level middleware and detect the country on an Edge network so users are redirected to a pre-generated page fit for the region.
Next.js is a bit faster to introduce new React features support. For instance, it already supported a React component in October 2021, while Gatsby only supported it in November 2022.
Next.js offers low-code integration. Constructing a tailor-made component in a visual editor and then integrating it with a single line into the project is possible. There’s no such opportunity in Gatsby yet.
With Gatsby, you can easily preview pages when you upload new data into the CMS, while it gets harder with Next.js

Bottomline

In the past, when Gatsby was a simple static site generator with no SSR, the two frameworks had more distinct features. Now there are far more similarities.

For instance, image optimizations, caching, and code splitting are all key elements in helping both frameworks be optimized for search engine optimization purposes. Plus, you will soon find out that a Next.js CMS can also work as a Gatsby CMS with no problem, so you can quickly rearchitecture your site if you find out that you didn't like it.

You should opt for Next.js if:

You dislike GraphQL
You plan to rely on SSR (it’s still imperfect in Gatsby)
You prefer to have more control over integrations

One criterion Gatsby meets better is the ease of the initial setup. With just a few commands, developers can quickly get a project with all needed integrations up and running. That’s why you might choose Gatsby for a simple blog consisting of .md files.