Alexandru-Dan Pop

Posted on Jul 13, 2020 Edited on Sep 30 Originally published at alexandrudanpop.dev

When to pick Gatsby, Next.Js or Create React App

This comparison was written in 2020. Create React App is now deprecated for new apps.

React is a a library for building user interfaces. It is helping developers render beatiful UIs and encapsulate stateful logic in components or hooks.

It doesn't take responsibility for anything else. So as developers we still have a long way to go. To design and develop fully featured frontend application, we need toolchains for various tasks:

local development
production builds
opimizations
modules loading & bundling
compiling code for the browsers we support
HMR
and lots of other project particular needs

Choosing a React toolchain depends on what we need to build. Here is how I approached that choice in 2020.

Create React App (CRA)

CRA was a common starting point for client-rendered apps. For a new project, check the current React setup options.

Business dashboards and internal tools can work well as SPAs. Public pages may benefit from pre-rendering for initial loading and discoverability.

Gatsby

Gatsby can pre-render content-heavy sites such as blogs, documentation and portfolios. Its data layer and plugins help pull content into the build.

You can check out what apps are built with Gatsby at their showcase page.

The benefits of using Gatsby are:
✅ Pre-rendered HTML
✅ Optimizations at built time
✅ Easily deploy to CDN - excellent cheap scale-out
✅ You can create a PWA with offline capabilities
✅ Rich plugin ecosystem

It also has its downsides:
⛔️ You will need GraphQL & Node.Js knowledge
⛔️ Configuration heavy
⛔️ You are invested in an opinionated framework
⛔️ Build time will increase the more content you have

The ecosystem plugins are also a reason to choose Gatsby. Wanna build a PWA from some CMS - there will probably be a plugin for it. You want google analytics, image compression & pre-loading - there's a plugin for that. And so on, it's a very rich ecosystem.

Next.js

Next.js supports static and server rendering. For a personalized feed, for example, you can fetch data on the server and send the user rendered HTML.

You can check out what apps are built with Next.js at their showcase page.

Benefits of Next.js:
✅ Pre-Rendering Server-Side
✅ Dealing with public-facing highly dynamic content
✅ Can also do SSG like Gatsby
✅ Can also build WebApis with it

Downsides:
⛔️ SSR adds extra complexity
⛔️ You are invested in an opinionated framework
⛔️ Scaling is dependent on server infrastructure