← Back to Articles         
What is Client-Side Rendering (CSR)?

What is Client-Side Rendering (CSR)?

Published on 02 Oct 2026     9 min read Angular
SSR, CSR, SSG

What is Client-Side Rendering (CSR)?

1. What is Client-Side Rendering?

Client-Side Rendering (CSR) is a rendering technique where the browser executes JavaScript to generate and display the application's HTML/UI.

In an Angular application using CSR:

  1. Browser requests the Angular application.
  2. Server returns a basic HTML page, typically index.html.
  3. Browser downloads the Angular JavaScript bundles.
  4. Angular starts in the browser.
  5. Angular creates and renders the UI.
  6. Angular calls the ASP.NET Core Web API to retrieve data.
  7. The UI is updated with the returned data.

Simple definition

CSR means the application's UI is primarily rendered in the user's browser using JavaScript rather than being fully rendered as HTML on the server.

2. CSR Architecture with Angular + ASP.NET Core

For your Angular + ASP.NET Core Web API architecture, the typical flow is:

                    CLIENT-SIDE RENDERING

┌──────────────────────── Browser ─────────────────────────┐
│                                                         │
│   index.html                                            │
│       │                                                 │
│       ▼                                                 │
│   Angular JavaScript                                    │
│       │                                                 │
│       ▼                                                 │
│   Angular Application                                   │
│       │                                                 │
│       ▼                                                 │
│   Product Component                                     │
│       │                                                 │
│       │ HTTP GET /api/products                          │
└───────┼─────────────────────────────────────────────────┘
        │
        ▼
┌──────────────────────────────┐
│ ASP.NET Core Web API         │
│                              │
│ GET /api/products            │
│        │                     │
│        ▼                     │
│ SQL Server                   │
└──────────────────────────────┘
        │
        │ JSON
        ▼
┌──────────────────────────────┐
│ Angular receives JSON        │
│        │                     │
│        ▼                     │
│ Angular renders HTML         │
│        │                     │
│        ▼                     │
│ User sees Products           │
└──────────────────────────────┘

The important point is:

ASP.NET Core Web API normally sends data (JSON). Angular running in the browser converts that data into the visible UI.

3. Full Simple Sample Program

Consider an Angular application displaying products from an ASP.NET Core Web API.

ASP.NET Core Web API

Product.cs

public class Product
{
    public int Id { get; set; }

    public string Name { get; set; } = string.Empty;

    public decimal Price { get; set; }
}

ProductsController.cs

using Microsoft.AspNetCore.Mvc;

[ApiController]
[Route("api/[controller]")]
public class ProductsController : ControllerBase
{
    [HttpGet]
    public IActionResult GetProducts()
    {
        var products = new List<Product>
        {
            new Product
            {
                Id = 1,
                Name = "Laptop",
                Price = 50000
            },
            new Product
            {
                Id = 2,
                Name = "Mouse",
                Price = 1000
            },
            new Product
            {
                Id = 3,
                Name = "Keyboard",
                Price = 2000
            }
        };

        return Ok(products);
    }
}

The API returns:

[
  {
    "id": 1,
    "name": "Laptop",
    "price": 50000
  },
  {
    "id": 2,
    "name": "Mouse",
    "price": 1000
  },
  {
    "id": 3,
    "name": "Keyboard",
    "price": 2000
  }
]

Angular Application

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 { Observable } from 'rxjs';

import { Product } from './product';

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

  private http = inject(HttpClient);

  private apiUrl = 'https://localhost:7001/api/products';

  getProducts(): Observable<Product[]> {
    return this.http.get<Product[]>(this.apiUrl);
  }
}

products.ts

import { Component, inject, OnInit } from '@angular/core';
import { ProductService } from './product-service';
import { Product } from './product';

@Component({
  selector: 'app-products',
  standalone: true,
  templateUrl: './products.html'
})
export class Products implements OnInit {

  private productService = inject(ProductService);

