What is the Client-Side Rendering and how it works

Riccardo Andreatta
4 min readMar 6, 2023

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
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.

--

--

Riccardo Andreatta
Riccardo Andreatta

Written by Riccardo Andreatta

Technology Leader and Front End Developer

No responses yet