Next.js vs. Gatsby in 2024: A full comparison

By Max Ikaheimo

August 1st, 2024

Nowadays, there are numerous React meta-frameworks to build complex websites. In the past, there have been 2 big players in the game: Gatsby and NextJS. This post was originally written as a guide to help decision makers decide between the two. Some time has passed, and Gatsby has been basically abandoned. If you're not up to date what's happening with Gatsby, we recommend you read this post before reading further.

A bit of background before we jump into the details:

• Next.js is a framework for building optimized, server side rendered websites and apps. It offers an effortless web development process and remarkable scalability. It's currently being actively developed by Vercel.

• Gatsby is a framework that allows you to create almost any website with its extensive plugin ecosystem. However, during the recent years Gatsby's seen a massive decline in terms of updates and overall adoption.

• Together, Gatsby, Next.js and other emerging web frameworks account for ~30 % of the market share among the top 1000 websites (this data is from 2022 but the total numbers and growth has significantly increased.

In the past both frameworks were equally suitable for most. This blog post will discuss the key differences between Gatsby and Next.js and elaborate on the specific cases, and dives a bit deeper into what the differences are in 2024. 

In this post:

Why use meta-frameworks with React?

You might be asking yourself why use a meta-framework and not limit yourself to React? Let’s shed more light on the debate of Next.js vs Gatsby. Meta-frameworks deliver a great developer experience by enabling them 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 specifically for website and SEO, 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, caching, integrations and server-side rendering.  

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 Tailwind, some npm-packages etc. Yet, you won’t need as many of them as with plain React and a lot of things needed for indexable websites come out of the box.

Like other meta-frameworks, Next.js and Gatsby offer various features and optimizations. Let’s introduce each framework at a time and explore the key differences from image optimization, rendering, data fetching, and 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 such as Next.js and Gatsby. 

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?

What is Gatsby?

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

Before Gatsby was released, 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, a Gatsby site 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.

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, a Gatsby site 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).

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. This also comes with some drawbacks, as you have to rely on mostly third party integration plugins to support some features.

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 a static HTML file? 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 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. 

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. Now in 2024, Gatsby is almost left unmaintained, only getting infrequent updates here and there.

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. However, as of 2024 due to reasons we discuss in this post, Gatsby has fallen far behind the competition and it's starting to look like an abandoned project.