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
Conclusions
Start with your rendering, data and deployment needs. No tool guarantees good performance or SEO on its own.