TABLE OF CONTENTS

Next JS vs Gatsby JS – Which One To Choose?

Chris Lojniewski
By Chris Lojniewski
gatsbyvsnextjs

Not in a mood for reading? No worries! Watch our Next.js vs Gatsby.js comparison video!

youtube video about the differences betweeb gatsby vs nextjs

Intro

Server-side rendering (SSR) for React apps gave birth to many great features, possibilities, and tools.

However, its brother – Static Site Generation (SSG) enabled us to easily build static sites (superfast, seo-friendly, lightweight), and we can gladly observe one of the hottest competitions at the moment, between two of the most popular SSG technologies: Gatsby.js vs Next.js.

SSG became extremely popular, mostly because of all the blessings it gives to web app development, user experience improvements, and the ability to support digital marketing efforts more efficiently.

Meanwhile, we’ve also been introduced to Jamstack – a web development architecture that makes scaling up much easier (also thanks to its static site nature) and both Gatsby.js and Next.js are in the middle of the Jamstack world.

Both are great to build static sites, both are growing up quickly, both are loved by developers, and unconsciously by users.

The question remains: which one is better to work with? And, of course, in which case?

Gatsby vs Next.js – best of Jamstack

If you want to build a React powered and indexed by Google web application you may want to choose between Gatsby JS and Next JS which are the most popular tools to do this job.

Of course, choosing the right tech stack depends on your project requirements, but let’s assume you want to build a Jamstack static site that needs to be:

  • Indexed by Google, because you want to grow your organic traffic,
  • Performant, because you want to provide the best user experience possible,
  • Written in React, because of its component-based approach for building user interfaces,
  • Integrated with a headless CMS because you need to be able to change content frequently,
  • PWA (progressive web app) ready.

Let’s see how both can help us achieve the desired result.

Should you use Jamstack?

As you can see, Jamstack is great to build super-fast ans SEO-friendly websites, but you may still hesitate if that’s a good choice in your specific case.

To help you make a decision, we’ve made a short video on the best and the worst use cases:

when to use jamstack?

Similarities between Gatsby.js and Next.js

As they both are great to build Jamstack websites, let’s have a look at what makes them similar.

Table with Similarities between Nextjs and gatsbyjs

Performant and SEO-friendly websites.

Thanks to static side generator (SSG) and server side rendering (SSR) in both Gatsby and Next.js, your web app can be indexed in Google much easier.

This enables you to attract many more visitors through organic search traffic.

To rank higher:

  • your content needs to be well written and SEO optimized,
  • you need to provide a great user experience for your visitors,
  • you need to take care of website speed metrics.

And this is where performance really matters.

Gatsby is a perfect tool for achieving performance results, as it is generating static HTML for final users (and in fact also search engines).

But not to leave the competitor behind, exactly the same thing is possible with NextJS.

So in case of performance, both allow us to achieve truly outstanding results.

React behind

An obvious similarity in the competition of Gatsby vs Next.js is that both are using React JS so you can benefit from all of the cool stuff like:

  • Component-based approach,
  • a lot of UI kits available that can shorten the time for development,
  • wide access to developers,
  • great DX – developer experience (devs like to work with React),
  • and much more.

The question arises:

why do I even need GatsbyJS or NextJS? isn’t React good enough?

To put it very simple, React by itself works only on the client-side (your browser) and cannot be server-side rendered. In other words, it does not provide all the super speed and SEO blessings at the level of Gatsby or Next.

P.S. If you want to check how React can impact your business, have a look at our 2020 React report.

Best of Jamstack

Both Gatsby and Next.js are following the Jamstack architecture we mentioned before.

By reading the official source, you can learn that Jamstack allows you to get:

  • Much better performance,
  • higher security,
  • cheaper na easier scaling,
  • better developer experience.

Simplifying web development

Another similarity in the competition of Gatsby vs Next.js is that both tools are providing a boilerplate – a fixed project structure that needs to be followed during the development.

Having a boilerplate has many great advantages. For example:

  • Better documentation,
  • better tooling,
  • easier setup,
  • better development experience,
  • easier project handover.

Thanks to that, both Gatsby and Next can significantly simplify and speed up the React app/website development cycle.

A choice of big players

Both Gatsby and Next.js are used by big players who care about technology and are future proof professionals.

Next.jsGatsby.js
Mobile version of Twitch,
Netflix Jobs website,
Hulu,
IGN,
TikTok,
InVision.
Airbnb Engineering,
Impossible Foods,
Braun Canda,
Figma,
SendGrid,
Nike.

Source: https://start-up.house/en/blog/articles/gatsby-or-next

Differences between Gatsby vs Next.js

Both Nextjs and Gatsbyjs are great to build super-fast and SEO friendly websites, and the decision about which one to choose is really a matter of your project requirements.

Let’s now have a look on differences, to help you map and decide which is best in your case.

Table with differences between nextjs and gatsbyjs

Static Site Generator vs Server Side Rendering (+SSG)

Gatsby JS is a static site generator (SSG), this is the only way it’s working.

