CSR vs SSR — What Is the Difference?

The fundamental difference is where the initial HTML is rendered:

CSR (Client-Side Rendering): the browser renders the initial application UI.
SSR (Server-Side Rendering): the server renders the initial HTML, then the browser receives it and Angular hydrates it.

1. CSR — Client-Side Rendering

In CSR, Angular primarily runs in the browser to produce the initial UI.

Browser
   │
   │ Request application
   ▼
Server
   │
   │ index.html + JavaScript
   ▼
Browser
   │
   │ Run Angular
   ▼
Angular
   │
   │ Call API
   ▼
ASP.NET Core Web API
   │
   │ JSON
   ▼
Angular
   │
   │ Render UI
   ▼
User sees page

For example:

products$ = this.http.get<Product[]>(
  'https://localhost:7001/api/products'
);

Angular receives the JSON and generates the visible product list in the browser.

2. SSR — Server-Side Rendering

In SSR, Angular runs on the server for the initial request and generates HTML before returning the response.

Browser
   │
   │ GET /products
   ▼
Angular SSR Server
   │
   │ Call API
   ▼
ASP.NET Core Web API
   │
   │ JSON
   ▼
Angular SSR Server
   │
   │ Generate HTML
   ▼
Browser
   │
   │ Display HTML
   ▼
Angular loads
   │
   ▼
Hydration
   │
   ▼
Interactive application

So the browser initially receives meaningful HTML such as:

<h1>Products</h1>

<div>
    <h2>Laptop</h2>
    <p>Price: 50000</p>
</div>

Angular then hydrates that HTML and makes it interactive.

3. CSR vs SSR — Main Differences

4. Same /products Page in CSR vs SSR

Assume the user requests:

/products

CSR

The browser initially receives the Angular application:

<app-root></app-root>
<script src="main.js"></script>

Then:

Download Angular
      ↓
Run Angular
      ↓
Call /api/products
      ↓
Receive JSON
      ↓
Render products
      ↓
User sees products

The browser does the initial rendering.

SSR

The request goes to the Angular SSR server.

GET /products
      ↓
Angular runs on server
      ↓
Call /api/products
      ↓
Receive JSON
      ↓
Generate HTML
      ↓
Send rendered HTML
      ↓
User sees products

The browser might immediately receive:

<h1>Products</h1>

<div>Laptop - ₹50,000</div>
<div>Mouse - ₹1,000</div>
<div>Keyboard - ₹2,000</div>

Then Angular loads and hydrates the application.

The server does the initial rendering.

5. Simple Code Example

Interestingly, your Angular component can look very similar regardless of whether the initial route is rendered through CSR or SSR.

product.ts

export interface Product {
  id: number;
  name: string;
  price: number;
}

product-service.ts

