Next.js vs. Gatsby
React frameworks are software platforms that extend the capabilities of React web applications. Certain functionality needed in most blogs and websites (page routing and image optimization for example) don’t come packaged as part of the Create React app; they require libraries and complicated configuration to implement.
Frameworks like Gatsby.js and Next.js include this functionality as defaults, enabling React developers to easily build full sites without much upfront configuration. Additionally, since their individual parts were optimized to work together (vs. installing libraries that came from different places), you begin with an incredibly performant site.
When deciding between Gatsby and Next, how do you determine which framework is best? Let’s explore the key differences between the two. We’ll end with some questions to ask yourself to make the best choice.
Let’s begin with a look at what it’s like to start up a site with Gatsby versus Next.js.
In addition to comprehensive documentation, Gatsby’s website includes a mini-tutorial that shows new users that building and deploying a Gatsby site takes just a few simple steps. Developers can start a basic site using the Gatsby CLI or choose a pre-styled template from Gatsby’s library of starter sites. Starter templates allow users to quickly spin up a beautiful and functional blog without having to fuss about design. Developers can also create their own Gatsby starters.
Though getting started is easy, customization can involve a bit of a learning curve. Gatsby relies heavily on GraphQL for page routing, fetching API information, and use of plugins (we’ll talk more about this later). If you’ve never worked with GraphQL before, it is worth it to take a quick tutorial to learn the fundamentals.
Getting started with a Next app is as simple as typing in a command in your terminal. Next’s CLI tool
create-next-app works the same way as
create-react-app, allowing you to spin up a full app with added functionality such as image optimization and page routing included as a set of customizable defaults. From there, a fundamental understanding of React is all that is really necessary to build and customize your Next site.
Next.js website has comprehensive documentation with details about building a Next app using React or TypeScript. They even offer a free “Getting Started” tutorial to help walk new users through the first steps. Examples of how to use Next with dozens of other popular tools, libraries, and languages can also be found on their GitHub page.
React applications built without a framework like Gatsby or Next have notoriously poor SEO. They use client-side rendering (CSR) to render pages; passing HTML, CSS, and a script tag to the browser when it receives a request for a page. That script tag contains the instructions your browser needs to build all of the React content on your site. To properly index your site for search engines to find, web crawlers need to be able to read that content before your site is run. However, most web crawlers don’t run that browser script as they crawl, so they don’t get all the information about what’s on your page in time to index it.
Gatsby and Next solve this through the way that they handle page rendering. Both provide web crawlers with the full contents of your site before the page is run in the browser, making your site appear in Google search results.
Let’s talk about how each framework helps with SEO:
Gatsby uses static site generation (SSG) to pre-render pages. Before deploying a site built in Gatsby, your code goes through a build process where the full HTML site is prebuilt before it even gets a browser request. When a user visits a page built in Gatsby, Gatsby locates the page’s HTML file in your build folder and rehydrates the page in order to make it into a full React application.
After making any updates to your site, the build process needs to be run again in order for the CDN to have the most recent updates. Thus, Gatsby is better for sites that don’t change much during the day such as landing pages, company sites, and blogs.
Next’s primary differentiator is its use of dynamic rendering (a fancy way of saying “the page is built when the browser requests it”). All of the information for your site (routes, page data, etc.) exists on a Node.js server. When you navigate to a Next.js page from your browser, the server goes to find the page you requested. It is at this time that the page is built, and the data is then sent to the browser for the user to see. For this reason, dynamic rendering is great for sites updated multiple times a day such as e-commerce stores and online forums.
Fetching and Handling Data
The biggest difference in the methods used to fetch your data will depend on whether your app is statically-generated or server-side rendered. Since statically-generated sites pre-build pages before they are rendered in the browser, they fetch any data they need at build time. By contrast, server-side generated sites fetch the data needed at run time.
Gatsby does not care which API your data comes from, but it will take and source whatever data it gets back and make it available to you as a GraphQL API. In order to access your data, however, you will need to write GraphQL queries in your code.
GraphQL is great in that it allows for fetching very specific data - like the names of all blog posts with a specific tag, for example. This is meant to improve performance by decreasing network usage. However if you are building a SSG Gatsby site, all data is fetched at build time and there will be no impact on performance at runtime.
Next is flexible when it comes to fetching data, leaving it up to users to decide the approach they would like to use. The only piece required when it comes to data fetching is the use of one of their lifecycle methods (
getServerSideProps to enable SSR or
getStaticProps for SSG) to get the initial props needed to pre-render the page data.
If you plan on fetching large amounts of data, SSR is the better option. Massive amounts of data can cause slow builds in SSG apps. Servers used in SSR, however, are much more powerful and capable of quickly and repeatedly performing these complex operations.
Plugins, Extensions, and Ecosystems
One reason why Gatsby and Next are so popular is that both easily integrate with other tools and languages you’re already familiar with. Through their partner ecosystems, these frameworks allow you to further extend the capabilities of your apps without unexpected side effects.
Unless you’re using a starter, most additional features are not included in your Gatsby file. However, Gatsby is very much like Wordpress in that it has an enormous ecosystem of plugins that allow you to easily enhance your app with any functionality you would like to add. Compressing images, adding in the TypeScript compiler, and using a pre-built theme are all examples of capabilities available in Gatsby’s plugin library.
Through the plugin library, Gatsby has the largest partner ecosystem of any framework. Plugins are available for most tools and libraries you’re already working with, making integrating Gatsby with other tools very simple. If you want custom functionality or themes, you can also build a custom theme or plugin and host it in the plugin library.
Functionality that has traditionally been difficult and time-consuming to add to React manually— like page routing, image optimization, and code splitting—come as out-of-box defaults that can be easily customized in your Next.js
Next was created by Vercel, a popular deployment and collaboration platform. As a result, Next benefits from Vercel’s incredible ecosystem of partner tools. Next is, of course, optimized to work with Vercel but also works well with other tools and libraries you already use for hosting, styling, and building, making it easy to incorporate it into your tech stack.
Will you be the only person who touches your app, or will there be others who maintain it? Are you expecting loads of activity from daily users? The choice between Gatsby and Next.js will depend on how large you expect to grow your app in the future.
Gatsby is best for personal blogs and smaller static sites. When apps become too large, they may become extremely slow during builds or may not build at all. On their scaling issues documentation page, Gatsby notes that “large” is typically defined by an app with over 100K pages or with large amounts of data being fetched from the GraphQL API.
Next is lightweight and easy enough to be used by hobbyists, but also powerful enough to scale for enterprise use. Large organizations with tens of thousands of daily website visitors including Netflix, Hulu, and Nike are running on Next apps hosted on Vercel. When building a large enterprise-scale application, you should reach for Next.js.
Now that you’ve built your app, it’s time to host it somewhere for people to use and interact with. Let’s talk about where Gatsby and Next.js apps can be hosted:
During the build process, Gatsby generates static assets that can be used in the browser and hosted anywhere. You have the flexibility to decide which hosting platform is best for you: Netlify, Firebase, Azure, AWS, Vercel, or whatever your heart desires.
Similar to Gatsby, Next’s SSG option generates static assets that can be hosted anywhere. However if you choose the SSR route, you have to find a Node.js server to host it. Vercel—the creator of Next.js—is of course optimized to do this. SSR is supported by most of your favorite hosting platforms as well (Firebase, Netlify, AWS), but make sure to use tutorials specific to SSR hosting when you are first learning.
Choosing Between Gatsby and Next
Deciding between these two frameworks comes down to the following questions:
How often do my pages need to be updated? With dynamic routing, Next is optimized for apps with pages that need to be updated often, such as stores or apps listening for messages. By contrast, static sites need to be rebuilt every time they are updated. If you are creating a blog or site with pages that don’t change frequently, you can use Gatsby.
Am I building a blog or static site? Gatsby has long been known as a great tool for personal blogs and small static sites. As a result, it has an expansive plugin library with themes that will give you features you will need in your blog so that you don’t have to build them from scratch. If you’re building a small site or blog but don’t want to build every feature from scratch, Gatsby is a great option for you.
Does this app need to scale? Gatsby apps are known to run into errors and slow builds when they become too large or fetch large amounts of data. If your app will have more than 100K pages or will need to fetch large amounts of data (such as a store containing many products with variants), Next.js is your best option.
For optimizing large, enterprise-scale apps or sites with lots of updates, reach for Next.js. For small or static sites and blogs, Gatsby is the optimal choice. No matter which you choose, however, you can expect an optimized React app with out-of-the-box features for enhancing performance, integrating with the most popular third-party tools, and boosting SEO.
Build a Blog that Software Developers Will Read
The Technical Content Manager’s Playbook is a collection of resources you can use to manage a high-quality, technical blog:
- A template for creating content briefs
- An Airtable publishing calendar
- A technical blogging style guide