Both Next js and Gatsby allow you to create static websites using React. There are three main differences to consider when choosing between them.
SSR vs. SSG
SSR and SSG are different paradigms of website rendering. Let's define them first.
SSR (Server-side rendering) - the content of your page renders at the run-time. Every browser request triggers a portion of code on the server that generates a page. It gives more freedom for customization.
SSG (Static-side generation) - generates pages at build-time. Each browser request simply fetches a static, pre-built HTML page. It provides the best performance.
Here is an excellent in-depth comparison article.
Initially, Next js was SSR only. Eventually, they added SSG support. Gatsby was always just SSG. In this regard, there are more options available with Next, while Gatsby may have a maturer approach to SSG.
Data handling
Next js provides a set of helper functions to handle data. You can use plain Node syntax to return any data from these functions asynchronously. With Gatsby, you must provide GraphQL queries to get the data.
Your attitude towards GraphQL may dictate your pick here.
Philosophy
Next js approach is to give you as much freedom as possible. It only provides API to communicate with the framework. Besides that, you are on your own. You can use a plain Node environment to build whatever you want.
Gatsby relies on existing abstractions called plugins. If you want to add anything, you should check for a plugin first. The current library of Gatsby plugins is pretty extensive and various.
Summary
If you need SSR or want better customization, use Next js. Looking for SSG that works out of the box? Gatsby is a better choice. Just make sure there are plugins out there for what you want to achieve.
Top comments (0)