Next.js vs Gatsby vs React-Static vs CRA

Dear Dev.to community.
A couple weeks ago I started learning React and also introduced it at work as the goto frontend development framework/library.
I started out with the create-react-app cli and had no big limitations so far.
I'm now at the point where I hear about all the other cool stuff that tries to enhance react.

So my question is:
What's the main difference between all these frameworks and when/why would/should I use any of those?

Comments

[Guido Vizoso]

Hi!

What I recommend to anyone starting React is setting up your own development environment. That means installing and configuring Webpack, Babel, CSS preprocessors and everything you need to run your project.
It may sounds boring or useless, but the experience and understanding of these tools helps you decide in the future what tool is the right one for your project. CRA may be excellent for prototyping but Next is great for SEO and speed. It's all up to you!

Hope my answer helped!

[stereobooster]

I would recommend not to setup Webpack, Babel, CSS preprocessors. This is incidental complexity. You want to write and deliver website, right? All this has nothing to your initial goal. For example, you can take CRA and start to write website without spending time on webpack. Or you can take parcel and start to write website without spending time on webpack. Convention over configuration.

Back to original answer.

• You want to use Next.js if you want to do SSR e.g. you have highly dynamic content and there is no way to do it statically
• You want to use Gatsby if you have mostly static website, like blog. Drawback you need to understand GraphQL
• Create-react-app ideal starter for beginners, good defaults. But you will not be able to do SSR, you still can do prerendering with react-snap.
• You want to use react-static for static websites and you don't want to deal with GraphQL.

A bit more here dev.to/stereobooster/server-side-r...

[Ben Halpern]

I'm not super up on this ecosystem, but they all offer slightly different things.

I believe...

• create-react-app is a utility for generating the boilerplate for a frontend react app. It creates the html/css/js bundles.
• Gatsby and React-Static are both static site generators, but RS seems more classical and Gatsby seems like it's pushing the boundaries on what it means to be a static site generator. Gatsby is a venture-backed company so you can expect a different type of future in that ecosystem than the more purely community-driven projects.
• Nextjs is a Nodejs framework which will give you more server-side control. Eliminating certain constraints while keeping some of the same React coupling.

Hope that helps. I'm not a user of any of this stuff so I might be offbase.

[Gijo Varghese]

• Next.js - Server-side rendering, content will be pulled from DB or some APIs
• Gatsby - Static site generator, content will be generated each time you "build", so output will be basically HTML files
• CRA - Browser downloads a HTML file with and empty "div" and few JS files. These JS files inject the content, either pre-written or by calling some APIs from front-end. Everything happens in the browser

Sometime your don't need Next.js or Gatsby, CRA is more than enough, read my post Prerender React App for SEO without SSR or Next.js