Client-Side Rendering vs Server-Side Rendering
Hi guy/gal, hope you are well. Today in this article we are going to discuss about CSR (Client-Side Rendering) and SSR (Server-Side Rendering). So, without further ado let's get started.
We will first talk about Server-Side Rendering because it had came before Client-Side Rendering.
Server-Side Rendering
Whenever we go to a website, we write its address in the browser and this sends a HTTP request to the server of the website.
"Hey Server, I want to access your site."
After that, a response came back from the server and a connection is established between the client and the server. Server renders the HTML file which user had requested and sends it to the client. Server renders the HTML page from the PUG templates or EJS templates etc. In this case, the requested file is the homepage of the website. After that, server also sends the relevant JS file. So that user could able to interact with the website. Remember, rendering process occurs when the site is not static i.e. it already have static HTML file.
Now, if the user goes to different URL of the same website, then a new request is sent to the browser. Again, the same process continue, server renders the HTML page from PUG templates or EJS (Embedded JavaScript) templates.
It has faster initial loading time than CSR because it is sending only the requested page from the server but in CSR, whole application code is recieved by the client. If initial loading takes more than 3 seconds then it's a higher chance that the client will leave the website and it will be a huge loss for the business.
Everyone wants their website to rank on Google or other web browsers. The SEO part of the SSR website is excellent. Web crawlers can easily navigate the SSR websites, which is not in the case of CSR websites.
"Great! I will use only SSR for developing my website. I want websites optimized for search engine."
Hey wait, before taking any decision, first understand the Client-Side Rendering.
Client-Side Rendering
Let's continue the same process of accessing a website that we had seen earlier.
We go to a website by writing its address in the browser and hitting enter. This sends a HTTP request to the server of the website.
"Hey Server, I want to access your site."
After that, a response came back from the server and a connection is established between the client and the server.
Now, in this case, the server will not render the HTML page on the server. Rather, it will send the minified HTML and after that minified JavaScript file to the client. Then client browser will render the page. Users can now interact with the application and with each interaction, the javascript and HTML will be rendered accordingly.
"Hey, what about the data? will it remain the same always?"
The beauty of Client-Side Rendering is that users can still get the latest data on request but there is no need to request the minified HTML and JS files again and again. The data can be requested through API endpoints which are provided by the same or different server.
The drawback of this approach is that it lacks serious SEO. Web crawlers are not yet advance that they could able to understand the JavaScript rendering. Although, many companies claims that their crawlers can understand the javascript rendering but the truth is that they do not understand it.
"So, why should I use it if SEO is not so good for this approach?"
Remember, it's rendering on the client-side, so once your application get loaded inside the client's browser. I thent provides ultra-high-speed interaction which is not possible in case of Server-Side Rendering.
CSR can be used to develop admin panels or parts of the website which does not need to be get reflected in the search results. Although, this is not a good choice for developing landing pages or blogs where organic traffic is important.
Thanks for giving your precious time. Goodbye!
Learn about ReactJs on Faguni.