import { inject, Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

import { Product } from './product';

@Injectable({
  providedIn: 'root'
})
export class ProductService {

  private http = inject(HttpClient);

  getProducts() {
    return this.http.get<Product[]>(
      'https://localhost:7001/api/products'
    );
  }
}

products.ts

import { Component, inject } from '@angular/core';
import { AsyncPipe } from '@angular/common';

import { ProductService } from './product-service';

@Component({
  selector: 'app-products',
  standalone: true,
  imports: [AsyncPipe],
  templateUrl: './products.html'
})
export class Products {

  private productService = inject(ProductService);

  products$ = this.productService.getProducts();
}

products.html

<h1>Products</h1>

@if (products$ | async; as products) {

  @for (product of products; track product.id) {

    <div>
      <h2>{{ product.name }}</h2>
      <p>Price: {{ product.price }}</p>
    </div>

  }

}

The important difference isn't necessarily this component code.

It is where Angular executes to produce the initial HTML.

CSR
Products component initially executes in browser
                ↓
           Browser renders


SSR
Products component initially executes on server
                ↓
           Server renders
                ↓
          Browser receives HTML
                ↓
             Hydration

6. Performance Difference

CSR

Initial loading involves more client work:

Download HTML
     ↓
Download JavaScript
     ↓
Execute Angular
     ↓
Call API
     ↓
Receive data
     ↓
Render

But after Angular is running, SPA navigation can be very fast.

SSR

The initial request can deliver useful content sooner:

Request page
     ↓
Server renders
     ↓
Receive HTML
     ↓
Display content
     ↓
Load Angular
     ↓
Hydrate

However, the server must perform rendering work.

7. SEO Difference

Suppose you have an article:

/articles/angular-signals

With pure CSR, the initial document may largely contain the application shell, with article content appearing after Angular executes.

With SSR, the initial response can already contain:

<title>Angular Signals Explained</title>

<h1>Angular Signals</h1>

<p>
  Angular Signals provide a reactive mechanism
  for managing application state...
</p>

This makes SSR particularly useful for:

• Public articles
• Blogs
• Product pages
• News pages
• Marketing pages
• Other SEO-sensitive content

8. Server Load Difference

CSR

Server
  ↓
Static Angular files / APIs
  ↓
Browser performs rendering

The server doesn't need to render Angular HTML for every page request.

SSR

Request
   ↓
Server executes Angular
   ↓
Server generates HTML
   ↓
Response

Therefore, SSR generally requires more server-side rendering resources.

9. Which One for Angular + ASP.NET Core?

Consider an application containing:

Public Website
├── Home
├── About
├── Articles
└── Article Details

Admin
├── Login
├── Dashboard
├── Categories
└── Article Management

Different routes can have different requirements.

For example:

Public Article
     ↓
SEO important
     ↓
SSR can be useful


Admin Dashboard
     ↓
SEO not important
     ↓
Highly interactive
     ↓
CSR can be suitable

Modern Angular also supports hybrid rendering, so this doesn't always have to be an application-wide either/or decision.

10. CSR vs SSR vs SSG

Since you've now covered all three, this is the easiest way to remember them:

CSR
│
├── WHO renders?
│      Browser
│
└── WHEN?
       After JavaScript runs


SSR
│
├── WHO renders?
│      Server
│
└── WHEN?
       User requests page


SSG
│
├── WHO renders?
│      Build/prerender process
│
└── WHEN?
       Before user requests page

Interview memory trick

CSR = Client time
SSR = Request time
SSG = Build time

11. Key Points

• CSR renders the initial UI in the browser.
• SSR renders the initial HTML on the server.
• CSR usually has less server-side rendering overhead.
• SSR provides meaningful HTML in the initial response.
• SSR is particularly useful for SEO-sensitive public pages.
• CSR is very common for dashboards and highly interactive applications.
• SSR requires consideration of both server and browser execution environments.
• Angular SSR uses hydration to make server-rendered HTML interactive.
• Angular can combine CSR, SSR, and prerendering depending on route requirements.

12. Interview Questions and Answers

1. What is the main difference between CSR and SSR?

Answer:
CSR generates the initial application UI in the browser, while SSR generates the initial HTML on the server and sends it to the browser.

2. Which has better SEO support?

Answer:
SSR generally provides more straightforward SEO support because crawlers receive meaningful rendered HTML directly in the initial response.

3. Which has more server workload?

Answer:
SSR generally has more rendering workload because the server generates HTML for requests. CSR shifts most UI rendering work to the browser.

4. Is CSR faster than SSR?

Answer:
It depends on what is measured. SSR can improve initial content delivery, while CSR can provide very responsive navigation and interaction after the application has loaded.

5. Does Angular run in the browser when SSR is used?

Answer:
Yes. The server performs the initial rendering, and Angular subsequently runs in the browser and hydrates the page to provide interactivity.

6. What is hydration in SSR?

Answer:
Hydration is the process where Angular running in the browser reuses the server-rendered HTML and attaches Angular's behavior and event handling to it.

7. Which is better for an admin dashboard?

Answer:
CSR is commonly used for admin dashboards because they are highly interactive and generally don't require public search-engine indexing.

8. Can CSR and SSR be used in the same Angular application?

Answer:
Yes. Angular can use different rendering strategies for different routes, enabling a hybrid rendering architecture.

Interview One-Line Answer

CSR renders the initial UI in the user's browser using JavaScript, whereas SSR renders the initial HTML on the server and sends it to the browser, where Angular subsequently hydrates it and provides interactivity.