SSR vs CSR mental model in Angular - Performance Comparison

Performance: SSR vs CSR mental model

HIGH IMPACT

This concept affects how fast the user sees the page content and how quickly the page responds to user actions.

Rendering a web page quickly and responsively

Angular

Angular app uses SSR with Angular Universal: server renders initial HTML with content, sends to browser, then client bootstraps Angular app.

Content appears immediately from server HTML, improving perceived load speed and LCP.

📈 Performance GainReduces LCP by up to several seconds on slow connections; improves user experience.

Rendering a web page quickly and responsively

Angular

Angular app fully rendered on client side only (CSR): bootstrap Angular app in main.ts, fetch data and render all components in browser.

Delays showing meaningful content because browser must download, parse, and run JavaScript before anything appears.

📉 Performance CostBlocks LCP until JS loads and runs; can add 1-3 seconds delay on slow networks.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
CSR only	Many DOM operations after JS loads	Multiple reflows during JS execution	High paint cost on initial load	[X] Bad for LCP
SSR with hydration	Initial DOM from server, fewer JS DOM ops initially	Single reflow on initial paint	Lower paint cost initially	[OK] Good balance
Pure static HTML	Minimal DOM ops	No reflows from JS	Lowest paint cost	[OK] Best for LCP but no interactivity

Rendering Pipeline

In CSR, browser downloads JS, parses, executes, then renders content. In SSR, server sends ready HTML, browser renders immediately, then hydrates JS for interactivity.

→Network

→HTML Parsing

→JavaScript Execution

→Layout

→Paint

⚠️ BottleneckJavaScript Execution delays rendering in CSR; Network latency affects SSR initial HTML delivery.

Core Web Vital Affected

LCP and INP

This concept affects how fast the user sees the page content and how quickly the page responds to user actions.

Optimization Tips

1Use SSR to improve initial content load speed and LCP.

2CSR delays content until JavaScript runs, increasing load time.

3Combine SSR with client hydration for best load and interactivity balance.

Performance Quiz - 3 Questions

Which rendering method usually shows content to the user faster?

A Both are equally fast

B Client-side rendering (CSR)

C Server-side rendering (SSR)

D Neither shows content quickly

DevTools: Performance

How to check: Record page load, look for 'First Contentful Paint' and 'Time to Interactive' timings; compare SSR vs CSR loads.

What to look for: Shorter time to first paint and interactive indicates better SSR performance; long JS execution blocks indicate CSR delays.