Backend interview prep

Start

Angular SSR vs CSR

Learn Server-Side Rendering (SSR) vs Client-Side Rendering (CSR) in Angular, including rendering lifecycle, Angular SSR, hydration, SEO, performance, deployment, enterprise use cases, and interview questions.

Rendering is the process of converting an Angular application into HTML that users can view in a browser.

Angular supports two major rendering strategies:

  • Client-Side Rendering (CSR)
  • Server-Side Rendering (SSR)

Choosing the correct rendering strategy directly affects:

  • Performance
  • SEO
  • Initial page load
  • User experience
  • Scalability
  • Infrastructure requirements

Modern Angular also supports hydration, combining the benefits of SSR with a fully interactive client-side application.

Table of Contents

  1. What is Rendering?
  2. Client-Side Rendering (CSR)
  3. Server-Side Rendering (SSR)
  4. Hydration
  5. CSR vs SSR Comparison
  6. Rendering Lifecycle
  7. SEO Comparison
  8. Performance Comparison
  9. Enterprise Banking Example
  10. Best Practices
  11. Common Mistakes
  12. Top 10 Interview Questions
  13. Interview Cheat Sheet
  14. Summary

What is Rendering?

Rendering converts Angular components and templates into HTML that browsers display.

Rendering can occur:

  • In the browser (CSR)
  • On the server (SSR)

Rendering Overview

flowchart LR

Browser

Browser --> CSR

Browser --> SSR

CSR --> HTML

SSR --> HTML

What is Client-Side Rendering (CSR)?

In Client-Side Rendering, the browser downloads the Angular application first.

After downloading:

  1. JavaScript executes
  2. Angular starts
  3. Components render
  4. HTML is generated
  5. User sees the page

CSR Workflow

flowchart LR

Browser

Browser --> DownloadApp

DownloadApp --> ExecuteJavaScript

ExecuteJavaScript --> RenderComponents

RenderComponents --> DisplayPage

CSR Request Flow

Browser

↓

Download HTML

↓

Download JavaScript

↓

Angular Starts

↓

Render UI

↓

Interactive Application

Advantages of CSR

  • Rich user interactions
  • Excellent SPA experience
  • Lower server load
  • Faster navigation after initial load
  • Simpler infrastructure

Disadvantages of CSR

  • Slower first page load
  • JavaScript required
  • Poor SEO for some crawlers
  • Larger initial JavaScript download

What is Server-Side Rendering (SSR)?

Server-Side Rendering generates HTML on the server before sending it to the browser.

The browser receives a fully rendered page immediately.

After the page loads, Angular hydrates the application and makes it interactive.

SSR Workflow

flowchart LR

Browser

Browser --> Server

Server --> RenderHTML

RenderHTML --> Browser

Browser --> Hydration

SSR Request Flow

Browser

↓

Request Page

↓

Server Renders HTML

↓

HTML Sent

↓

Browser Displays Page

↓

Angular Hydrates

↓

Interactive Application

Advantages of SSR

  • Faster initial page load
  • Better SEO
  • Improved Core Web Vitals
  • Better social media previews
  • Better performance on slow devices

Disadvantages of SSR

  • Increased server workload
  • More complex deployment
  • Higher infrastructure cost
  • Requires Node.js server

What is Hydration?

Hydration attaches Angular application logic to HTML that was already rendered by the server.

Instead of rendering everything again, Angular:

  • Reuses server-rendered HTML
  • Attaches event listeners
  • Restores application state
  • Makes the page interactive

Hydration Architecture

flowchart LR

Server

Server --> HTML

HTML --> Browser

Browser --> Hydration

Hydration --> InteractiveApp

Rendering Lifecycle

flowchart TD

User

User --> Browser

Browser --> Server

Server --> HTML

HTML --> Browser

Browser --> Hydration

Hydration --> UserInteraction

CSR vs SSR

Feature CSR SSR
HTML Generated Browser Server
Initial Load Slower Faster
SEO Limited Excellent
First Contentful Paint Slower Faster
Time to Interactive Good after load Good with Hydration
Server Load Low Higher
Infrastructure Simple More Complex
SPA Navigation Excellent Excellent after Hydration

Performance Comparison

Metric CSR SSR
First Contentful Paint Slower Faster
Largest Contentful Paint Slower Faster
SEO Limited Better
Initial Rendering Browser Server
JavaScript Execution More Less before first render

SEO Comparison

Search engines prefer receiving fully rendered HTML.

SSR provides:

  • Complete HTML
  • Better indexing
  • Faster crawling
  • Better metadata rendering
  • Improved social sharing previews

Ideal use cases:

  • Marketing websites
  • Documentation
  • Blogs
  • Product catalogs
  • Public landing pages

CSR Architecture

flowchart LR

Browser

Browser --> HTML

HTML --> JavaScript

JavaScript --> Angular

Angular --> UI

SSR Architecture

flowchart LR

Browser

Browser --> Server

Server --> RenderedHTML

RenderedHTML --> Browser

Browser --> Hydration

Angular SSR

Modern Angular provides built-in SSR support.

Typical architecture

Browser

↓

Angular SSR Server

↓

Rendered HTML

↓

Browser

↓

Hydration

Angular SSR integrates with modern Angular applications and supports standalone APIs.

When to Use CSR

CSR works well for:

  • Internal dashboards
  • Banking portals
  • Admin panels
  • Enterprise applications
  • Authenticated applications

Example

Employee Portal

Customer Dashboard

Admin Console

SEO is generally less important because users authenticate before accessing these pages.

When to Use SSR

SSR is ideal for:

  • Public websites
  • Product pages
  • Company websites
  • Blogs
  • Documentation
  • E-commerce

Example

Landing Page

