Client-side rendering Vs Server-side rendering

#beginners #webdev

The concept of Client-side rendering(CSR) and server-side rendering(SSR) revolves around how the response is sent by the server when a client requests it.
Let's understand the difference between CSR and SSR with an example. Suppose you want to buy a headphone and for that, from your browser, you will go to Amazon.com and search for headphone. Let's convert the above example in client-server terminology and what happens behind the scenes.
Here, your browser is the client and amazon is the server. So, you send the request to Amazon(server) and your browser(client) get the response. The response, in this case, is the list of headphones available on amazon. Amazon has two choices to serve the request. It can either serve the request by CSR or SSR.

How the request is served by amazon in the case of SSR?
When you send the request to amazon, then the response to your browser is the HTML page that will be rendered on the browser.The response will be somewhat

<HTML>
 <head></head>
  <body>
    <div>
      <img src="head_phone_img1.jpg" height=100 width=100>
    </div>
   </body>
</HTML>

So, your browser will have to render HTML and will not have to wait for the javascript to be downloaded. So, the time for the first byte to reach the browser will be higher as the server will take some time to create the HTML page. And the number of network calls will also be higher because for each and every request the server will take some time to send the response. So for each request the server responds by generating and returning a completely new page for every interaction

How the request is served by amazon in the case of CSR?
When you send the request to amazon, the response is the plain HTML with the contents to be rendered by javascript.
Hence the browser has to wait till the javascript is downloaded and then it can insert the element in the plain HTML.So, the time required to render the page depends on the Clients internet. So if the speed of the internet is good, the page will be rendered at a faster rate.

Index.html
<HTML>
  <head></head>
   <body>
     <div id ="root" >
      <script src="index.js"></script>
     </div>
   </body>
</HTML>

Javascript to add contents to the page.

Index.js
document.getElementById("root").innerHTML = ' <img src="head_phone_img1.jpg"> '

This is a new approach to render the website and became popular with various frameworks like react,vue, angular etc.
The websites rendered with CSR are more interactive and the number of network calls is also reduced. Client-side rendering avoids making unnecessary requests for a full page when only a portion of the page has changed.

If client-side rendering is so useful then why do most of the company prefer SSR?
One of the drawbacks of CSR is SEO gets tempered, Since the content is not rendered until the page is loaded on the browser, the web crawlers can not crawl the page.

How the companies reduce the number of network calls and speed with SSR?
So, the speed can be increased by introducing caching layer.So when the client requests for the page, it first looks for it in the cache and thus the latency of network call can be reduced.

Pros and Cons of SSR

Search engines can perform SEO
Initial page load is faster
Frequent network calls
reloads the page again and again

Pros and Cons of CSR

Number of network calls is less
SEO gets hit
Initial page load takes longer

So it is very important to decide whether to go for CSR or SSR depending on the use case.
For example,

In the case of e-commerce SEO plays a very important role. So, in such case SSR can be used. But speed is also a very huge factor, to ensure that, it can use caching mechanism.
For a web application like Facebook or WhatsApp web, where SEO does not matter alot but the speed and client interaction plays an important role, in such case CSR can be used