Next.js initially was a server-side rendering tool, but since version 9.3 it also supports static site generation.

Data handling

In this case, Next.js is much more flexible, as he enables developers to decide themselves how to approach data fetching.

Gatsby, on the other hand, enables you to use GraphQL only. It gives a solid standard of handling data but for some small projects it can be an overkill.

Community

Jamstack websites took web development by storm. So did Gatsby.

Developers immediately picked it up and fell in love, as it was extremely pleasant to work with. On top of that, it also became one of the hottest technologies in 2019.

People behind Gatsby itself are also working hard to engage their community. They run an interesting agency program to support companies that are doing Jamstack projects powered with Gatsby.

More than that, if you look at the Gatsby showcase, it is very big (1101 today) in comparison with the Next showcase (around 100 today).

Plugins, themes, extensions, integrations

Gatsby.js enables you to use many plug-ins, which can make your life a bit easier.

On the other hand, Next.js is encouraging you to build everything by yourself, which gives you pretty much unlimited possibilities and freedom in the execution. It means Next is better for ultra customized projects.

Gatsby.js vs Next.js Face-to-face comparison

Let’s put it all now in a bigger picture.

Gatsby.js vs Next.js face-to-face comparison

Real-world use cases of Gatsby.js

gatsby logo

The great source of Gatsby website examples is Gatsby Showcase but to have a full picture of Gatsby features let me present you a few other examples.

Corporate websites (companies, service websites, marketing info sites)

Corporate websites are like digital business cards. They need to work superfast and are not updated very frequently. And that’s a perfect case for a static site.

These kinds of websites are displaying the same information for anyone visiting the site (no login & register functionalities, just plain information).

So, a corporate website requirements will be:

  • Great user experience (preloading)
  • Great performance (Google Page Speed)
  • Full SEO support (static HTML output)
  • Integration with (headless) CMS

As Gatsby static site generator performance is better than Next JS server side rendering together with SSG, Gatsby is the winner there.

Corporate websites should be managed by CMS and this is also why Gatsby wins over Next, as it offers support for plugins to get content from almost all CMSs, databases, REST APIs, and GraphQL.

In summary, Gatsby wins because of:

  • Better performance than Next JS
  • Shorter development time with a wide range of Gatsby plugins, starters, themes and integrations with headless CMSes

Examples of super fast corporate websites built in Gatsby:

Digital Ocean

an image of main page of Digital Ocean gatsby website

AutoloadIT

an image of main page of Autoloadit Gatsby website

JIMDO

an image of main page of Jimdo Gatsby website

Public pages for any B2B or SaaS product websites

The main goal of B2B and SaaS websites is to convert visitors into customers.

This is where speed and user experience are both extremely important factors.

When you have calculated the cost of your lead you are now able to estimate and calculate ROI of a faster website (with lower bounce rate and higher organic search traffic).

B2B and SaaS product website requirements:

  • Great User Experience & Performance
  • Full SEO support
  • Integrations with user analytics, and automation marketing tools
  • Integrations with CRM

And once again, the winner here is Gatsby.js, mostly because of:

  • Better performance than Next JS
  • Shorter development time with a wide range of Gatsby plugins, starters, themes and integrations with headless CMSes

Examples of B2B and SaaS product pages built with Gatsby.js:

SendGrid

an image of main page of SendGrid Gatsby website

HASURA

an image of main page of Hasura Gatsby website

JIMDO

an image of main page of Jimdo Gatsby website

Individuals’ blog websites

As an individual you want to have a blog that is:

  • Cheap to host
  • Easy to Edit
  • Advanced in technologies

Any static generated website is cheap to host, as you can host it for free using:

  • GitHub Pages
  • Netlify
  • Vercel

One of the most important things in having a blog is to be extremely SEO efficient, and obviously, it’s great to save cost on hosting, and this is why Gatsby is a winner here.

Examples of Individuals blog websites:

Kent C. Dodds

an image of main page of Kent Dodds Gatsby website

Most Recommended Books

an image of main page of Most recommended books Gatsby website

Jacob D. Castro

an image of main page of Jacob Castro Gatsby website

Digital Agency Websites

Agency websites need to shine and prove that you (as an agency) put a lot of attention in every project, also internal, like your own company website.

So, most important requirements for a Digital Agency website could be:

  • Advanced technologically
  • Super performant
  • Covering all aspects of Usability, Accessibility and SEO

Thanks to Gatsby, you are able to present your website’s performance, SEO efficiency, as well as a pleasant user experience, and this is why Gatsby is a winner in this case.

Examples of websites for agencies:

Roboto Studio

an image of main page of Roboto Gatsby website

madewithlove

an image of main page of Made with love Gatsby website

Third And Grove

an image of main page of Thirdandlove Gatsby website

Small eCommerce Websites

Gatsby works really well as a tool to build customized and static storefront for headless eCommerce.

It’s often integrated with Shopify, as it doesn’t give too many possibilities for customization.

In this scenario Gatsby is a storefront where visitors can browse the products and add them to the cart in a blink of an eye.

However, the checkout page is served by traditional eCommerce platforms like Shopify, and that makes Gatsby a great partner for Shopify.

