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>
How the request is served by amazon in the case of CSR?
Index.html <HTML> <head></head> <body> <div id ="root" > <script src="index.js"></script> </div> </body> </HTML>
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.
Search engines can perform SEO
Initial page load is faster
Frequent network calls
reloads the page again and again
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.
- 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