Next JS Vs Gatsby for SEO: Search Engine Optimization Showdown

We’ve been in the SEO game for around 10 years at the time we wrote this article.   For the past few years we’ve been focused on javascript driven websites, most of which are single page applications.

A pretty common question that we receive from our clients is “Next JS vs Gatsby, which one is better for  SEO?” 

Many web developers are well aware of the advantages of static html sites and server side rendering in the search engines.

Since we do a lot of technical SEO work, we decided to share our search engine optimization experience as well as a few other tidbits about web development with these two popular frameworks.

TLDR: Should you go with Gatsby or Nextjs?

For those of us who like to skip around articles, here is the quick links:

Full articles on each framework:

GatsbyJs and NextJs | What do they have in common?

To avoid repetition, let’s go over some relevant aspects these frameworks have in common before delving into what sets them apart. 

  • Both frameworks have very active developer communities which often host webinars to communicate with the rest of the community
  • Both frameworks come with an ecosystem of plugins to help facilitate highly performant SEO.
  • Both frameworks come equipped with custom tooling and plugins for injecting your client-side code Javascript, using a technique built into React called hydration. The `hydrate()` method in React is used in place of `render()` when the contents of a page were rendered with `ReactDOMServer`, which is React’s way of rendering components to static HTML. Hydration allows you to inject React bundles into statically generated HTML files.
  • Both frameworks use a technique called code-splitting, which is a function supported by bundlers like webpack that splits code up into smaller ‘bundles’ in order to be requested and loaded in a much more efficient manner.
  • Both frameworks rely on the PRPL architectural pattern, which we’ll go over later in this article.
  • Both frameworks support SSG (Static Site Generators).
  • Both frameworks can implement authentication and have valid use cases for web sites which may need client authentication

Although this list of commonalities isn’t exhaustive, they are the driving factors behind the success of each framework. We’ll discuss how the frameworks compare in their implementation of these techniques.

GatsbyJs and NextJs | What makes them different?

It’s often confusing to understand the difference between Gatsby and Next.js, so it’s worth giving this question some attention by going over some of the more important distinctions.

  • Gatsby is only a static site generator, it does not have the capability for server side rendering.
  • Next JS comes equipped with the capability for both SSG (Static Site Generators) and SSR (server-side rendering.)
  • Gatsby is much more opinionated, and has specific tooling baked in for tasks such as data injection. Next JS is much more flexible in most respects.

Once again, this list isn’t exhaustive, but these differences are typically the most relevant when considering SEO and choosing which framework is right for you.

Gatsby SEO & General Overview | Pros and Cons

Gatsby is a  front end and open source framework built on ReactJs known for fast page speed as well as a thriving developer community. 

It uses a technique called ‘static site generation’ (or SSG) to prepare and optimize each individual page at build time (as opposed to run-time), so each page can be hosted as its own ‘static’ entity, in effect minimizing the run-time and browser workload greatly.

Gatsby does not server-side render. Meaning, any time a client requests a web page hosted via Gatsby, the request is made to retrieve a static HTML and CSS file, that’s it. There are no calls to a database, no dynamic construction of HTML. The HTML pages are all put together at build time with requisite tags and data, and subsequently served out by the hosting provider.

This is great for SEO performance. The crawlers can readily consume your content, and the static pages are loaded in a flash.

How does this help SEO?

A really neat feature of Gatsby is how it hydrates your page with React code. Gatsby actually creates two versions of your site at build time. The first version is pure HTML and CSS that can load quickly into your browser. The second is React components, which only load, or hydrate, after the initial static HTML and CSS is rendered in the DOM and it is confirmed that your browser supports Javascript.

This feature really gives Gatsby an edge for SEO performance, making it very crawlable while also providing a smooth user experience.

When it comes to script bundle sizes, many comparison tests have confirmed that Gatsby excels over Next JS. However, both Gatsby and Next have built an image as being very efficient in this regard.

