Next.js or Gatsby? | Best SSG for Jamstack in 2022

Jamstack is becoming increasingly popular, and so are the technologies used to develop it. While this is great, it might raise uncertainty about which Static Site Generator should be used for Jamstack development. 

There are no simple answers to this question and without a proper understanding of the technologies used to develop Jamstack, it can be very confusing to choose the right tools.

As an agency working in the industry, we have pretty good hands-on knowledge about the best static site frameworks for 2022. While it's true, there are a lot of them out there –333 at the time of writing to be exact– it ultimately boils down to two major frameworks, Next.js and Gatsby.js (and maybe Hugo in some cases). 

If you're considering migrating to Jamstack you're probably considering Next.js or Gatsby.js. Luckily we have used both extensively and can share our experience on them and how it relates to choosing a Static Site Generator for your next project.

In this post, we show you how to choose the best static site generator for your particular use case. 

What is a static site generator?

A static website generator is like a construction kit for websites in that they act as a website builder. You input data and templates to build the website, and the SSG pre-renders all the content in the CDN to ensure that your web page is ready for your users' browsers when they open it up.

Using an SSG is an alternative to the traditional CMS approach of WordPress, where sites are sluggish and underperforming, which enables non-technical users to build either simple or complex websites on the fly.

Thanks to the rise of the Jamstack, static site generators are one of the most popular ways to create websites. They're easy, quick and you don't need any technical skills to build a static web page. In fact, a lot more people than before use static site generators to build high-quality websites without worrying about databases or HTML files – just Markdown text files with some tags thrown in here and there.

SSGs offer an alternative for those looking for simplicity and flexibility, whether building a portfolio site or a global eCommerce store. 

What is a static website?

In simple terms, a static website is an HTML-based website with minimum elements of CSS and JavaScript, if any. On the other hand, a dynamic website requires JavaScript code to be executed, making it slower and more complex than its static counterparts in processing speed and load times.

Choosing a Static Site Generator for Jamstack development

So what are the key factors to consider when choosing a Static Site Generator for Jamstack? 

While we recommend Next.js or Gatsby, these points still apply to any of these two static site generators, so pick your poison if Next.js or Gatsby is not your thing.

• Ease of development: Is it easy to develop with? Are you and your tech team comfortable working with the given technology and programming languages (i.e., Javascript)
• Headless CMS integration: Do other Jamstack technologies like headless CMSs support it? With frameworks such as Next.js, this is not a problem since you mostly integrate everything with an API, but it might be a problem in Gatsby where you'll need Gatsby-specific source plugins to handle CMS integrations.
• Jamstack ecosystem: Does it provide an ecosystem for plugins, builds, and previews? With Next.js, you're pretty much set with Next.js + Vercel (Next.js is made by Vercel). Gatsby has Gatsby Cloud, but it's not nearly as good as what Vercel offers and costs a lot more as well.
• Programming language: What programming language or framework is it built on? Usually, you'd want to use Javascript and React to be exact (Next.js and Gatsby.js) as they are the most widely used languages to develop the web and are well supported. 
• Driving force: Is it purely non-profit open-source or backed by a business? While pure open source is great, there's a risk where no one has the interest to maintain that framework, and it will become unsupported. On the other hand, by using something backed up by a big company (React <> Facebook, Gatsby <> Gatsby Inc., Next.js <> Vercel, and so on), you can ensure that your SSG of choice won't get deprecated anytime soon.

Best Static Site Generator for Jamstack in 2022

So now that you know what are some of the most important criteria for choosing a Static Site Generator, now you'd probably want to know what is the best one.

Ultimately in real-life commercial use, it boils down to Next.js vs. Gatsby.js.

Next.js vs. Gatsby.js

Both are based on Javascript and React, are backed by pretty big companies (Gatsby Inc. and Vercel), and fit well in the Jamstack ecosystem. So based on this, one could argue they're pretty similar. 

Yes, that's partially true, but it's more complicated than that. 

While both are React frameworks, the major difference between the two is how data is sourced during the static site generation phase:

Next.js

There are no rules on sourcing and composing your data on Next.js. In essence, this means you can use any API as your data source and use that data in any way you like during build time or server-side. 

This will take more time to configure than Gatsby's source plugins but in the end, provide much more flexibility and fewer dependencies.

Any cons to Next.js data sourcing? It takes more time to write your API queries if you're not using a Headless content management system starter for example. Gatsby uses GraphQL, where you can filter and sort data easily right in queries wherein Next.js depending on the API you're using, you might have to write your own sorting and filtering functions. This gives you lower-level access to everything but takes more time.

• Low level and hands-on: Next.js is lower level than Gatsby albeit the difference is not that big.
• Choose how to source data: Next.js does not dictate how you should fetch and compose your data nor does it have any plugins as Gatsby does. This means you'll have to create a lot of those features from scratch where in Gatsby you can use plugins and GraphQL.

Gatsby.js 

You'll have to use Gatsby source plugins to fetch data into Gatsby's GraphQL data layer. Gatsby dictates how you'll need to fetch data and limits you to use services that provide a source plugin for Gatsby. 

This is pretty limiting, and often source plugins get unmaintained or don't work properly for the aforementioned reason. Also, this will add more dependencies to your project, which is always a bad thing.

Any pros to Gatsby.js source plugins? Yes, source plugins make it substantially easier and faster to fetch and set up your integration to your CMS or other data source and will standardize how data is handled inside Gatsby (GraphQL).

• Easier to get into: Gatsby.js is also a bit more approachable, whereas Next.js is more low level. In addition, Gatsby provides more out-of-the-box with gatsby plugins and other boilerplate included with Gatsby. However, this might not be the best agnostic for Jamstack, where it's beneficial to have hands-on access to every aspect of your project.
• Corporate "vendor lock": Jamstack's ecosystem wise we're not huge fans of Gatsby as some features such as incremental builds are "vendor locked" behind Gatsby Cloud (Gatsby's own cloud platform). You can do things such as incremental builds etc., with something like Netlify, but it's not as easy as with Gatsby Cloud.
• Gatsby dictates how you source data: Gatsby is strict on how you source data. As a result, you'll have to use source plugins for each data source you wish to use.

Closing thoughts: Next.js or Gatsby?

As an agency working in the industry, we can tell for a fact that Next.js is more widely adopted than Gatsby and is often a better choice for Jamstack. 

Next.js is less opinionated on how you'll source data, where you'll deploy your app, and how you'll build your project. Instead, next provides essential building blocks out-of-the-box to get you started quickly but enables developers to fine-tune and optimize your code to fit any requirements. 

Gatsby is more opinionated due to how data is sourced with Gatsby plugins which adds another layer of dependencies (a bad thing). Next gives you more bare-bone access to everything, but it'll take longer to set up than Gatsby if you're not using a starter project.

Build your next static website with Ikius

While a dynamic site can be a good idea for certain users, in most cases, an overly dynamic site can result in both performance issues and potential loss of customers or visitors. At Ikius, we can help you decide whether or not you need a dynamic site and guide you to choose the best static site generator for your use case. We can also help you pair that SSG with a headless content management system for maximum performance. 

Read more about our experience with static website generators here: Interactive website development with Next.js.