We will get into the differences between client-side & server-side rendering in this article and we will realize which one of these we should use depends on different situations.

what is client-side rendering

Client-side rendering (CSR) is a web development method in which a web page is rendered on the user’s device instead of on the server. It works by sending an HTML page to the user’s browser. so, in this case, your website host will not get involved a lot in processing and preparing the HTML file in advance. all the necessary data will be sent in no time to the user’s browser and after that, the browser asks for additional data from the server with API to complete the process and complete rendering the page. to make the story short, if you have a page that must be very interactive and users can do a lot of stuff in a minute, you should consider creating a client-side rendering website.

An example of a client-side rendering framework would be React.js or Vue.js

What is Server-side rendering?

in the server-side (SSR) rendering, an HTML page had already been generated with all the required data before sending the page to the browser by a server-side language like Node.js, PHP, or C#
So in this case, our website host needs to be more powerful to be able to process the page in advance for the users. if you want to stand out in the search engines, it’s essential for the SEO to have a server-side rendering website, otherwise, it will be really hard for you to be seen on the first of Google.

An example of a client-side vs. server-side rendering:

The picture above is a good example of Server-side rendering. if you inspect a web page that is made with a server-side method and then click on view page source, you will see something like the image above. All the data is prepared in advance and the browser doesn’t need to send an additional request for completing the page.

On the other hand, if a web page is made by a Client-side method, when you see the page source, you will face something like the image above. This is weird! Isn’t it? it’s just a pure HTML document structure and has no additional data in it. This data will be fetched by the browser and then the browser executes your JavaScript code so that to fetch the data from the server and at the end, it manipulates the HTML document with the proper elements and data.

Conclusion: which one is better? Client-side or Server-side rendering?

It really depends on the application But generally, server-side rendering is better for SEO, page load times, and user experience. Client-side rendering is better for dynamic applications that require more interactivity and responsiveness. for example, if you have a user dashboard, you don’t need to make it server-side rendering. Because it’s not important for SEO and you don’t want it to be visible in google search but if you have a blog page, you most likely need it to be a server-side rendering page because you want your blog page to be visible in google search and get a good rank so that you can be seen by people.