Although GatsbyJs offers the ability to code dynamically, such as adding a `fetch` call to an API within a `useEffect` method, it’s important to use this type of functionality sparingly. Using client-side fetch calls haphazardly is counter-productive to Gatsby’s strengths.

That being said, the Gatsby docs do clearly described and encourage two forms of data fetching:

  1. Build Time – Data is fetched and injected during the static site generation process.
  2. Client Runtime – Data is fetched using typical asynchronous Javascript code on the client, such as the native fetch or via third-party libraries like axios.

Gatsby defaults to using a GraphQL layer that allows you to inject data into pages at build-time, which is a cool feature, but not so great for more advanced sites that have a greater need for dynamic data.

Search Engine Optimized Landing Pages

For the reasons mentioned above, Gatsby is a popular choice for blogs and company landing pages, and is even gaining some traction as a good framework for eCommerce sites. 

Basically, a good rule of thumb when deciding whether to use Gatsby is to consider how often data will be updated on the site. A few updates in a day are fine, but if you think hundreds or thousands of updates a day could be a possibility, Gatsby isn’t a scalable choice. 

All those full renders into static pages will cause your site to be unstable at best.

Of course, it’s perfectly feasible to develop a dynamic site on Gatsby that uses a carefully planned balance of build time and client runtime data.

However, this isn’t where Gatsby truly shines. If you’re planning on something a bit more robust and dynamic in nature, it’s worth taking a look at Next.js.

Next JS SEO & General Overview | Pros and Cons

Next JS is also a framework built on ReactJs known for having fast page speed and excellent SEO performance.

 NextJs has the ability to be a pure SSG, but it’s ecosystem comes equipped with advanced tooling that accounts for SSR as well. This gives Next.js the ability to generate hybrid applications that contain both server-rendered and statically generated pages.

Although Next uses the same code-splitting and hydration method under the hood for injecting React code into your site, Next uses a different implementation than Gatsby. 

When you create a React component using Next.js, it determines on the fly during built-time whether this component should be server-rendered or static. This means something like a blog post will be statically generated, while something more dynamic like a user profile would be server-rendered.

Difference With Next.js

The main Gatsby vs Next difference here is that with Gatsby, dynamic data _must_ be accounted for in the client runtime. Whereas NextJs allows dynamic data to be handled at server runtime _or_ the client runtime.

For applications involving complex data models like social media or auction sites, Next.js allows more flexibility for handling dynamic data. This means an increased ability for maximizing SEO performance, allowing the developer to move certain aspects of data fetching off the client that may be bogging things down.

Both Gatsby and Next have valid use-cases. But if you’re looking for flexibility wrapped in a less opinionated framework that is still optimized for SEO, NextJs is the way to go.

Next JS Articles:

What makes these frameworks ideal for Search Engine Optimization?

If you are wanting more information about Gatsby vs Next.js, below we break down some of their main features and our thoughts behind each framework:

PRPL | A Design Pattern that Helps Maximize SEO Performance

Both Next and Gatsby use the PRPL design architecture. But what is it, and why is it good for SEO?

PRPL can be broken down as follows:

  1. Push critical assets for the initial URL as efficiently as possible, using `<link preload>`.
  2. Render the initial route as quickly as possible.
  3. Pre-caching frequently used assets (ex. an image) and remaining routes in the background.
  4. Lazy loading the remaining routes on demand.

This is essentially a guideline to prioritize the way a page is loaded in order to maximize user experience and SEO performance. Next and Gatsby leverage techniques like code-splitting and preloading to make this pattern a reality. 

Each of the stages in the PRPL pattern are expansive topics that deserve write-ups of their own, but it’s important to at least be aware of this pattern at a conceptual level if you plan to maximize SEO by utilizing either of these frameworks.

What is an SPA and how does it affect SEO performance?

As we point out in our article about Search Engine Optimization for SPAs, frameworks have made many great leaps in recent years, bringing much of the work that once happened on the server over to the end-user’s browser. 

The culmination of this paradigm was the SPA, or single page application.

Frameworks such as ReactJs and EmberJs allow developers to create fully featured web sites that render as a single HTML and CSS page. 

