Next.js Vs. Gatsby Vs. Create React App

Next.js Trend

It's never been a better time to learn React. If you're just getting started, you might have heard about these three options:

However, it's not exactly clear when or why you would choose one over the other. This post will highlight the key similarities and differences between the three solutions.

Next.js

Next.js is a framework for building server-rendered React applications. Server-rendering provides a variety of benefits, including faster page load times and improved SEO.

Building server-side rendering yourself is difficult, which is one of the many reasons people turn to Next.js. If you had previously heard of Next but haven't checked it out in a while, I would highly recommend revisiting it.

Pros

  • ✅ Server-side rendering out of the box
  • ✅ Support for full applications, as well as static sites
  • ✅ Built-in TypeScript support
  • ✅ Incredible developer experience

Cons

  • ⛔️ Framework-specific knowledge (_app.js, _document.js)
  • ⛔️ No plugin system (yet)
  • ⛔️ Added complexity with server-rendering

Gatsby

The key difference between Next.js and Gatsby is that Gatsby doesn't use a server. While Gatsby's main use case is for static sites, it can also re-hydrate into a fully-functional React application. Many other Next.js vs. Gatsby comparisons miss the fact that Next.js can also be used as a static site generator.

Gatsby comes bundled with GraphQL for data fetching. Here's a short example.

import React from 'react';
import {graphql} from 'gatsby';

const HomePage = ({data}) => {
    return <div>{data.site.siteMetadata.description}</div>;
};

export const query = graphql`
    query HomePageQuery {
        site {
            siteMetadata {
                description
            }
        }
    }
`;

export default HomePage;

You can use Gatsby without GraphQL if you absolutely must/want, but it's one of the key features it promotes.

Pros

  • ✅ Robust plugin library
  • ✅ GraphQL integration
  • ✅ Well-written documentation & tutorials

Cons

  • ⛔️ GraphQL knowledge potentially needed
  • ⛔️ Potentially large build times (e.g. lots of images/fetches)

Create React App

CRA helps you get started building React apps immediately with client-side rendering (CSR). There's much less to digest and understand. Unfortunately, that also means there's less you get for free as you scale your application.

Pros

  • ✅ Easiest to learn (no extra framework)
  • ✅ Created & maintained by React team
  • ✅ Built-in TypeScript support

Cons

  • ⛔️ No server-side rendering
  • ⛔️ No code-splitting out of the box (can be configured)
  • ⛔️ Requires client-side routing library (e.g. React Router)
  • ⛔️ "Ejecting" for custom use cases can add complexity

Conclusion

Still not sure which one to choose? I would highly recommend reading Rendering on the Web for a deep-dive on where your rendering logic should live.

Rendering on the Web


Looking to Learn React & Next.js? 🏆

I've launched a new video course Mastering Next.js containing 55 jam-packed lessons. Pre-order now and get 50% off!

Mastering Next.js