CLIENT SIDE RENDERING VS SERVER SIDE RENDERING – Which is a better search engine optimization ?

SEO !! The people who has his own small startup or even just a small page in facebook of his small or big company, gets ample of calls in a day to create a website or make it come in the first page of Google searches. A lot knows that this job is done by the “traffic generation” method of Search Engine Optimization.
If we dig deep in What is SEO ?
It is the process of making a Website’s search related pages on the top of Search Engine Results(i.e. making it more discoverable).
The topic of discussion today is one of the most debated topic that surrounds the SEO, which is
Client side rendering VS Server side Rendering
So before starting let know that how can a web page be rendered
There can be two ways of rendering any web pages:-
1.Client Side Rendering:-With a client-side rendering, you redirect the request to a single HTML file and the server will deliver it without any content (or with a loading screen) until you fetch all the JavaScript and let the browser compile everything before rendering the content.
Essentially the client will first request the source code which will have very little indexable HTML in it, then a second request will be made for the .js file containing all of the HTML in JavaScript as strings.
2.Server Side Rendering:-Server-side rendering (SSR) is when content on your web page is rendered on the server and not on your browser using JavaScript. For example, when you have a typical PHP or WordPress site, the page is loaded from content that is coming via HTTP which was rendered on the server and comes as fully rendered HTML. This is in contrast to a React app built with CRA, which just sends a .js file to the client and the clients’ browser JavaScript engine creates the markup after the .js file is loaded.
There is a famous metaphor to understand the same in simple way:-
“With server-side rendering, whenever you want to see a new web page, you have to go out and get it, this is analogous to you driving over to the super market every time you want to eat. With client-side rendering, you go to the super market once and spend 45 minutes walking around buying a bunch of food for the month. Then, whenever you want to eat, you just open the fridge.” — Adam Zerner
Which has better SEO:-
SSR has better SEO than CSR because with SSR everything is in HTML because You extracted the HTML file/String from your Javascript/React code on the server and then sent a plain and simple html file/string to the client/browser that it’ll immediately show to the user without any extra step.
But in CSR You didn’t extracted the html string from javascript code on the server and sent the javascript file to the client/browser. Now, Browser can not show anything to the user immediately, Because now it’s the browser’s job to execute the javascript code, get the html string and then show it to the browser. This step can take fairly long time if your javascript file is big and you have a lot of components.
Server Side rendering is not necessary in react applications
Before Libraries and Frameworks like React were launched, Every website used html to show content to the user. Search Engines would go through this html file and index all the content in it so your website will be visible to some one searching for it but, When libraries like react were launched, People started using them but Search Engine Indexing became a problem. Since all the code was now written in Javascript and browsers won’t index anything not written in HTML, which will drop their website’s search engine ranking.
So, People started using Server side rendering to render a html string from javascript and then send that to the user. This way search engines can also index it. Win win for everyone.
Now, As Search Engines are a lot more smarter, They have started to execute your javascript code too so what I have mentioned above is not a very good reason to do Server Side rendering now.
Now, Every one does SSR to improve First Meaningful Paint Time.
As I mentioned above, In Client Side Rendering, All the content is rendered on the client, So the user has to wait for large chunks of Javascript code to download and then wait even more for the browser to show anything at all. This is terrible!
To Improve the User Experience, SSR Comes to rescue.
When SSR is setup, And an user visits the website, The server will immediately render the page on the server and create a html string and then send the html string to the browser, Now since browser received a html string, It’ll render it immediately without wasting any more time. This way user will see something on the page and wouldn’t have to wait for too long. Also as he is looking around the webpage, The browser’ll download rest of the javascript code from the server and webpage will become fully interactive.
NO here’s a question
***Is Next.js a solution over Create-react-app?***
->Next.js is a lightweight framework for static and server-rendered React applications.
This is great both for performance in first-page load and SEO purposes, as we’ll see in a moment.
Next takes all the good parts of React and makes it even easier to get an app running. It does this thanks to multiple built-in configurations—automatic code-splitting, file-system routing, server-side rendering, static files exporting, and styling solutions. It can also be used as a static site generator.
It currently sits on top of the list of the most popular tools of its kind and is still growing in popularity. Not surprising, considering the rising adoption of the React framework.
No wonder big companies such as Netflix, Uber, and GitHub are already using it.
React is smart. So when you are using SSR in react, it’ll not re-render the page after loading javascript code. It’ll automatically know that you used SSR and it’ll simply find all the DOM nodes and then attach event handlers etc to them.