Create-React-App vs Next.js

[cr101]

I am a React beginner but working towards building a production-ready app.

• Should I start investing my time in learning how Next.js works instead or should I continue to use CRA?
• Will it be hard to implement Analytics tools to track page views, will my app not be as search engine friendly, etc if I build it with CRA instead of NextJS because of CRA's lack of server-side rendering support?
• Who should use Create React App other than people using it for teaching React?
• What are the advantages of using CRA over Next.js other than that "it just works"?

Using CRA to learn React and later switching to Next.js makes the process of building a React app even longer and for that reason, it's not a very good option IMO.

Apologies for being off-topic but I'm often confused as to which tool I should invest the time in learning.

[notrab]

Hey @cr101 I just finished recording a short video on why I think Next.js is cool.

CRA is great for getting going and it has a great foundation for bundling for production but if you care about server side rendering, code splitting and arguably increased performance gains, Next.js could be a great tool for you to use, if you don't want to eject from CRA.

Next.js has a baked in router and makes a lot of decisions for you. You might find you want more control and therefor CRA might be the better tool for the job.

That said, I seen a package yesterday regarding extending CRA without ejecting, so there could be some new things in the community that leverage some of the Next.js ideas here.

Both projects are fast moving but Next.js has a slightly different goal than CRA. You certainly won't lose any sleep regretting learning one over the other, as they both have a great developer experience, you'll load a load from them.

Pick one, have a go and see what you run into. You'll soon know if you should of picked the other.

[viankakrisna]

next is a good start if you need SSR first, SEO friendly with lots of public content. But if you build a highly dynamic statically deployed Single Page Application client, CRA is better suited for that.

So for blog, news, with lots of public content and shareability, I'll go with next.
For dashboard, admin, apps, I'll go with CRA

Next has one blocking issue for me to use as SPA the last time I try it. It's to maintain react state when you navigate through pages. vercel/next.js#590 I have a youtube player site https://musify.id/ which has an iframe video player that should persist when the user navigating the routes. It always rerenders the iframe so the video would skip.

edit: there are ways to persist the iframe (see the linked issue), but it's not obvious for me at the time.

For analytics, you can't go wrong with both. https://developers.google.com/analytics/devguides/collection/analyticsjs/single-page-applications?hl=en

[Timer]

Last time I checked all major search engines can index SPAs (made with CRA), no SSR necessary.

[viankakrisna]

@Timer search engine yes, but sharing the app with Facebook still gave me blank page last time i checked.

[viankakrisna]

also, I've read that google webmaster tool chucked with CRA generated app because we didn't provide Array.find polyfill #746 So for default, we leave it to the user whether or not the app is SEO friendly.

[ianschmitz]

There's very little "lock-in" when using CRA. You shouldn't have much of any issue with code portability if you decided you needed some features that CRA doesn't provide out of the box. You can also eject and customize if needed.

I wouldn't get caught up in SSR, code splitting etc when starting out. They do have their place but also increase the complexity which takes away from learning the basics.

[jabacchetta]

Search engines can index SPAs without SSR, but can they do it efficiently? See this and this. TL;DR: Probably not.

And for web apps that depend on large amounts of traffic, it's not only a matter of indexing, but also social sharing that actually works, and initial rendering speed (for the search engines, but more importantly for their users).

So while SSR, code-splitting, and pre-fetching might be nice-to-haves for some, it's crucial for others.

[cr101]

@jabacchetta You might want to look at GatsbyJS as well

[raymondsze]

If someone want to change the babel or webpack or jest configuration, and also want SSR, or even some specific scripts like translating i18n messages, etc.

I just published a library called 'create-react-scripts'.
The underlying concept is same as what "react-app-rewired" did but you are able to re-publish it like your version of react-scripts which "react-app-rewired" not allow you to do so. Although complicated, you can create your own custom scripts based on the configuration provided by create-react-app too.
You are allowed to rewire the env, paths, webpack.config.dev, webpack.config.prod, webpackDevServer.config and createJestConfig yourself.

I have created one called 'create-react-scripts-ssr' which can support SSR.

I am still a newbie on open source community, looking for feedback on this approach.
https://github.com/raymondsze/create-react-scripts

[gaearon]

Going to close this out, but we offer some guidance in the README now.

https://github.com/facebookincubator/create-react-app#popular-alternatives