CRA vs Next.js vs Gatsby - A Comparison

Gijo Varghese Feb 9 ・1 min read

#react #nextjs #gatsby

Once you’ve finished creating your “create react app”, you may have started to hear “Next.js” and “Gatsby”. From many aspects, it may look similar. But each has a purpose, their own pros and cons. One won’t fit for all.

Here is a quick comparison table. (Full guide initially posted in Coffee N Coding)

	CRA	Next.js	Gatsby
Final HTML code generation	In the Browser	In the Server	In the ‘build’ process (CI/CD server)
SEO	Not good enough	Pretty good	Pretty good
Supports any kind of websites	Yes	Yes	Yes
Learning curve	Normal	React + few Next.js apis	React + Graphql + few Gatsby apis
Output	HTML + CSS + JS files	HTML + CSS + JS files + Node.js code to serve these files	HTML + CSS + JS files
Supports Netlify (or any static hosting sites)	Yes	No	Yes

Still confused? Read my full post where I explain with examples of different websites and which one to choose.

DISCUSSION (9)

Gijo Varghese

Sung M. Kim

Feb 10

Thanks for the detailed comparison Gijo 👍.

And may I request to post the full post here as well?
as you can add canonical_url pointing to your full post URL for SEO purposes 😉

Gijo Varghese

Feb 11

Yes, but while Googling Dev.to's link is on the first position, while my blog is 3 or 4 :( (I've already put canonical_url)

Felix Pojtinger

Feb 10

For SPAs I use Parcel nowadays. Much less overhead than CRA and supports zero-config SASS, Rust, WebAssembly and so on.

Gijo Varghese

Feb 10

Cool! I've heard about it a lot, but never got time to try it. Are there any drawbacks?

Saddam M

Feb 10

Zero-config means no flexibility. You can't exclude certain modules from getting bundled. I personally experience heavy caching issues, otherwise it's great!

Anthony DeFreitas

Feb 9

While Gatsby is known for static, you can also build full blown dynamic sites with it as well.

Gijo Varghese

Feb 10

sorry about that. I've fixed it

Sergio Daniel Xalambrí

Feb 9

Note Next.js has an export feature to generate static pages as Gatsby, in that case is basically the same as Gatsby expect you don’t need to learn GraphQL.