CSR vs SSR: Quick Guide Explained

Let’s understand what is CSR (Client Side Rendering) and SSR (Server Side Rendering).

There are mainly two Approaches of Rendering:

Server-Side Rendering (SSR): The server does the rendering before sending it to the browser.
Client-Side Rendering (CSR): The browser does the rendering.

But What is Rendering?

Rendering refers to the process of converting raw code (HTML, CSS, JavaScript) into a visual, interactive webpage that users can see and interact with.

Now let’s understand what is CSR.

Before we understand CSR, let’s see what happens when a user opens a website, for example: https://umeshnagare.com

1. User hits the URL in the browser

The browser:

Resolves the domain name (umeshnagare.com) into an IP address using DNS.
Establishes a TCP connection with the server (port 443 for HTTPS).
Sends an HTTP GET request over that TCP connection.

2. Server sends the HTML shell

The server responds with a minimal HTML file:

It has a <div id="root"></div> placeholder.
It includes links to CSS and JavaScript files.

At this point:

The Application Layer in TCP/IP handles the HTTP communication.
The Transport Layer splits the response into TCP packets and sends them to the browser.

Example HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My CSR App</title>
    <script type="module" crossorigin src="/assets/index-8QcmAcKL.js"></script>
    <link rel="stylesheet" crossorigin href="/assets/index-B4IZX2z6.css"> 
</head>
<body>
    <div id="root"></div>
</body>
</html>

3. Browser downloads JavaScript and CSS

The browser parses the HTML and finds references to JS and CSS files. It sends more GET requests to fetch them.

Example:

GET /assets/index-8QcmAcKL.js
GET /assets/index-B4IZX2z6.css

The server sends these files split into TCP packets.

4. JavaScript executes and fetches data

Once JS is downloaded and run in the browser:

It fetches data from APIs like fetch('/api/products')
Each API call:
- Resolves the domain (if external).
- Opens a new TCP connection.
- Sends HTTP request and gets JSON response.

5. UI is rendered in the browser

The browser reassembles the TCP packets, gets the data, and JS renders the UI dynamically inside the <div id="root">.

This is Client-Side Rendering. The page content is built in the browser after downloading the JavaScript.

What is SSR?

Now let’s understand Server-Side Rendering using the URL: https://api.umeshnagare.com

1. User opens a URL like https://api.umeshnagare.com/products/27

The browser:

Resolves the domain name (umeshnagare.com) using DNS.
Establishes a TCP connection with the server on port 443.
Sends an HTTP GET request for the product page.

2. Server processes and renders HTML

The server:

Fetches the required data (like product info from a database or API).
Generates the full HTML page with the product details already filled in.

Example rendered HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Product Page</title>
    <script type="module" src="/assets/index.js"></script>
    <link rel="stylesheet" href="/assets/style.css">
</head>
<body>
    <div id="root">
        <h1>iPhone 14 Pro</h1>
        <p>Price: $999</p>
    </div>
</body>
</html>

3. Browser receives and displays the HTML

The server sends the complete HTML.
The browser displays the content immediately because it’s already rendered.

4. Browser downloads JS and hydrates

Browser downloads the JS and CSS.
JavaScript hydrates the page, i.e., makes it interactive (adds event listeners, etc.).

Summary: CSR vs SSR

Feature	CSR	SSR
Where is content rendered?	In the browser	On the server
First Load Speed	Slower (JS needs to run first)	Faster (HTML is already ready)
SEO	Poor	Good
Time to First Paint	Longer	Shorter
Interactivity	Fully after JS loads	After hydration

Hope this helps you understand how rendering works on the web!

Understanding CSR and SSR: A Simple Guide