Comparing Next.js and Gatsby, how should we choose?

When deciding between Gatsby and Next, how do you determine which framework is best? Let's explore the main difference between the two. We will end with some questions and ask ourselves to make the best choice.

Let's first take a look at what it's like to start a website with Gatsby and Next.js.

1. Getting Started

Gatsby

In addition to comprehensive documentation, Gatsby's website also includes a mini tutorial to show new users that building and deploying a Gatsby site takes only a few simple steps. Developers can use Gatsby CLI to launch a basic site, or choose a pre-designed template from Gatsby's launch site library. Starter templates allow users to quickly create a beautiful and useful blog without worrying about the design.

Although getting started is easy, customization may involve some learning curve. Gatsby relies heavily on GraphQL for page routing, access to API information, and use of plugins (we will discuss in detail later). If you have never used GraphQL before, it is worth taking a quick tutorial to learn the basics.

Next

Starting to use the Next application is as easy as typing commands in the terminal. Next’s CLI tool create-next-app create-react-app , allowing you to launch a complete application that includes additional features such as image optimization and page routing as a set of customizable default values. From here on, a basic understanding of React is necessary to build and customize the Next site.

The Next.js website provides comprehensive documentation with detailed information on building Next applications using React or TypeScript. They even provide free "Getting Started" tutorials to help new users complete the first step. You can also find examples of how to use Next with many other popular tools, libraries, and languages on their GitHub page.

2. SEO

The SEO effect of React applications built without frameworks like Gatsby or Next is notoriously poor. They use client-side rendering (CSR) to render the page; when the browser receives a page request, it passes HTML, CSS, and script tags to the browser. The script tag contains the instructions your browser needs to build all the React content on your website. In order to index your website correctly and be found by search engines, web crawlers need to be able to read the content before your website is running. However, most web crawlers do not run this browser script when crawling, so they cannot get all the information about the content on your page in time to index it.

Gatsby and Next solve this problem by handling page rendering. Both provide web crawlers with the entire content of your website before the web page runs in the browser, making your website appear in Google search results.

Let's talk about how each framework helps SEO.

Gatsby

Gatsby uses static site generation (SSG) to pre-render pages. Before deploying a website built with Gatsby, your code has to go through a construction process. Before receiving a browser request, the complete HTML website is pre-built. When a user visits a page built in Gatsby, Gatsby will find the HTML file of the page in the build folder and repopulate the page to make it a complete React application.

After making any updates to your website, you need to run the build process again so that the CDN has the latest updates. Therefore, Gatsby is more suitable for websites that do not change much during the day, such as landing pages, company websites, and blogs.

Next

Next.js can be used for static site generation, but it is optimized for pure server-side rendering. Server-side rendering (SSR) has been done in languages such as PHP and .NET for many years, but Next allows us to use JavaScript and Node.js as runtime servers to take advantage of SSR.

The main difference with Next is that it uses dynamic rendering (a peculiar way of saying "the page is built when the browser requests it"). All the information of your website (routes, page data, etc.) exists on the Node.js server. When you navigate to the Next.js page from the browser, the server will look for the page you requested. It is at this time that the page is created, and then the data is sent to the browser for the user to view. Therefore, dynamic presentation is very suitable for websites that are updated multiple times a day, such as e-commerce stores and online forums.

3. Obtaining and processing data

The biggest difference in the methods used to obtain data will depend on whether your application is statically generated or server-side rendered. Since statically generated websites have pre-built pages before they are rendered in the browser, they will get any required data when they are built. In contrast, a website generated on the server side obtains the required data at runtime.

Gatsby

Gatsby doesn't care which API your data comes from, but it will fetch and retrieve any data it returns and provide it to you as a GraphQL API. However, in order to access the data, you need to write GraphQL queries in the code.

The great thing about GraphQL is that it allows access to very specific data-for example, the names of all blog posts with a specific tag. This is to improve performance by reducing network usage. However, if you are building a SSG Gatsby website, all data is obtained at build time and has no impact on runtime performance.

Next

Next is flexible in obtaining data, allowing users to decide which method they want to use. When it comes to data acquisition, the only required part is to use one of its life cycle methods ( getServerSideProps to enable SSR or 06131c7fba8bd5 for SSG) to obtain the initial getStaticProps

If you plan to acquire a large amount of data, SSR is a better choice. A large amount of data may cause slow building of SSG applications. However, the server used in SSR is much more powerful and can perform these complex operations quickly and repeatedly.

4. Plugins, extensions and ecosystem

One reason Gatsby and Next are so popular is that they can be easily integrated with other tools and languages you are already familiar with. Through their partner ecosystem, these frameworks allow you to further extend the functionality of your application without unexpected side effects.

Gatsby

Unless you are using a launcher, most additional features are not included in your Gatsby file. However, Gatsby is very similar to Wordpress because it has a huge plugin ecosystem that allows you to easily use any features you want to add to enhance your application. Compressing pictures, adding a TypeScript compiler, and using pre-built themes are all examples of features available in Gatsby's plugin library.

Through the plug-in library, Gatsby has the largest partner ecosystem of all frameworks. Plugins can be used for most of the tools and libraries you already use, making the integration of Gatsby with other tools very simple. If you want to customize features or themes, you can also create a custom theme or plugin and host it in the plugin library.

Next

Features that have traditionally been manually added to React, such as page routing, image optimization, and code splitting, are all default features out of the box and can be easily customized in the Next.js configuration file.

Next was created by the popular deployment and collaboration platform Vercel. Therefore, Next benefits from Vercel's incredible partner tool ecosystem. Of course, the next step is to optimize for use with Vercel, but it can also be used with other tools and libraries that you already use for hosting, styling, and building, so you can easily incorporate it into your technology stack.

5. Telescopic

Will you be the only one who has access to your application, or will someone else maintain it? Do you expect a lot of user activity every day? The choice between Gatsby and Next.js will depend on how big you expect to grow your application in the future.

Gatsby

Gatsby is best for personal blogs and smaller static sites. When applications become too large, they may become very slow or impossible to build during the build process. On their extended issue documentation page, Gatsby pointed out that “large” usually refers to applications with more than 100,000 pages, or situations where large amounts of data are obtained from the GraphQL API.

Next

Next is lightweight and easy to use for hobbyists, but it is also powerful enough to be extended for enterprise use. Netflix, Hulu, Nike and other large enterprises with tens of thousands of website visits every day are using the Next application hosted by Vercel. When building large enterprise applications, Next.js should be used.

6. Hosting

Now that you have set up your application, it is time to host it somewhere for people to use and interact. Let's talk about where Gatsby and Next.js applications can be hosted.

Gatsby

During the build process, Gatsby generates static assets that can be used in the browser and hosted anywhere. You can flexibly decide which hosting platform is best for you: Netlify, Firebase, Azure, AWS, Vercel or whatever platform you want.

Next

Similar to Gatsby, Next's SSG option generates static assets that can be hosted anywhere. However, if you choose the SSR route, you must find a Node.js server to host it. Vercel-the creator of Next.js-is of course optimized for this. Most of your favorite hosting platforms also support SSR (Firebase, Netlify, AWS), but when you learn for the first time, make sure to use tutorials specifically for SSR hosting.

7. Choose between Gatsby and Next

The decision between these two frameworks boils down to the following questions:

How often does my page need to be updated? Through dynamic routing, Next is optimized for applications that require frequent page updates, such as stores or applications that listen to messages. In contrast, a static site needs to be rebuilt every time it is updated. If you are creating a blog or website whose pages do not change frequently, you can use Gatsby.

I building a blog or a static site? Gatsby has long been considered an excellent tool for personal blogs and small static websites. Therefore, it has a library of extension plugins with themes that can provide you with the features you need in your blog so that you don't have to build them from scratch. If you are building a small website or blog, but don't want to build every feature from scratch, Gatsby is a good choice for you.

the application 16131c7fba8dd5 need to be extended? well known that when Gatsby applications become too large or acquire large amounts of data, they will encounter errors and slow builds. If your application will have more than 100K pages, or need to obtain a large amount of data (such as a store containing many product variants), Next.js is your best choice.

Finish

For optimizing large-scale, enterprise-level applications or websites with a large number of updates, you can choose Next.js. For small or static websites and blogs, Gatsby is the best choice. However, no matter which you choose, you can expect an optimized React application that has out-of-the-box features that can improve performance, integrate the most popular third-party tools, and improve search engine optimization.