Next.js vs. Gatsby vs. Create React App
Jonathan Wong / November 12, 2019
3 min read • ––– views
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 the React framework that evolves with your product.
- Static Sites – Blazing-fast JAMstack websites.
- Server Side Rendering – Great for SEO and load performance.
- Pre-Rendering – Best of both worlds. Blazing-fast website + scale traffic effortlessly.
Next is unique among front-end and JAMstack frameworks because it seamlessly allows developers to grow from static sites to server-rendered sites as requirements change. It's also rapidly growing in popularity.
- 350k+ Next.js devs (30% of all React devs)
- 60+ Alexa top 10k sites built using Next.js
- Over 35,000 production sites
- 300k weekly NPM downloads
- Used by companies like Nike, Uber, Hulu, Twitch, and GitHub
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)
- ⛔️ Server-rendering adds complexity
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.