What is the Client-Side Rendering and how it works

Client-side rendering (CSR) is a technique for rendering web content on the client-side, i.e., in the user’s browser.

In this article, I will explore what client-side rendering is, how it works, and its benefits and drawbacks.

What is Client-Side Rendering?

In traditional server-side rendering (SSR), the server generates the HTML for a page, which is then sent to the client. In client-side rendering, on the other hand, the HTML is generated on the client-side, using JavaScript to render content in the browser.

With CSR, the client requests a minimal HTML file from the server, which contains the necessary JavaScript and CSS files. When the client loads the JavaScript files, the JavaScript code is executed, which renders the content in the browser. Only at this point the page becomes viewable and fully interactable.

Client-Side Rendering schema

How Does Client-Side Rendering Work?

Client-side rendering works by using JavaScript to dynamically create and modify the HTML and CSS on the page. The JavaScript code can fetch data from an API or a database and use it to render the content. The resulting HTML and CSS are then added to the page, creating a dynamic and interactive user interface.

Let’s break down this process into smaller steps to understand even better how client-side rendering works:

1. A user requests a page from a server. This could be a direct request to the server or a click on a link that triggers a request.
2. The server sends a minimal HTML page to the client (usually a loder image or similar to let the user know that something is happening under the hood.
3. Along with that initial HTML, the server sends any necessary JavaScript and CSS files.
4. The client’s browser loads the HTML page and executes the JavaScript code.
5. The JavaScript code makes a request to an API or other data source to fetch the data needed to render the page.
6. Once the data is fetched, the JavaScript code uses it to render the page in the browser.
7. At this point the page is fully loaded, visible and interactable: any…