What's the difference between Gatsby and Next.js

The differences between Gatsby and Next can seem subtle at first glance. Both are React-based frontend frameworks meaning that at its most fundamental level, an application built with Gatsby or Next is still a React application. Both frameworks also provide similar out-of-the-box enhancements to your front end to enhance both the developer and user experiences. These strong similarities can make it difficult to determine which to choose for your application. Key differences In this article, let’s briefly discuss these similarities and differences and how to decide which framework to use.

#Intro to Next.js

Next.js is a React framework created by Vercel, a popular deployment and collaboration platform. Vercel has an extensive ecosystem of partners that work to make sure that connecting your Next app with other popular languages, tools, and libraries is easy. It also focuses on great developer experience through production-level features such as code splitting, bundling, routing, image optimization, and internationalization right out of the box and without intensive configuration.

Getting started with Next is simple; a CLI command called create-next-app allows you to spin up a full Next site in seconds. It also gives you access to an extensive list of additional commands that can be used to quickly connect additional libraries, languages, and tools or to see working examples of customized configurations. The Next website provides great documentation that allow you to learn Next quickly, migrate an existing app to Next, or troubleshoot issues that may arise.

Like Gatsby, Next.js pre-renders pages by default to enhance the performance of your application. Traditionally, server-side rendering was the preferred method in Next, however, it now recommends static-site generation because the HTML from the prebuilt statically generated pages is cached by the CDN and reused with every browser request. By contrast, SSR re-builds the entire page on the server each time a request for a page is made. While that might jump out as a major performance issue (and it should), there are reasons to use SSR though, and you’ll start to see it as your apps become larger. There might be situations where the more streamlined SSG approach becomes impractical, and Next, having been built from the beginning to support that approach, might be your saving grace in that situation. Server rendering is best for websites with a lot of dynamic content, such as eCommerce stores or online forums, so if you can foresee diving into any of those areas in the future, it’s best to go with Next right now. Here’s a reference about the pros and cons of these approaches if you’re still curious.

Pros and Cons

#Intro to Gatsby

Gatsby is a front-end intended for use with some datasource — an API, a database, or a headless CMS like Hygraph. Because it’s optimized for that use case, Gatsby can turn a little React and GraphQL into incredibly performant sites. Gatsby sites can be hosted anywhere, making this framework one of the easiest to integrate with your existing tech stack.

In order to improve performance and SEO, Gatsby uses page pre-rendering by default, preferring the static site generation (SSG) method. That means that the pages of a site built with the Gatsby SSG are pre-rendered to HTML, CSS, and JavaScript at build time and cached. When a user opens your site in their browser, Gatsby locates and hydrates the necessary build files (the files matching the path of the request). Since the pages are cached, it can just reuse the same build files on every browser request. This makes for a much faster user experience, even for users with slow internet connections. And for the curious, this is the architecture we’re talking about when we call things “Jamstack”.

Now although this SSG pre-rendering approach brings us some amazing benefits, it is a double-edged sword. Anytime there are any updates to the site, Gatsby has to go through the build process all over again to incorporate the changes. That makes Gatsby optimal for sites that don’t have many of those updates — static sites like blogs, landing pages, and company sites.

Gatsby doesn’t include everything straight out of the box, and that’s by design. Gatsby’s creators prefer to keep the code lightweight as possible by offering most enhancements as a plugin. Connecting with other tools and libraries is done through plugins as well. Gatsby boasts the most extensive partner ecosystem through its immense plugin library. Plugins provide Gatsby developers starters, templates, and the ability to easily extend the capabilities of their application. If you are looking to add custom functionality to your site, you can even build and publish your own plugin to the library.

Getting started is made easy by the comprehensive documentation on Gatsby’s documentation site. Take a tutorial to learn the basics, scroll through a reference doc with thorough explanations about Gatsby’s APIs, or read an article about best practices in Gatsby web architecture to take your application to the next level. Plugins also have their own documentation pages where you will find more details about how to use and customize them.

Pros and Cons

#Key Differences

There are two primary differences between Next.js and Gatsby: the way that data is fetched and handled, and the requirement of a server.

Differences in Data Fetching

A key difference between Gatsby and Next.JS is their relationship with GraphQL. Since Gatsby is built on GraphQL, data fetching happens through GraphQL queries. For developers who are not familiar with GraphQL, getting started with Gatsby can involve a bit of a learning curve. If you absolutely need to it is possible to use Gatsby without GraphQL, however GraphQL is a key foundation of Gatsby’s draw. For example, here’s what that same data-fetching example would look like in Gatsby:

import React from "react"
import { graphql } from "gatsby"

import Layout from "../components/layout"

export const query = graphql`
  query HomePageQuery {
    site {
      siteMetadata {
        title
      }
    }
  }
`
const IndexPage = ({ data }) => (
  <Layout>
    <h1>{data.site.siteMetadata.title}</h1>
  </Layout>
)
export default IndexPage

Similar to Gatsby, Next acts as the frontend for use with any type of API, database, or headless CMS. However, Next doesn’t push GraphQL as heavily, so developers have a bit more flexibility and a little less help from the framework when it comes to data input. Here’s an example of how we might fetch Data from GraphQL with Next.js:

export async function getStaticProps(context) {
  return {
    props: {
            posts
        },
  }
}

function Blog({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li>{post.title}</li>
      ))}
    </ul>
  )
}

Differences in Server Use

Another key difference between Next and Gatsby is that Gatsby can be run in the absence of a server. Next requires a server when using next start, and that server is included by Next by default. If you would like to generate static files with Next without using a server, using next export is the best option. (Note that the absence of a server has its limitations, such as no redirects or server-side rendering).

#Next.js vs Gatsby Comparison Chart

#Intended Use Cases for Next.JS

Next is best for large apps that need the flexibility to scale. Enterprises such as Netflix, Github, Twitch, and Uber trust Next with the front end of their enormous dynamic sites. Due to Next’s strong support for server-side rendering, it’s perfect for apps with content that changes frequently throughout the day. Regardless of the rendering approach though, Next still manages to remain lightweight enough to be used to build small, performant sites as static personal blogs or small business websites.

#Intended Use Cases for Gatsby

Generally, consider Gatsby for smaller to mid-size applications. According to Gatsby’s scaling issues documentation page, large apps (apps with over 100k pages, large JSON files, or large GraphQL queries) can cause errors and slowness in a Gatsby site. It’s just hard to statically generate all those files! For this reason, it is recommended that Gatsby be used for small static sites, such as personal blogs or landing pages.

#Choosing the Right Framework

Both Next and Gatsby offer similar benefits for developers and end users. Whichever you choose as the frontend on your next application, standing up a performant and production-ready site can be done in minutes without the hassle of difficult additional configuration. Connecting your site with your favorite database, styling library, or eCommerce engine is easy as using a one-line terminal command!

With so many similarities between the two, you can ask two questions to decide which to use:

How often will my content be updated?

If you have an eCommerce store or forum with frequent changes during the day, Next.js’ server rendering option is your best choice.

Does this app need to scale?

If your app will remain under 100k pages with small amounts of data, Gatsby is a great option for your smaller, incredibly fast static site.

And if you’re looking for a headless CMS that will integrate seamlessly with your app no matter what framework it uses, check out Hygraph! These articles on setting it up with Next and with Gatsby should make the integration smooth and painless.