Angular SSR (Server-Side Rendering) Explained Clearly

SSR means the server renders HTML first, so the browser receives a ready page.

## Why SSR matters

### 1) SEO
Search engines can read server-rendered HTML better than an empty page.

### 2) Faster first paint
Users see content earlier.

## CSR vs SSR (simple)

```mermaid
flowchart LR
  A[CSR] --> B[Browser downloads JS]
  B --> C[JS builds HTML]
  C --> D[User sees content]

  E[SSR] --> F[Server builds HTML]
  F --> G[Browser shows HTML quickly]
  G --> H[JS hydrates and becomes interactive]
```

## What "hydration" means

Hydration means Angular takes over the already-rendered HTML and adds interactivity (clicks, inputs).

## Biggest SSR gotcha

Do not access browser-only APIs directly:
- window
- document
- localStorage

Because they do not exist on the server.

Better: check platform or use injection tokens.

> Next: SSR safe patterns (Platform checks and TransferState).