Aug 3, 2021 · 10 min read
Next.js and Gatsby are both frameworks for React. Both Gatsby and Next.js exist to lay the foundations of a React app. It means that you have all React foundations that give you a create-react-app boilerplate plus additional features, toolkit, and guidelines of how the app should be coded on top.
Plugins are pre-made Node.js packages that allow you to plug pre-built functionality into your website
Gatsby has plugins ecosystem around its functionality, which increase the work speed. Gatsby has plugins for many things, with a minimum setup time, just paste the code and implement almost every external integration.
An example of a plugin:
You can install special plugin for fetching videos from a list of Youtube channel or scraping the posts of an Instagram account and display it on your website.
You don’t need to visit the Youtube or Instagram documentation and generate API keys. Plugins saves time and facilitate work.
Gatsby uses GraphQL out of the box to enable page and StaticQuery components to declare what data they and their sub-components need. Then, Gatsby makes that data available in the browser when needed by your components.
Gatsby uses GraphQL at build-time and not for live sites. This means you don’t need to run additional services (e.g. a database and Node.js service) to use GraphQL for production websites.
An example of a GraphQL query:
If you want to get only title from siteMetadata when in fact the siteMetadata object contains a lot more information. You are able to specifiy exactly what piece of information you are after.
A starter is a boilerplate Gatsby site that users can copy and customize. Gatsby offers official starters for a default site, blog site, bare-bones hello world site, and both using and creating themes.
So, if you want to create a shop, then I can find a relevant starter or theme that have the required functionality - a cart, a link to Stripe etc.
The fact that Gatsby focuses to intensely on the plugin ecosystem means that it is often hard to diverge from these. If you need to create something which there is not already existing plugin for. Then create a plugin from scratch to cope with potentially functionality that would be a quick thing to implement in a non-Gatsby app is made more complex. You need to edit the gatsby-node.js file and create a custom Webpack config.
Whilst GraphQL is good tool, one of the main purposes of GraphQL is lost in this case. GraphQL is uses to cure over-fetching, but Gatsby’s main use case is Static Sites, which means that fetching all of the data from the API’s will cause no extensions to runtime, it would take more time at build time granted, but for flexibility that seems a worthwhile trade.
Gatsby is better for smaller applications, because if you have a massive amount of data you are going to want to potentially implement Server Side Rendering. GraphQL in that case, is not best tool.
Another flaw is that however in Gatsby using GraphQL aren’t strictly necessary to pull data into a Gatsby site using Gatsby without GraphQL. But using Gatsby without GraphQL is a work around.
The main argument for Next.js is flexibility. Next.js didn’t force the developers into an ecosystem of plugins and GraphQL. Pre-render pages at build time (SSG) or request time (SSR) in a single project and give the developers to choose one or the other and switch between the two is a huge gain for Next.js flexibility.
If your project will to scale over time and you will add complexity or you think that SSR would be the best way of doing your project. Then Next.js will better choice. That wouldn’t be possible in Gatsby. So taking scalability into consideration when starting a project and going with the more flexible solution.
Next.js works with the filesystem routing and GraphQL is not uses out of the box. If you export an async function called getStaticProps from a page, Next.js will pre-render this page at build time using the props returned by getStaticProps. There is even a feature called ‘Incremental Static Generation’ which means you can register new static pages at run time.
For example, API folder is generated from the start. I didn’t mention it in the previous block, but it’s worth it for sure. Every js file in this folder will be executed as a serverless function when a project is hosted on Vercel or Netlify. These functions handle logic like user authentication, form submission, database queries, custom slack commands, and more.
Next.js ecosystem does not have so much templates and starter projects that make it quick and easy to get a project up and running as it is with Gatsby
Since the number of pages is predictable and the content doesn’t change, Gatsby is perfect for building these websites.
Shorter development time with a wide range of Gatsby plugins, starters, themes.
Gatsby offers support for plugins to get content from almost all CMSs, databases, REST APIs, and GraphQL. It also has plugins that support different data formats like JSON, Markdown, and MDX.
Corporate websites built with Gatsby as main React framework:
Small blog websites built with Gatsby as main React framework:
Public pages for any B2B or SaaS product built with Gatsby as main React framework:
Small eCommerce Websites built with Gatsby as main React framework:
We can’t compile static HTML for each user with Gatsby. For Gatsby, the major disadvantage for creating such websites is the time taken for the building process. We can’t afford to rebuild the whole website, as it would take ages to do it with SSG. Users often want to see their content in real time, not after a few minutes through a build process. “real-time” means rendering needs to be done constantly, with the newest data available. Since the content is created by a large number of users and gets incremented when new users join, it will be practically impossible to compile to a static site in build time. It’s much easier to show the relevant content in runtime. And if the number of users is high, it could take up to a few hours. Even the static blog content needs to be published in real time and accessible for editing by the user. In such cases, build time-based frameworks won’t work well.
SSR is needed for public content. SSR will help to render the site based on authentication.
Most of the pages today need to be optimized for Search Engines, and since the content is usually dynamic in these kinds of pages. type of app is best built using Next.
For hybrid web apps that doesn’t require SEO, both Gatsby and Next.js are capable. But for applications that require SEO for publicly accessible dynamic content, then Next.js is the best option.
If a small change will come, it needs to be visible everywhere, therefore, the production of SSG pages would take ages in that case.
So for dynamic web applications, both Gatsby and Next.js are equally capable
If you have a company website and a web app product. And you want to build it with single codebase, not as two independent sites. In such situations, it’s much easier to handle both with Next.js and Gatsby, too. We can render the static pages for the company website and CSR for the web app product. The same way, we can utilize SSR for the website and a combination of SSR plus CSR for the web app.
We can use only Next.js or we can combine SSR plus CSR
Corporate websites built with Next.js as main React framework:
Small blog websites built with Next.js as main React framework:
Public pages for any B2B or SaaS product built with Next.js as main React framework:
Small eCommerce Websites built with Next.js as main React framework:
Next.js is more versatile and flexible. If your project might dramatically change or has the potential to grow beyond its current spec, you should go with Next.js. Also Next.js is used by big companies much more often than Gatsby. With Next.js you can do all that you can do with Gatsby and much more.
Gatsby, in turn, makes it easier to get up and running quicker and achieve more with less coding. If you want to build something that is unlikely to diverge much from the current spec, you can go with Gatsby.
More From Blog