Whenever we want to build a static website that is fast, SEO friendly, and is able to deliver a great user experience, we choose one of the two most used React frameworks: Next.js vs Gatsby.
While Next.js is dynamically rendered, Gatsby is statically generated and rendered beforehand. If you want to build a React website or application without having to deal with routing, configuration, or server-side rendering, take a look at the differences between Next.js vs Gatsby, its applications, and when to use which one.
Table of contents
What is Next.js?
➤ Why should I use Next.js?
What is Gatsby?
➤ Why should I use Gatsby?
➤ What are Gatsby plugins?
➤ Is Gatsby a SSR or CSR?
➤ When should you not use Gatsby?
Next.js vs Gatsby: Which one is best?
What is Next.js?
As we’ve already covered in previous blog posts, Next.js is a React-based framework that builds server-side rendered apps and enables search engines to easily optimize React apps with zero configuration. It is generally used to deploy landing pages, SEO-friendly sites, eCommerce stores, and all kinds of web applications that require high-performance load times.
Why should I use Next.js?
Picking the best framework to develop a web app usually depends on the production requirements and medium/long-term goals of your project. However, these are some of the main advantages of using Next.js:
- Makes coding easier
- It's fast
- The rendering is fast
- It has built-in CSS
- Allows a better image optimization
- It helps improve SEO
- It is ESLint compatible
- Enables easy customization and deployment
- Has API support
What is Gatsby?
Just like Next.js, Gatsby is also based on React and is a Static Site Generator, meaning that what Gatsby will produce for us are static HTML files that we load up onto a server. This works differently than how a lot of websites work where you visit a website and it has to query a database or do some programming on the server itself in order to serve your web pages. Gatsby is going to break that convention, have all of the stuff pre-configured ahead of time, and serve that up.
One of the good things about Gatsby is that it uses GraphQL, a querying language, to get data from anywhere, which is an evolution of how to make API calls simpler and more efficient - this feature is called data layer .
Gatsby also uses React and CSS. While React is going to be used for all of the templates, CSS is going to be used for the styling.
Why should I use Gatsby?
In one simple sentence, you use Gatsby for speed, security and improved developer experience.
Arguably, one of the biggest gains you get with Gatsby, since it is generating a static website, is speed. You’ll see it is going to be way faster than many of the alternatives such as even cached sites using WordPress because that static is really hard to beat. This is because Gatsby is based on adjustable plugins and themes like we will see below, making the process of developing a web app or software much faster than in Next.js.
Also, because of the static nature and just shipping HTML files, this is going to be inherently more secure. There isn’t a database to hack or access, no user data that is going to be stored on the server with the Gatsby site, so even if somebody were to be able to hack the server itself, they will only get access to HTML files and will be able to far less damage than they could if they were getting access, for instance, to the user data, purchases, credit card numbers, and so on.
Finally, it can be really draining for developers to work in antiquated stacks, and the modern development environment is a great advantage of working with Gatsby. The tooling is simple and robust, the languages are modern and clean, and overall it’s a really seamless environment to be working in.
What are Gatsby plugins?
Gatsby is built with a plugin architecture, and it has a huge ecosystem of plugins, as well as, Gatsby themes.
Plugins sit in between the code that is written and the code that gets outputted, and as we’ve said earlier, everything goes through Gatsby, which enables it to step in between everything and just compress it - whether that’s an image or a CSS code that needs to be compiled, and so on.
Is Gatsby a SSR or CSR?
The simple answer is that Gatsby actually supports both SSR (Server-side Rendering) and CSR (Client-side Rendering).
SSR is the most common method of displaying content onto a screen, and it operates by transforming HTML files on the server into browser-friendly data. Simply put, it enables you to pre-render a page with data that is fetched when a user visits a page. Gatsby supports SSR through asynchronous functions as you can see here.
When should you not use Gatsby?
If you have a lot of content or if you expect your content to grow over time, then a static generated site might not be the best solution for you, because it will take much longer to build your site project due to the amount of content.
When creating a very large site or app with thousands of pages it can be really slow to rebuild. And if you have to wait 20 minutes when you hit publish before it goes live it’s not a very good solution.
Simply put, if you have a site with content that you will expect to grow over time, then Gatsby won’t scale for you. And you must not only think about how much content you have now but how much you expect in the future, i.e., have in mind the number of pages you expect to have in the future when choosing between Next.js vs Gatsby.
Next.js vs Gatsby: Which one is best?
One of the main contrasts between Next.js vs Gatsby is that Next.js is originally a server-side rendering tool. In other words, it only supports Static Site Generation (SSG) since the 9.3 version. On the other hand, Gatsby is a Static Site Generator so there are a lot of out-of-the-box solutions for it, like Gatsby Themes, a quite rich plug-in ecosystem, and so on. Let’s take a look at the main differences between the two, which is how they handle data and routing, and how they are deployed.
How they handle data
Another difference is the way they handle data. Whereas Gatsby’s data fetching goes through GraphQL by default, in Next.js it is a bit more flexible and you can pretty much decide how you’re going to approach data fetching yourself. Let’s take a better look:
Next.js is unopinionated about how you handle your data and the only relevant factor for it is that it has its own lifecycle method called
getInitialPropswhich is an asynchronous method that needs to be resolved before the data can be sent from the server to the client. At the end of the day, instead of
getInitialProps, the documentation recommends using
getServerSidePropssince these fetching methods always running on the server (never on the client) allow you to have a granular choice between static generation and SSR.
While, Next.js doesn’t “care” how you get the data, Gatsby allows you to source data from any API you want or markdown file, and it makes it available to you via GraphQL API. When you’re building up your pages, you write queries against the GraphQL API for a list of blog posts, or about the page content, and at the render time it will make that API available to you and then it will render out those HTML pages for you. All in all, Gatsby needs to know everything happening on your website, where all of your data is, all of your images, and all your styles.
How they handle routing
Next.js: you have a folder called pages where you can create index.js, about.js, and other subfolders with pages inside of them. Here, there is no routing to config, you simply just create pages inside the pages directory, and you’re up and running. Dynamic URLs are also possible through bracket syntax which allows to catch all routes you may need.
Gatsby: Here, you can also have a pages directory, however, they also have an API where you can dynamically create routes. For instance, we talked about the GraphQL API above where you could create a query of blog posts and then loop through them and use the
createPageAPI to dynamically create the pages. Here, you can specify what the slug is, what component will be rendered out. Say you have a list of 10.000 blog posts, you can just loop through them and dynamically create pages for each one.
How they are deployed
Next.js: this is a Node application that you can host pretty much anywhere you want. Recent versions of the Node hosting platform now allow you to take your Node apps or Next.js applications and turn them into serverless applications.
No matter what, both Next.js vs Gatsby are really great tools to build static pages, and the decision about which one to choose is really a matter of project requirements. Though, one of the most important things to consider is how many updates your website will have during the day. As already explained before, Next.js is a server-side rendering tool and all the updates are happening pretty much dynamically, while with Gatsby, each and every update means that you have to build your website again and again, except if you use the SSR API that allows rendering a page at run-time with data that is fetched when a user visits the page.
But generally speaking, it’s easier to build a website with Gatsby because it comes with many plugins and ready-to-use solutions, so if you want to build a simple website that doesn’t require too many daily updates, you can pick Gatsby. These websites could be company websites, landing pages for your product, or even a personal blog. On the other hand, Next.js is a really great tool to build outstanding and customized user experiences, and it’s mostly used to build big e-commerce shops, when you have a lot of daily updates on your website, or when you want to build a really big web portal where you have a lot of users. Next.js is a great option when your project demands server-side rendering more than static site generation.
More than 500.000 people read our blog every year and we are ranked at the top of Google for topics such as Next and Gatsby. If you liked this blog post and would love to read all our blog posts, take a look here.