Pricing

Documentation

Product Catalog

Hybrid Rendering

Many enterprise applications use both approaches.

Example

Landing Page

↓

SSR

↓

Login

↓

CSR Dashboard

This provides:

  • Excellent SEO
  • Fast landing pages
  • Rich authenticated experience

Enterprise Banking Example

Public Website

↓

SSR

↓

Login

↓

CSR Banking Portal

↓

Payments

↓

Accounts

↓

Investments

Customers receive fast public pages while authenticated dashboards benefit from CSR.

Enterprise Architecture

flowchart TD

Customer

Customer --> LandingPage

LandingPage --> SSR

SSR --> Login

Login --> CSRPortal

CSRPortal --> Payments

CSRPortal --> Accounts

CSRPortal --> Reports

Deployment Architecture

flowchart LR

Browser

Browser --> LoadBalancer

LoadBalancer --> AngularSSR

AngularSSR --> BackendAPI

SSR applications generally require a server capable of rendering Angular pages before responding.

Performance Best Practices

Practice Recommendation
Public Pages SSR
Dashboards CSR
Hydration Enabled
Lazy Loading Yes
Standalone Components Yes
CDN Yes
Image Optimization Yes
Compression Yes

Common Mistakes

Using SSR Everywhere

Not every page benefits from SSR.

Authenticated dashboards often perform well with CSR.

Ignoring Hydration

Without hydration, server-rendered pages cannot become fully interactive.

Blocking Server Rendering

Avoid slow synchronous operations during server-side rendering.

Rendering Browser APIs on the Server

Objects such as:

  • window
  • document
  • localStorage

are unavailable during server-side rendering.

Always guard browser-specific logic.

Forgetting SEO Metadata

SSR should render complete metadata for search engines and social platforms.

SSR vs CSR Best Practices

Practice Recommendation
Marketing Pages SSR
Documentation SSR
Blogs SSR
Internal Dashboards CSR
Banking Portal CSR
Landing Pages SSR
Hydration Yes
Lazy Loading Yes

Advantages

Benefit SSR CSR
SEO Excellent Limited
First Page Load Faster Slower
SPA Navigation Good Excellent
Infrastructure Simplicity No Yes
Public Websites Excellent Fair
Internal Applications Good Excellent

Top 10 SSR vs CSR Interview Questions

1. What is Client-Side Rendering (CSR)?

Answer

CSR renders the Angular application in the browser after downloading the JavaScript bundles. The browser executes Angular, generates HTML, and makes the application interactive.

2. What is Server-Side Rendering (SSR)?

Answer

SSR renders HTML on the server before sending it to the browser. Users receive a fully rendered page immediately, and Angular hydrates it afterward.

3. What is Hydration?

Answer

Hydration is the process of attaching Angular's event handlers and application logic to HTML that was already rendered by the server, avoiding a full re-render.

4. Why is SSR better for SEO?

Answer

Search engines receive fully rendered HTML with metadata, making indexing, crawling, and social sharing more reliable.

5. Why is CSR commonly used for enterprise dashboards?

Answer

Authenticated dashboards prioritize rich interactivity over SEO. Once loaded, CSR provides smooth client-side navigation and a responsive user experience.

6. Does SSR replace CSR?

Answer

No. SSR and CSR solve different problems. Many enterprise applications use SSR for public pages and CSR for authenticated sections.

7. What are the disadvantages of SSR?

Answer

SSR increases server workload, requires additional infrastructure, and introduces more deployment complexity compared to CSR.

8. Which browser APIs require special handling with SSR?

Answer

Browser-only APIs such as window, document, localStorage, and sessionStorage are unavailable during server-side rendering and should only be accessed in browser-specific code.

9. When should you use SSR?

Answer

Use SSR for public-facing content such as landing pages, blogs, documentation, marketing sites, and e-commerce product pages where SEO and fast first paint are important.

10. What are Angular SSR best practices?

Answer

  • Use SSR for public pages
  • Use CSR for authenticated applications
  • Enable hydration
  • Apply lazy loading
  • Optimize images
  • Configure caching
  • Avoid browser-only APIs during server rendering
  • Monitor Core Web Vitals

Interview Cheat Sheet

Topic Recommendation
Public Website SSR
Internal Dashboard CSR
SEO SSR
Hydration Enabled
Initial Page Load SSR
SPA Navigation CSR
Browser APIs Guard During SSR
Infrastructure Node.js for SSR
Enterprise Hybrid Rendering
Angular 20 SSR + Hydration

Summary

Angular supports both Client-Side Rendering (CSR) and Server-Side Rendering (SSR) to meet different application requirements. CSR provides an excellent experience for highly interactive applications such as dashboards and enterprise portals, while SSR improves SEO, initial page load performance, and user experience for public-facing websites. Modern Angular enhances SSR with hydration, allowing server-rendered pages to become fully interactive without unnecessary re-rendering. Many enterprise applications adopt a hybrid approach, using SSR for public content and CSR for authenticated experiences.

Key Takeaways

  • ✅ CSR renders the application in the browser.
  • ✅ SSR renders HTML on the server before sending it to the client.
  • ✅ Hydration makes server-rendered pages interactive.
  • ✅ SSR improves SEO and initial page load performance.
  • ✅ CSR provides an excellent experience for authenticated dashboards.
  • ✅ Hybrid rendering combines the strengths of SSR and CSR.
  • ✅ Guard browser-only APIs when using SSR.
  • ✅ Combine SSR with lazy loading and optimized assets for best results.
  • ✅ Modern Angular provides built-in support for SSR and hydration.
  • ✅ SSR vs CSR is a frequently asked Angular architecture interview topic.

Next Article

➡️ 134-Hydration-in-Angular-QA.md