Frontend development has become very easy over the years. We have so many tools and frameworks that make coding simple and organized. We have Vuejs, Angular, jquery, React, etc. So many choices exist that are different in their approach.
You can break down every application into different components. Every component has its own logic and CSS. For example, you might have a Navbar. You can create one component and use it through your application. Breaking down everything into smaller pieces is excellent when making rich UI web apps.
That’s not all! You also get a virtual DOM for fast rendering, easy testing capabilities with Jest, and easy scaling capabilities. You can also use React native to make Android and IOS apps easily.
There is also great community support, and countless companies use it in their tech stack.
All this sounds so great, doesn’t it? I would say almost everything is perfect. React uses something called Client-Side Rendering(CSR). Let’s look at more of this in detail in the next section.
Pros of CSR
- Great for making Web applications. The learning curve at the start is great for new developers.
- After the initial load, page rendering is very fast.
- Great user experience.
- Great support from libraries. (NPM packages)
Cons of CSR
- Very slow initial load
- Bad SEO
As the name suggests, the server renders the HTML and serves it to the browser. You don’t have to wait for so long on the initial load. Every page is a separate call to the server.
Since the whole page comes from the server, search engine crawlers can crawl everything. Every page can have separate meta tags and keywords related to it.
Pros of SSR
- Faster initial load
- Very good for static sites
- The initial page is faster. The user won’t wonder if something has gone wrong.
Cons of SSR
- Many server requests. This also leads to more server costs.
- CSR has a slow first initial load, but subsequent ones are speedy. In SSR, the subsequent loads are the same. Because you have to make new calls for every page.
- Full page downloads
- Bad user experience in terms of interactions.
So What Should You Do?
Both approaches have their pros and cons, as we saw above. If you use CSR, you won’t be able to do SEO. When you share your content, you’ll get the same meta tags as your main page. It’ll be almost impossible to rank your pages on google even with the help of a sitemap.
If you use SSR, you’ll probably waste a lot of money on server costs, and your user will have a bad experience.
SEO and good UX are a must in this day and age. SEO gets users to your website. A good UX will keep users coming back to your website. You shouldn’t have to sacrifice one for the other. Luckily, there is one savior out there.
If you know, React, you kind of know NextJS. This is because Next is a React framework.
You have components just like in React. CSS has a different naming convention, but that’s the biggest change. The reason Next is so good is that it gives you options. If you want a page to have good SEO, you can use ServerSideProps. If you want to use CSR, you can use UseEffect to call your APIs, like React.
Moving from React to Next.js
Now that you’re convinced that you should Next.js, you might wonder how to change your existing website to Next. Next.js is designed for gradual adoption. Migrating from React to Next is pretty straightforward and can be done slowly by gradually adding more pages.
If you want to get more users to your website organically, you cannot use React. SSR approaches the sacrifice the users’ experience. Instead, you must use Next.js to get the benefits of React with options for SSR, SSG, and CSR. Moving to Next.js is simple and can be done incrementally.
. . . & comments more!