  products: Product[] = [];

  ngOnInit(): void {

    this.productService.getProducts()
      .subscribe(data => {
        this.products = data;
      });

  }
}

products.html

<h2>Products</h2>

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

  <div>
    <h3>{{ product.name }}</h3>

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

}

app.config.ts

import { ApplicationConfig } from '@angular/core';
import { provideHttpClient } from '@angular/common/http';

export const appConfig: ApplicationConfig = {

  providers: [
    provideHttpClient()
  ]

};

4. How CSR Works in This Program

When the user opens:

https://www.example.com/products

the following happens.

Step 1 — Browser loads Angular

The server initially sends the Angular application's basic HTML and JavaScript files.

Conceptually:

<html>
<body>

    <app-root></app-root>

    <script src="main.js"></script>

</body>
</html>

At this point, the server hasn't generated the complete product HTML.

Step 2 — Angular starts in the browser

The browser executes:

main.js

Angular bootstraps the application and creates the components.

Step 3 — Products component loads

Angular creates:

Products

Then:

ngOnInit()

runs.

Step 4 — Angular calls the Web API

This executes:

this.productService.getProducts()

which sends:

GET https://localhost:7001/api/products

Step 5 — ASP.NET Core returns JSON

The Web API responds:

[
  {
    "id": 1,
    "name": "Laptop",
    "price": 50000
  }
]

Notice that the API is returning data, not a rendered Angular page.

Step 6 — Angular receives the data

The browser executes:

.subscribe(data => {
    this.products = data;
});

Now:

products

contains the API data.

Step 7 — Angular renders the HTML

Angular processes:

@for (product of products; track product.id) {
    <h3>{{ product.name }}</h3>
}

The browser eventually displays something like:

Products

Laptop
Price: 50000

Mouse
Price: 1000

Keyboard
Price: 2000

Therefore, the final UI was primarily generated inside the browser.

That is Client-Side Rendering.

5. CSR Request Flow

A useful way to remember it is:

Browser
   │
   │ Request Angular App
   ▼
Web Server
   │
   │ index.html + JS bundles
   ▼
Browser
   │
   │ Execute Angular
   ▼
Angular Application
   │
   │ GET /api/products
   ▼
ASP.NET Core Web API
   │
   │ JSON
   ▼
Angular
   │
   │ Render UI
   ▼
Browser

The key distinction is:

Server → sends application files/data

Browser → generates the application UI

6. CSR and Angular Routing

CSR also explains why Angular applications can feel very fast after initial loading.

Suppose you navigate:

Home
   ↓
Products
   ↓
Contact
   ↓
Articles

With Angular client-side routing, a full browser page reload is generally unnecessary for each navigation.

Angular changes the displayed component:

/products

could display:

Products

while:

/contact

could display:

Contact

The Angular application remains running in the browser.

7. Advantages of CSR

Fast navigation after initial load

Once Angular has loaded, navigation between client-side routes can be very responsive.

Rich user experience

CSR works well for highly interactive applications such as:

  • Admin dashboards
  • Banking applications
  • Management systems
  • Forms
  • Internal enterprise applications

Clear frontend/backend separation

You can have:

Angular
    ↓
ASP.NET Core Web API
    ↓
SQL Server

The frontend is responsible for presentation, while the API handles server-side business/data operations.

Reduced HTML-rendering responsibility on the server

The server can focus primarily on APIs rather than generating every page's HTML.

8. Disadvantages of CSR

Initial loading can be slower

The browser may need to download JavaScript before the full UI becomes available.

Download JS
    ↓
Execute Angular
    ↓
Call API
    ↓
Receive data
    ↓
Render page

SEO can require additional consideration

Because meaningful page content may be produced after JavaScript executes, purely client-rendered public pages can be less straightforward for SEO than server-rendered/pre-rendered approaches, although modern search engines can execute JavaScript to varying degrees.

JavaScript dependency

The application relies heavily on browser-side JavaScript.