Examples of small e-commerce websites:

Curology

an image of main page of Curology Gatsby website

OTAKUCHAN

an image of main page of Otakuchan Gatsby website

Nike

an image of main page of Nike Gatsby website

Best use cases for Next JS

next.js logo

Next.js also has its own showcase, and we highly recommend using it as a source of inspiration.

Generally, NextJS is a better idea to choose when SSR becomes more important than SSG.

This is when:

  • Content is frequently updated or needs to be always up-to-date
  • You have a large, multi-user site like TikTok (real-time publishing)
  • You can’t afford to rebuild the whole website (f.e. big eCommerce), as it would take ages to do it with SSG.

Large multi-user websites

For large multi-user platforms and the amount of data generated by its users in real-time, it’s not a surprise that the crucial and absolutely most important thing is performance.

On top of that, “real-time” means rendering needs to be done constantly, with the newest data available.

This could be quite a challenge for Gatsby. And this is why in case of large multi-user websites, Next.js is the ultimate winner.

Examples of Large multi-user websites:

TikTok

an image of main page of Tiktok Nextjs website

Hashnode

an image of main page of hashnode Nextjs website

Twitch mobile

an image of main page of twitchmobile Nextjs website

Client-side rendered applications (SPA/MPA)

SPA is a web application or website that interacts with the web browser by dynamically rewriting the current web page with new data from the web server, instead of the default method of the browser loading entire new pages.

SPA is a perfect solution to build an exceptional and rich interaction between the user and your application.

Top Single Page Application requirements should be:

  • Super performant
  • Ability to support feature rich apps
  • Great user experience

The goal is faster transitions that make the website feel more like a native app.

Examples of SPAs built with Next.js:

hulu

an image of main page of hulu Nextjs website

Binance

an image of main page of binance Nextjs website

Ticket Master

an image of main page of Ticketmaster Nextjs website

Big eCommerce Websites

Conversion is crucial for eCommerce platforms, as the ultimately successful user path should end up with a sale.

Besides that, if a small change will come, it needs to be visible everywhere, therefore, the production of SSG pages would take ages in that case.

For Big eCommerce, the most important factors are:

  • Speed
  • Custom user experience
  • Ability to make frequent changes
  • Integrations with third-party systems like: PIM, marketing automation, ERP.

Examples of big e-commerce websites:

Deliveroo

an image of main page of deliveroo Nextjs website

JET

an image of main page of Jet Nextjs website

Ticket Swap

an image of main page of ticketswap Nextjs website

Web portals

The success of a web portal is mostly dependent on his performance, as a huge amount of data is constantly added in real-life time by it’s users (user generated content).

The other important factor for web portals is personalization and security.

Take a medical portal with a fragile health data of thousands of patients. You need to have something extremely safe and in many cases encoded & decoded in real time.

We could say that the most important factors for web portals are:

  • Super performant
  • Secure
  • Able to support custom features
  • Full support for real-time user generated content

And this is why Next.js is the winner in this case, as it would be incredibly hard to interact with users just by using static pages. Of course most of these functionalities you can achieve in Gatsby using third party services, but without them Next is a clear winner.

Examples of web portals:

Ticket Master

an image of main page of ticketmaster Nextjs website

Realtor

an image of main page of realtor Nextjs website

TV Publica

an image of main page of Tiktok Nextjs website

Gatsby vs Next.js – The verdict?

Obviously, the verdict between Gatsby vs Next.js is highly dependent on what you are aiming for.

If the goal is to have a super fast website that doesn’t need much updates, then Gatsby.js is a no-brainer here.

However, if you want to have a super fast and user-friendly page that needs constant updates, you should definitely consider Next.js.

Next.js vs React

There is also an alternative of using… just React, or in other words – Create-React-App, especially in comparison with Next.js.

We’ve made such comparison on the way: Next.js vs Create-React-App (CRA)

Still not sure which one suits you best?

comments

  • Carlo

    Posted on

    Great article, it was so detailed and weel written.
    Thank you !

  • Saurabh Jain

    Posted on

    Hi, I am building a multi usertype (vendors and customers) marketplace, and wanted to ask which of the nextjs or gatsby is good option?
    My requirement from SSR is getting the vendor profile metadata for SEO. The userprofile and features remain hidden. How would addition of new Vendors (their profile page and metadata) be handled if i use Gatsby.
    Also, there will be blog part which i want to integrate through headless CMS (wordpress).
    Please help me with the best stack to go forward. I am planning to build serverless backend with AWS lambda, appsync and cognito.
    Currently, i only have wordpress blog.

    • Chris Lojniewski

      Posted on

      Hey Saurabh,
      thanks for your comment.

      In my opinion Next JS will be better because of:
      – SSR / ISR
      – Easier support for User Accounts & Authorization features

      From our article, your marketplace would fit inside Big eCommerce Websites or Webportals – so our recommended uses cases for Next JS.

      Your listed tech stack looks great.
      I would suggest using TypeScript and Vercel.

      Hope that helps!

Leave a Reply