With a standard React SPA, this single HTML file begins its life on the browser with some script tags and a single element found within that usually looks something like this:

```

<div id='root'></div>


```

The React framework (imported via the script tags) handles the rest, using its extensive library to inject the page with the rest of the HTML, while also handling tasks such as page routing, data fetching, and state management all _after_ the DOM initially loads. 

Once everything is loaded, the user-experience is great. It’s the time it takes for things (ex. an image) to load, along with the mechanics of this process under the hood, that can negatively affect SEO.

Search Engine Optimization Impact for Web Applications

Arguably, there are two main problems with this SPA pattern as pertains to SEO performance:

Search Engines And JS Crawling Ability

Google (as well as other search engines) crawlers are constantly scanning websites for content, and they tend to be impatient. 

When an SPA loads with that single HTML element, it’s tough to engineer crawlers that wait around for the SPA framework to import and build the rest of the page(s). 

While Crawls such as GoogleBot have the ability to render and index javascript driven content, unfortunately it doesn’t always work out this way.  

Crawlers often move along without having consumed any of your actual content. 

Search engines, namely Google, are doing their best to make their crawlers smart enough to detect and wait for this type of content.

They even have a process to dynamically render code, however, in our experience it’s simply not as effective as crawling standard HTML.

Thus, so far the onus has been on developers to come up with clever ways to work around this problem, which is a driving factor behind the inception of frameworks such as Next.js and GatsbyJs.

Bloated Web Applications & Performance

The second problem is that all that code can cause web pages to become quite bloated with ever expanding bundles of code being sent from the server. 

The end result is relatively large Javascript files hogging up bandwidth, which then tend to bog down the browser, all causing page speed to suffer as a consequence. 

Page speed has been confirmed as a ranking factor used by Google, and although it’s not the end all be all as it pertains to ranking, it’s certainly a factor worth considering. 

It’s also worth noting that this pattern complicates the inspection of client-side HTML, usually requiring custom browser extensions. For troubleshooting SEO problems, this is an added layer of difficulty.

To help combat these issues, we’ve seen frameworks come full circle back to server-side rendering (SSR), along with a relatively new technology called static site generation (SSG).

SSG vs SSR: Static Site Generators or Server Side rendering for SEO?

This question depends on a number of factors, and isn’t easily answered without first determining the specific needs of your project. Both patterns are equipped to help solve some of the problems with SPAs we discussed earlier.

On the surface, SSG is superior when it comes to page speed and technical discoverability. However, SSG is inherently limited when compared with SSR, which we’ll take a closer look at in the coming sections.

Two frameworks at the forefront of these two technologies are Gatsby and Next. As we’ve seen, each framework does a pretty good job maximizing SEO performance, while maintaining all the useful tooling built into the React framework.

Are there any other Javascript frameworks for SEO worth checking out?

As a matter of fact we have a complete list of seo friendly javascript frameworks.  As you can imagine both Gatsby and Next made it onto the list.

Conclusion | Next JS or Gatsby JS?

Both Next.js and Gatsby.js have built their image as excellent frameworks for enhancing SEO if you’re a fan of the React framework. They both offer effective solutions for many of the downsides that come with pure SPAs created with React.  

We discussed that Next.js comes equipped with both SSG and SSR capability, while Gatsby is specialized for SSG only. For this reason, Next.js is the preferred choice for projects with more of a need for dynamically updated data, while Gatsby is preferred for smaller projects like a blog or a portfolio. 

Where to go from here?

If you’re considering adopting Gatsby Js or Next.Js to up your SEO game, you’ll find that getting started is a breeze. Both projects offer quick start guides and well put together walk-throughs to get you up and running.Head on over to the

[Next.Js](https://nextjs.org/docs) or

[Gatsby Js](https://www.gatsbyjs.com/docs/quick-start/)

official docs to get the ball rolling. Happy coding!

oh my crawl logo
Digital Architecture
For Search Engines
Javascript Frameworks
Most Js Frameworks..
Contact
Brooklyn, NY 11219

Blog