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.
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)
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.