🌍 All
About us
Digitalization
News
Startups
Development
Design
Gatsby.js and Next.js – which one to use?
Marcin Wojtczak
Apr 22, 2020・5 min read
Table of Content
What is Gatsby.js?
What is Next.js?
Who is using Gatsby and Next?
Gatsby and Next: The similarities
Gatsby and Next: the differences
Gatsby or Next: Which one to use?
So you want to create a new website for your company or a full-blown application, and you are looking for the best tool for the job? If you're a JavaScript Developer or are familiar with the development, these two toolkits will have you covered! Before we go into a more detailed comparison, I'd like to introduce you to the basic concepts behind these solutions. If you're an experienced developer and already know the basics, you can go ahead and skip the next two paragraphs.
What is Gatsby.js?
As per their homepage: "Gatsby is a free and open-source framework based on React that helps developers build blazing-fast websites and apps."
Its primary focus is to enable high performance by generating static HTML pages. If we combine this with built-in PWA support, getting only the critical assets on a first load and prefetching assets for subsequent pages, we get almost instant loading times. It also has an entire ecosystem of plugins and ready-to-use themes.
Gatsby is somewhat opinionated on how you should provide data for your application or website. Despite being able to handle different data sources like headless CMS, SaaS services, API, or even markdown files, you still need to use GraphQL to put this data into your React app. For a more in-depth feature list, please refer to Gatsby.js documentation. For more insights, you can also check out a great Gatsby.js use case by our React Developer, Mateusz Wójcik.
What is Next.js?
In contrast to Gatsby, performance (though it's still great) isn't the main focus of the Next.js framework. Its goal is to provide an opinionated toolset with which developers can create Server Side Rendered applications or websites with close to no configuration. You can read about all the functionalities in more detail in their documentation.
Next.js gives you routing, CSS-in-JS styling, folder structure, code splitting, data fetching of the box. The best thing is that you can easily customize or even wholly replace each of these elements without a hassle. You can find a multitude of examples of how to integrate Next.js with other tools.
Who is using Gatsby and Next?
You might be wondering which big companies are using those frameworks. It is an excellent question, and the answer is... a lot of them! Here are some examples:
Gatsby and Next: The similarities
Before we talk about the differences, let's see what these frameworks have in common. First of all, no matter which one you choose, you will get a performant website or application, although this outcome is achieved by different means. Additionally, Next.js and Gatsby.js provide good SEO out of the box, since both deliver already rendered HTML (at least on the initial render).
As mentioned in previous paragraphs, we can expect exceptional Developer Experience from either of these toolsets. Additionally, both support hot reloading out of the box. Depending on your needs, this can be a huge advantage over just using Create React App in which you need to handle most of the configuration and architectural decisions by yourself. Because both frameworks aren't that complex, the learning curve is quite small, and besides, they have excellent documentation and tutorials.
Other handy features that Gatsby.js and Next.js handle similarly are:
caching,
code splitting,
prefetching,
routing.
Gatsby and Next: the differences
OK, so if both frameworks are so similar, then what are the differences between them? There are a few, but the most important ones are how the pages are rendered and how they handle data.
Page rendering
As mentioned before, Next.js renders pages via the usage of Server Side Rendering. Because of that, to run applications made in that tool, we need to use a Node.js server, which will handle the dynamic rendering of HTML upon each request. It all happens in the runtime. After the initial HTML is loaded, Next.js handles hydration so that the application can become interactive.
Gatsby.js, on the other hand, generates HTML during the build time, which is why it is widely considered as a static site generator. It is not entirely correct since it can be used as PWA and handle API calls easily. The main benefit of this approach is that we don't need any Node server to handle rendering.
After the build, we already have HTML/CSS/JS files, which we can host wherever we want. Although it sounds good, this approach also comes with some drawbacks, especially if our website has a lot of subpages. After each data update, a rebuild should be triggered, which will re-generate all the HTML files, and if we have hundreds of them, this process can take quite some time.
Data handling
Both frameworks have taken a very different approach to this topic. Gatsby.js tells you exactly how you should handle data fetching (GraphQL), while Next.js leaves that aspect entirely to the developer's decision. Because of Gatsby's approach, we will focus on explaining it, since this is what you need to use.
GraphQL enables you to fetch only the data that you need for each page. On the other hand, it ties you to the technology that you might not want to use. Gatsby.js also provides a variety of plugins via which you can connect to a set of different data sources. During the build process, data is fetched and stored in JSON files for later usage. It can also be updated when needed. More extensive docs on that process can be found on the Gatsby.js page.
Gatsby or Next: Which one to use?
For small and mid-sized projects, you can't go wrong with either of those. You have to take the differences into account, especially in terms of the data fetching approach and figure out which one suits your taste more. We recommend using Gatsby if you're building a website based on a JAM stack, personal blog, or just a simple static website. If you don't want to use GraphQL and you're building a more dynamic website or a hybrid app (like Twitter or Reddit), Next.js might be a better choice, mainly because of the runtime SSR.
Things get more complicated if we talk about a large website with hundreds and thousands of subpages and content being added by multiple users. In that case, the clear winner is Next.js because of its approach to SSR. As mentioned before, Gatsby.js generates every page on each rebuild. It can get up to even 20 minutes for a large collection of content. Since users would like to see their added content in real-time and not have to wait minutes or even hours in extreme situations, static site rendering is not a good tool for this job.
As you can see, the answer to our main question is not that simple, unless you're building a big application or website with 500+ pages. As usual, you should always try to pick the right tool for the job, based on its features and your personal preferences. We hope that our guide will help you make this decision and provide you with enough knowledge of the pros and cons of both frameworks, so you'll be happy with whatever you end up using. Would you like to know more? Get in touch at hello@start-up.house
You may also like...
Understanding Software Engineering and Architecture: A Guide for Everyone
This guide provides an insightful overview of software engineering and architecture, essential for anyone interested in technology and development. Covering fundamental concepts, methodologies, and best practices, it equips readers with practical knowledge to navigate the complexities of software systems. Whether you're a beginner or a seasoned professional, understanding these disciplines is vital for building reliable and scalable software solutions.
Marek Pałys
Jan 16, 2024・11 min read
Exploring Alternatives to Nearshore Software Development Outsourcing: A Practical Guide
Choosing the right strategy for software development is essential. While nearshore outsourcing has its benefits, exploring alternatives such as offshore teams, in-house development, and freelance developers can provide businesses with tailored solutions. This guide offers practical insights into these options, helping organizations make informed decisions that align with their unique needs and strategic goals.
Marek Majdak
Jan 30, 2024・13 min read
A Beginner's Guide to the Ember.js Web Framework: What You Need to Know
Ember.js is a powerful framework designed for building scalable web applications. This guide covers the core concepts, from installation to implementing components and routes, helping beginners quickly get started and build their first Ember.js app.
Marek Majdak
May 21, 2024・11 min read
Let's build
something together