Larger initial bundle

Large Angular applications can have significant JavaScript bundles unless techniques such as lazy loading and code splitting are used.

9. CSR vs Traditional ASP.NET Core MVC

This distinction is particularly useful.

ASP.NET Core MVC

Browser
   ↓
MVC Controller
   ↓
Razor View
   ↓
Server generates HTML
   ↓
Browser

For example:

public IActionResult Products()
{
    var products = _service.GetProducts();

    return View(products);
}

The server processes the Razor view and generates HTML.

Therefore, the HTML is primarily rendered on the server.

Angular CSR

Browser
   ↓
Angular
   ↓
Web API
   ↓
JSON
   ↓
Angular
   ↓
HTML/UI generated in browser

For example:

this.http.get<Product[]>('/api/products')

Angular receives JSON and renders the UI.

10. Simple Comparison

Feature Angular CSR Traditional MVC
Main rendering location Browser Server
Frontend Angular Razor Views
Server typically returns JSON/API responses HTML
JavaScript importance High Usually lower
SPA navigation Common Usually server navigation
Initial load Can be heavier Often simpler HTML response
Rich interactivity Excellent Requires additional JS

11. Key Points

  • CSR = Client-Side Rendering.
  • Rendering primarily happens in the browser.
  • Angular is commonly used for CSR/SPAs.
  • The browser downloads Angular's JavaScript bundles.
  • Angular executes in the browser.
  • Angular can call ASP.NET Core Web APIs using HttpClient.
  • ASP.NET Core typically returns JSON.
  • Angular converts the data into visible UI.
  • CSR is well suited to interactive applications and dashboards.
  • Lazy loading/code splitting can reduce initial JavaScript cost.
  • CSR is different from SSR, where the server generates the initial rendered HTML.

Easy way to remember

CSR
Client = Browser

CSR → Browser renders
SSR → Server renders

12. Interview Questions and Answers

1. What is Client-Side Rendering?

Answer:
Client-Side Rendering is an approach where JavaScript running in the browser generates and updates the application's UI. Angular commonly uses CSR for Single Page Applications.

2. How does CSR work in Angular?

Answer:
The browser downloads the Angular application and executes its JavaScript. Angular creates components, calls APIs when necessary, receives data such as JSON, and renders the UI in the browser.

3. Where is HTML generated in CSR?

Answer:
The application's meaningful UI is primarily generated dynamically in the browser by JavaScript.

4. What does ASP.NET Core Web API return to Angular?

Answer:
It commonly returns data in JSON format.

this.http.get<Product[]>('/api/products');

Angular then uses that data to render the UI.

5. What is the main advantage of CSR?

Answer:
After the application has loaded, navigation and UI interactions can be fast because Angular can update portions of the page without performing a full browser reload.

6. What is the main disadvantage of CSR?

Answer:
Initial rendering can take longer because the browser must download and execute JavaScript before the application is fully interactive and populated with data.

7. CSR vs SSR?

Answer:

CSR → Browser renders the UI
SSR → Server renders the initial UI

CSR is common for highly interactive SPAs, while SSR can improve initial HTML delivery and support public content/SEO scenarios.

8. Is Angular always CSR?

Answer:
No. Angular supports multiple rendering approaches, including Client-Side Rendering (CSR) and Server-Side Rendering (SSR), as well as prerendering/static generation scenarios.

9. Is CSR suitable for an Angular + ASP.NET Core Web API application?

Answer:
Yes. A common architecture is:

Angular CSR
     ↓
ASP.NET Core Web API
     ↓
SQL Server

Angular handles the browser UI, while ASP.NET Core handles APIs, authentication/authorization enforcement, business logic, and data access.

Interview one-line answer

Client-Side Rendering (CSR) is a rendering approach where the browser downloads and executes JavaScript, such as an Angular application, and dynamically generates the UI on the client side, typically using data retrieved from backend APIs.

Keep Learning - More From This Category

← Back to Articles