DEV Community

Cover image for When to pick Gatsby, Next.Js or Create React App
Alexandru-Dan Pop
Alexandru-Dan Pop

Posted on • Updated on • Originally published at blog.alexandrudanpop.dev

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

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
  • transpiling from the latest JS or TS to ES5
  • HMR
  • and lots of other project particular needs

When we start a new project using React, we are confronted with this decision. Choosing between CRA, Gatsby or Next.js is a critical decision with a lot of impact.
image of doors

I'm going to get into a lot of details on when to choose between those three React frameworks / tools. So please smash the ❤️ & 🦄 buttons, and 🔖 if you don't have the time to read this article now.

Create React App (CRA)

Considering all the other innovations in Javascript toolchains, for a pure SPA the best modern alternative to CRA is Vite.

Useful for business applications, dashboards and internal web apps. Everything that lives inside a Login wall.

Those business applications could be:

  • manage & view internal data
  • dashboards
  • analytics
  • configurations & forms
  • running internal workflows, etc.

SEO will not be a concern for those kind of applications.

CRA is awesome for those kind off applications, because:
✅ The official SPA tool for React apps
✅ Zero-Configuration
✅ Full CSR (client side rendering) is great & easy to learn
✅ Server & client code completely decoupled
✅ No constraints from external framework
✅ Ease of deployment as the build results in static files

It also has its downsides:
⛔️ Can end up with a very heavy / fat client application if you are not careful
⛔️ Manual setup for routing, state management, code splitting, style approach
⛔️ you might need to eject to modify configs (webpack, jest, etc)
⛔️ Can't use it for public websites that need SEO
⛔️ CSR apps will generally have worst initial load performance

Important to note - this is not a React Framework as Gatsby and Next.js. It is - as stated on their website:

an officially supported way to create single-page React applications.

Now depending for who you are working, having the official method of building apps with React might be preffered - as it leads to lower risks of not having this method supported in the future.

For all tools we use we need to consider some risks. One of those risks and a pretty big one is if the companies who maintain the tools no longer support them.

Gatsby

Gatsby is not just a static site generator - it is a Progressive Web App Generator 💪. Its use cases are completely different than CRA. With Gatsby we build public-facing apps that are content-heavy, need top-notch SEO, and blazing fast performance. The requirement is that this content doesn't change that often - maybe it changes daily, weekly, or every couple of hours. This can range from your personal website, blog to documentation websites (fun fact reactjs.org is using Gatsby) or even e-commerce. Gatsby allows you to fetch all the relevant data via GraphQL at build time to create your static web app. Gatsby is a very good candidate for JAMstack applications.

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

The benefits of using Gatsby are:
✅ Performance due to static site generation
✅ SEO
✅ 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:
⛔️ More complex to use than CRA
⛔️ 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
⛔️ Might be vendor locked in the future if you will need some of their paid features

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

Everything highly dynamic and public-facing will benefit from Next.js. Those will be the applications that face a large public, with content that can change like every second. Those applications need to have good SEO.

Note: Next.js adds a server component to your stack. This is where you can do nice things as load all the data a user needs in the server, then using SSR to build the React components into HTML.

For example: I am a user logged in into a news feed website. This website does create a custom feed for each of our users. If you are using Gatsby or Create React App, you would load the user an empty page, then do an HTTP call to fetch the news feed data. With Next, you can do the fetching server-side, and build a full HTML feed from our React components (SSR).

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

Benefits of Next.js:
✅ Pre-Rendering Server-Side
✅ SEO
✅ Zero-Configuration
✅ Dealing with public-facing highly dynamic content
✅ Can also do SSG like Gatsby
✅ Looks like a one-size-fits all
✅ Can also build WebApis with it

Downsides:
⛔️ More complex to use than CRA
⛔️ SSR adds extra complexity
⛔️ You are invested in an opinionated framework
⛔️ Scaling is dependent on server infrastructure
⛔️ No plugin ecosystem
⛔️ Might be vendor locked in the future if you will need some of their paid features

Conclusions

We need to analyze what applications we want to build in order to choose correctly between CRA, Gatsby, or Next.js, as they are very different tools with different purposes.

If we understand the project needs, picking between those three is easy.

Top comments (6)

Collapse
 
maxdevjs profile image
maxdevjs

Thank you, this helps to make things clear!

By the way, +1 for Svelte :)

Collapse
 
stancobridge profile image
Okechukwu Somtochukwu

thanks this is wonderful

Collapse
 
timocelik profile image
Timo Celik

Cool article!

Collapse
 
pfitch45 profile image
pfitch45

Thank you for this article; I found it helpful.

Collapse
 
annietaylorchen profile image
Annie Taylor Chen

Wonderful discussion... those are things I also constantly think about haha. What about Svelte? Not popular or even mature enough to be considered?

Collapse
 
alexandrudanpop profile image
Alexandru-Dan Pop

Thanks! Well this is only on the React side, if we already have the decision to go with React for a certain project.

I do consider Svelte of course, but I'm currently still learning it - so haven't yet got the chance to use it on a real-world project.

Have also writtern about it here: