Blog Jamstack

 Best SSG in 2022 - Next.js or Gatsby.js?

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.

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 SSG so pick your poison in case 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 (ie. Javascript)

  • Headless CMS integration: Is it supported by other Jamstack technologies such as headless CMSs? With frameworks such as Next.js, this is not a problem since you mostly integrate everything with an API, but 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 is it 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. 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, both are backed by pretty big companies (Gatsby Inc. and Vercel), and fit well in the Jamstack ecosystem. Based on this one could argue they're pretty similar! Yes, that's partially true... It's complicated!

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 how you should source and compose your data on Next.js. In essence, this means you can use any API as your data source and use that data 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 CMS starter for example. Gatsby uses GraphQL where you can filter and sort data easily right in queries where in Next.js depending on the API you're using you might have to write your own sorting and filtering functions. This gives you a 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; this makes 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. 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. You'll have to use source plugins for each data source you wish to use.

Conclusion: 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. 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 requirments. 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.

Need help with your Jamstack project?

Leave us a message, and we'll get back to you in a moment.

Avatar

New Business

sales@ikius.com