Next.js vs Gatsby vs create-react-app

Next.js, Gatsby and create-react-app are all ways to start a React project, but they give you very different applications. create-react-app gives you a client-rendered single page app. Gatsby generates a static site at build time. Next.js renders pages on a server, on every request.

create-react-app does not help you generate a server-side-rendered app easily. Anything that comes with it (SEO, speed…) is only provided by tools like Next.js and Gatsby.

What does create-react-app give you?

With create-react-app, the browser downloads an almost empty HTML page plus your JavaScript bundle. React then renders everything on the client.

This is fine for many apps. But until the JavaScript loads and runs, the visitor sees nothing. Search engines and social previews get that same empty page, which hurts content sites.

When is Next.js better than Gatsby?

They can both help with server-side rendering, but in 2 different ways.

The end result using Gatsby is a static site generator, without a server. You build the site, and then you deploy the result of the build process statically on Netlify or another static hosting site.

Every page is generated once, at build time, as plain HTML. Serving it is fast and cheap, and there’s no server to maintain or crash. The tradeoff: when the content changes, you rebuild and redeploy the whole site.

Next.js provides a backend that can server side render a response to request, allowing you to create a dynamic website, which means you will deploy it on a platform that can run Node.js.

That server render happens on every request, so the page can show fresh data every time. Think of a page showing user-specific content, or data that changes often. A static build can’t do that.

Next.js can generate a static site too, but I would not say it’s its main use case.

If my goal was to build a static site, I’d have a hard time choosing and perhaps Gatsby has a better ecosystem of plugins, including many for blogging in particular.

Gatsby is also heavily based on GraphQL, something you might really like or dislike depending on your opinions and needs. All the data in a Gatsby site (markdown files, images, data from a CMS) flows through a GraphQL layer you query at build time. If you already know GraphQL it feels natural. If you don’t, it’s one more thing to learn before you’re productive.

When is create-react-app enough?

If you’re building an app that lives behind a login, like a dashboard or an internal tool, SEO does not matter and nobody sees the first paint but your users. In that case create-react-app is a perfectly good choice, and it’s the simplest of the three.