CRA vs CNA.When to use create-react-app and when nextjs?

HARSH VATS - Jul 11 '20 - - Dev Community

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?

  1. SEO (search engine optimization). Obviously you want your app or business to appear at the top of google to get more organic traffic.
  2. 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?

  1. 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

. . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Terabox Video Player