Ricky Panzer, CEO

Jan. 22, 2021

If you're looking for JavaScript frameworks to build your website, Gatsby and NextJS are both great fits. They're both based in React, giving them the same benefits of security, customization, and SEO that come with that environment. And if you're coming from Create React App, transitioning to either one will be intuitive, since they follow a similar syntax and environment, and of course are both built upon the same language.

Plus, both NextJS and Gatsby allow you to circumvent things like WordPress or Spotify's Liquid templates, both of which can be complicated, difficult to customize, and slow.

If you’re looking to build a performant JavaScript-based site with well-designed development tools that are easy to use and quick to deploy, it's hard to go wrong with either. But each has its advantages and disadvantages compared to the other. Let's take a look at how Gatsby compares to NextJS, and when you should choose which.

Server-Side Rendering

Server-side rendering, or SSR, is the main reason to avoid frameworks like WordPress and Spotify's Liquid in the first place. Sites built using SSR have to render each page anew every time a visitor lands on it, generating it with PHP and recreating the HTML for each page view. Static-site generation solves that problem by loading the same HTML every time a user loads a page, meaning sites load more quickly and take less resources. In cases like making marketing websites or blogs, SSR is usually overkill.

However, there are times when SSR is actually necessary to implement certain dynamic features, particularly if you need features that require a user to log in, show shopping cart history, and others that can't quite work statically. Gatsby can't be used to create SSR sites, but NextJS can. If you don't need any SSR features, then whether you choose NextJS or Gatsby will hinge on how they compare on other dimensions. 

NextJS also offers a blend between SSR and static-site generation called Incremental Static Generation, in which the server generates a page whenever any user lands on it, and caches the page for future users. In other words, it's able to offer the benefits of SSR while keeping the drawbacks of speed and resource consumption with SSR to a minimum.

All told, if including certain dynamic features in your site are make-or-break, NextJS is your best bet.

“Gatsby does Static Site Generation, while NextJS does Static Site Generation and Server Side Rendering”

Developer Community

NextJS and Gatsby are developed in similar ways. NextJS is developed by Vercel, which ships a new version of the framework every couple of months. Gatsby it also developed by a company of the same name. Both frameworks are open source, and both have been starred tens of thousands of times by developers. 

But Gatsby's developing company has gone the extra mile in developer outreach and education with a level of evangelism that Vercel hasn't yet matched. That means Gatsby has a welter of information on how to work with it: pages on plugins, starter templates, tutorials abound. It has partnered with Netlify and engaged with other outside parties, and while NextJS has a single four-hour course on Frontend Masters, Gatsby has two. 

"If you're looking for the most available and abundant community support, Gatsby is the better option."

Complements

Both frameworks also have their own complementary frameworks that work best with each. 

Gatsby works well with Netlify, a git-based serverless platform for hosting websites. It's perfect for the static websites Gatsby is great at making, and it provides just enough functionality to not need complex development processes while deploying the Gatsby site with deploy previews for new builds on a super fast CDN.

Gasby also goes great with Contentful as a way to manage content. Clients will be able to update website copy, text and images, without spending engineering hours. For an example of how Netlify and Contentful can work together on a Gatsby site, check out our work with Elegance Brands. Clients will be able to update website copy, text and images, without spending engineering hours.

As for NextJS, you can use it with Vercel, the company's eponymously named infrastructure that offers the same features for NextJS that Netflify does for Gatsby. Netflify itself also works with NextJS, but new features of NextJS are more likely to be supported on on Vercel than on Netflify, since Vercel actually makes the framework.

Contentful also works with NextJS.

And with NextJS, you can create an entirely custom back end to add SSR functionality.

"Both Gatsby and NextJS have a rich set of complements, but NextJS allows more customizability on the back end for dynamic sites."

Advised applications

Since they're similar but not identical, Gatsby and NextJS have different applications that they work best for. Here's a quick overview of some use cases where you'd want to use either:

Gatsby

Marketing sites

Marketing sites are image-heavy and don't require a lot of dynamic rendering. That means the way you load images is often the most critical factor. Gatsby has the ability to lazy-load images  using Gatsby Image. This allows sites to place assets on the page before they fully load, preventing the site from jumping around as it loads and frustrating visitors.

Headless eCommerce

Gatsby makes it very easy to get up and running with headless eCommerce sites. If you're just starting out and you don't need a lot of dynamic features, it's a great framework for that.

NextJS

Headless eCommerce

Even if NextJS is trickier to start out with than Gatsby, its features like Incremental Static Regeneration allow you to create eCommerce sites that have the functionality of a full Shopify template while minimizing loading times. If you're looking to make a headless eCommerce site and you don't need the same kind of support that Gatsby's developer community offers, NextJS is a good choice.

Blogs

Blogs exist on a spectrum, and depending on how simple yours is, the framework you use might not make a huge difference. But if you're looking to include dynamic features, like comments, NextJS's features like Incremental Static Regeneration allows you to implement them without sacrificing performance.

"Gatsby is great for image-heavy sites and those that don't rely on dynamic features. If you're looking for the latter, you should use NextJS."

Conclusion

Gatsby and NextJS are both React-based frameworks that can integrate with systems like Contentful and Netflify. If you are looking to build a more robust application that requires a custom backend, we highly recommend NextJS. But if you're building marketing sites that require a lot of images, and you need a top-notch developer community with loads of tutorials and resources, Gatsby is probably the way to go.