Gatsby vs Next
Lately Gatsby and Next have gotten lots of attention. At first glance, they both seem very similar.
They both:
-
Generate very performant websites.
-
Creates SPA out-of-the-box.
-
Creates good SEO out-of-the-box
-
Have an awesome developer experience.
Also, neither of them are boilerplates but toolkits
This makes it difficult to choose which one to use.
Although they have many similarities, they are at the same time fundamentally 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
We are using Gatsby for a larger e-commerce site that sells phones. We have <200 products. It builds reasonably fast. Around 4 minutes. We don’t expect the product catalog to grow too much in the future.
For this use case, Gatsby is totally awesome.
We never have to worry about scaling. We know we can handle any amount of traffic because it’s just static data.
Another reason it’s awesome is that we have a history of all data. Let me explain.
We auto build and deploy each time the data changes. It happens roughly once or twice per day. We also store all older versions in S3.
That means we can always deploy a site with old data. So if new data introduce a new bug (which happened for us many times before), then we can temporarily go back to an old version of the data that works while working on fixing the bug.