Skip to main content
Mohamed

How CSR (Client Side Rendering) Works

An overview of how Client-Side Rendering (CSR) works, its pors , cons

What is Client Side Rendering

Client-Side Rendering (CSR) is the most commonly used web rendering technique in Single Page Application (SPA) frameworks like React. In CSR, the browser is responsible for building and rendering the web page by executing JavaScript, rather than receiving a fully rendered HTML document from the server.

How Client Side Rendering Works

how csr works The magic of CSR starts in the browser(client) when it sends a Http Get Request to the server and the server respond with a minimal html file (index.html) with a big smile because all the work will be done by the client side this time

This index.html is includes references to external CSS and JavaScript bundle files associated with the framework used (react for example)

<!DOCTYPE html> 
  <html lang="en"> 
    <head> 
      <meta charset="UTF-8" /> 
      <title>My React App</title> 
      <link rel="stylesheet" href="/styles.css" /> 
      <script src="/bundle.js" defer></script> 
    </head> 
    <body> 
      <div id="root"></div> 
    </body> 
  </html>

Once the browser receives the HTML file, it parses the HTML and constructs the Document Object Model (DOM) structure.

The DOM represents the page's structure, such as headers, paragraphs, divs, and other HTML elements.

In our example by using reactjs the browser parses the index.html and creates an initial DOM structure with an empty div for the React web app

<div id="root"></div>

In this point the browser sends additional requests to the server for the CSS, JavaScript, and other assets like images and fonts , after getting the respons from the server , the browser applied these assets to the page by start appling the css files to the page then load the image and the fonts and other resources to complete the layout and visual appearance

After these resources are downloaded, the browser executes the JavaScript files , so here the React and similar frameworks Entering the party

The JavaScript code dynamically updates the DOM, making the page interactive.

So in React, the JavaScript code can create and update components on the page in response to user actions, such as clicking a button

When a user interacts with the page — say by clicking a button or submitting a form — the browser updates the DOM in real-time without reloading the entire page. The JavaScript code listens for these events and triggers updates to the page's content dynamically

import React from 'react';
import ReactDOM from 'react-dom';

const App = () => {
  const handleClick = () => {
    alert('Hello, without reloading!!!');
  };

  return (
    <div>
      <h1>Welcome to Mohamed's Blog</h1>
      <button onClick={handleClick}>Click</button>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

For example when the user clicks the "Click" button, the browser dynamically responds by showing an alert, all while the page remains unchanged (no reload).

This process allows for smooth, fast, and dynamic user experiences, where only the necessary parts of the page are updated based on user interactions, rather than reloading the whole page

Pros & Cons of Client-Side Rendering

Pros :

  • CSR enables fast, smooth, and dynamic page updates without refreshing the whole page
  • The server just static assets (HTML, JS, CSS) and reducing the processing power required
  • The Best for SPA Apps where just parts of the page change based on the user actions

Cons :

  • The browser should download and execute the javaScript before rendering the content so the first load can be slower compared to Server-Side Rendering (SSR)
  • The search engines rely on HTML content to index pages so CSR loads content dynamically this means that the search engine bots might not index the page
  • The large javaScript files can impact performance this means it's requiring optimization techniques like code splitting and lazy loading
Share it in Linkedin