Next.js vs Gatsby.js

Next and Gatsby have been been gaining lots of attractions this year and projecting to grow even more in 2020. At first glance, they both seem very similar.

They both:

• Creates good SEO out-of-the-box.

• Generate very fast websites built with page routing.

• Have an awesome developer experience.

Although they have many similarities, they are at the same time very different.

Static Site Generator vs. Server Side Rendered Pages

A static site generator generates static HTML on build time. It doesn’t use a server.

With server-side rendering, it dynamically generates the HTML every time a new request comes in. It uses a server for this.

Gatsby is a static site generator tool.

Next is mainly a tool for server-side rendered pages (although it also supports static exports)

Of course, both can call APIs client side. The difference is Next requires a server to be able to run. Gatsby can function without any server at all.

Gatsby just generates pure HTML/CSS/JS. This means you can host it at S3, Netlify or other static hosting services. This makes it extremely scalable to high traffic loads.

Next creates HTML on runtime. So each time a new request comes in, it creates a new HTML page from the server.

Gatsby handles your data

Another big difference between the two toolkits is how they handle data.

Gatsby dictates how you should handle data in your app.

Next does not dictate how you should handle your data. How you do it is entirely up to you.

So how does Gatsby handle data? All data for your whole apps go into GraphQL. Let’s say you fetch data from an API. Then you first have to tell Gatsby to import the data into a GraphQL database.

Your React components fetches the data from the GraphQL endpoint.

Gatsby also has lots of plugins for various data sources which (in theory) makes it easy to integrate against many data sources. Some examples of data sources plugins are Contentful, Wordpress, MongoDB and GraphQL.

When building for production, GraphQL is no longer used, but the data is persisted into JSON files instead.

With Next on the other hand, how you manage your data is up to you. You have to decide on your own architecture how to manage data. You have to make a decision if you want to use GraphQL, Redux, pure React.

So what should I choose?

Whether you should use Gatsby or Next depends on your use case.

When not to use Gatsby

If you have lots of content or if you expect your content to grow a lot over time, then static generated web pages is not a good solution for you. The reason is that it takes much time to build the site if you have lots of content.

When creating a very large 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.

So if you have a site with content that you will expect to grow and grow over time, then Gatsby might not scale for you. And you must not only think about how much content you have now, but how much you expect in the future. How many pages will you have in 1 year? 5 years?

When to use Gatsby

This blog uses Contentful as a headless CMS and the data is pulled in with GraphQL. The site is extremely fast and takes less than 6 seconds to build.

For this use case, Gatsby is totally awesome.

I never have to worry about scaling. I know I can handle any amount of traffic because it’s just static data.