Photo by Maxime Gilbert on Unsplash

Let me start with stating the fact that both these framework are amazing and solve a lot of the existing issues or limitations that React has. Surprisingly, both share many similar OOTB features that allow us as developers to create performant web applications. However, this was not the case until very recently.

Just a few updates/versions back, both these frameworks had some significant differences that made it easy for developers to pick one of the two that made sense for their use case. But with recent updates, the two frameworks have come much closer.

In this article, we will nose dive into the similarities and differences between the two frameworks, and by the end of it I am sure you will be able to pick one over the other as per your own use case.

Gatsby vs NextJS Similarities

Before we dive into the differences between the two frameworks, let us assess a few similarities between them:

1. Both Gatsby and NextJS are React-based frameworks with many features that React does not support natively.
2. As both deliver pre-rendered HTML, websites are SEO friendly.
3. Code-splitting and code optimisation are taken care out of the box by both these frameworks with built-in routing.
4. The page load speed is fast in both NextJS and Gatsby as they pre-fetch the links before they appear in the viewport of the user.
5. Both of these frameworks support Static-Site Generation (SSG), Server-Side Rendering (SSR), and Client-Side Rendering (CSR).

Similarities

Gatsby vs NextJS Differences

1. Data Fetching:

Gatsby: While Gatsby does support sourcing data without using GraphQL, it strongly advocates against it. It prefers and recommends data fetching done via GraphQL.

NextJS: It allows you to implement data fetching via REST API, GraphQL, or anything else. It is primarily agnostic about the data fetching method you wish to use.

Conclusion: If you wish to stick to GraphQL or want to use this as a great opportunity to learn it, then Gatsby is for you. However, if you do not like GraphQL then NextJS may suit you better.

2. Plugins & Starter Templates

Plugins are a wide variety of common website functionality that you can drop in to your website. You can think of them as npm package to add a certain functionality or to avoid reinventing the wheel.

Gatsby: It provides a community-driven plugin ecosystem that allows you to get started quickly and utilise some great features. For instance, if you want to add Facebook Analytics into your website, you may or may not find a node package for that, but you can get this easily as a plugin via Gatsby.

NextJS: NextJS does not have a plugin ecosystem like Gatsby and developers have to do all of this work themselves.

Conclusion: If you wish to have full control over your project and data system, then NextJS will be the best approach. However, if you want to avoid reinventing the wheel and utilise great plugin features, then Gatsby is for you.

3. Rending approach

Even though this was not the case until very recently, both of these frameworks now support Static-Site Generation (SSG), Server-Side Rendering (SSR), and Client-Side Rendering (CSR). The only difference is in the way these frameworks handle deferred rendering, which we shall discuss here. Let’s say you have a blogging website that has 1,000 pages or blogs. Almost 400 of them are outdated or non-critical and you do not wish to build them beforehand. Now, let’s see how these two frameworks handle this scenario.

Gatsby: It uses something called Deferred Static Generation or DSG. What you can achieve with DSG is that you can pre-render the critical 600 pages during build time and defer non-critical page generation upon user request. This speeds up the build process. However, the content that is displayed on those 400 deferred pages is not the latest data but the data from the previous full build. Nonetheless, when the data updates you can use a webhook to invalidate the cache and re-build/deploy up-to-date content.

NextJS: It uses something called Incremental Static Regeneration or ISR. This allows you to update or create static pages after you have built and deployed your web application. When a user requests for a deferred page, you can build the page on demand with latest data. This helps you avoid the issue of stale data on your application.

Conclusion: Depending on how frequently your data changes, you can use either approach. Where Gatsby provides a more robust data state, NextJS provides up-to-date data upon user request. However, in NextJS make sure that you maintain data parity between deferred and non-deferred(pre-built) pages.

4. Image optimisation

Gatsby: A neat Gatsby plugin, called gatsby-image, resizes your images at build time, meaning smaller screen devices like smartphones no longer have to download desktop-sized images. As a bonus, it lazy loads images meaning a further increase in web speed. The same image that is 2Mb for desktop view will be let’s say 300Kb for a mobile view. All thanks to Gatsby Image.

NextJS: It provides a tag for automatic image optimisation to convert the images to the modern image format WebP that provides the highest quality and best size.

5. Security

Gatsby: Due to the fact that Gatsby compiles your files to pre-rendered files rather than building it in real time on a server, it reduces any chances of an attack. Additionally, Gatsby adds a layer of indirection which obscures your CMS — so even if your CMS is vulnerable, bad actors have no idea where to find it. Finally, with Gatsby, you serve your site from a global CDN, which effectively eliminates the risk of DDoS attacks.

NextJS: Web applications made with NextJS are secure as well, with proper authentication methods used to fetch and update data. Nonetheless, as it is directly connected with a server or a database, there is still some room for vulnerabilities and attacks.

6. Content Management System — CMS

Gatsby: Gatsby separates the data and the website, meaning that members of your team other than developers can also edit data on the web page, which can then be compiled. Connecting to a CMS via a plugin and the ability to update data without programming knowledge means Gatsby is the preferred framework for creating static websites.

NextJS: As we know, NextJS does not have a plugin ecosystem which makes fetching data from a CMS a tiny bit cumbersome. We might need to find their SDK or API and then integrate them into our system. Moreover, it would be advisable to remember about Dependency Inversion while creating such reusable system.

Gatsby vs NextJS Summary