In this post, I will tell you about CRA(create-react-app) vs CNA(create-next-app).
First of all what is reactjs and nextjs?
Reactjs is a client side javascript library to build SPA(single page application).
CSR(Client side rendered) apps use chunks of css and js that generates html content on the client side whereas SSR(server side rendered) apps generate html on the server side and instead of sending chunks of css and js, it just sends the whole html as a string from the server.
Nextjs is javascript framework built on top of reactjs which is used to build SSR(server side rendered) apps.
Can we use reactjs for server side rendering??
Obviously, as we can see that nextjs does ssr and is built on top of reactjs. So why people use nextjs? Simply because it saves them from doing a lot of stuff by themselves like configuring babel for browser compatibility, configuring webpack, express, etc. Nextjs does this for you so you don't have to worry about these.
What are the advantages of SSR?
- SEO (search engine optimization). Obviously you want your app or business to appear at the top of google to get more organic traffic.
- Faster first page load. 60% users will bounce back if your website will take more than 2.5 seconds to load.
When to use CRA?
When you don't care about SEO, like your portfolio website.
What are the disadvantages of SSR?
- First page load time can increase if your app contains a lot of data.
I hope it's all clear now that when you should use CRA and when CNA. And if you have any more doubt on react, you can read https://dev.to/harshvats2000/what-is-react-and-why-to-use-it-56bo
Top comments (8)
"When to use CNA? When you don't care about SEO, like your portfolio website."
Isn't it the opposite? CNA would let you have better SEO control because of SSR.
I mistyped it. Now corrected. Thanks for pointing it out. :)
I don't think it's corrected yet, Harsh.
It was my network problem maybe. Now corrected. Thanks for pointing it out.
Next also supports Static Site Generation (SSG) and Incremental SSG, with this the problem when you need to fetch a lot of data on each render disappears.
You can also use it to build client-side only apps, making Next generate a skeleton UI at build time (with SSG) and filling it with data at runtime client-side.
IMHO, use create-react-app if you are just learning React or if you are creating a working example to help someone who are new to React. I would say you can always use Next.js other times without having any disadvantages comparing to CRA.
Yes. Beginners should always start with Reactjs.
Confused now:
With Server-side Rendering (SSR), Next.js pre-renders the page into HTML on the server