d48cda4081
CI / Test (ubuntu-latest, Node 18.x, bun) (push) Failing after 15m1s
CI / Test (ubuntu-latest, Node 18.x, npm) (push) Failing after 15m1s
CI / Test (ubuntu-latest, Node 18.x, pnpm) (push) Failing after 15m1s
CI / Test (ubuntu-latest, Node 18.x, yarn) (push) Failing after 15m1s
CI / Test (ubuntu-latest, Node 20.x, bun) (push) Failing after 17m13s
CI / Test (ubuntu-latest, Node 20.x, npm) (push) Failing after 18m42s
CI / Test (ubuntu-latest, Node 20.x, pnpm) (push) Failing after 15m0s
CI / Test (ubuntu-latest, Node 20.x, yarn) (push) Failing after 49m44s
CI / Test (ubuntu-latest, Node 22.x, bun) (push) Failing after 51m55s
CI / Test (ubuntu-latest, Node 22.x, pnpm) (push) Failing after 21m57s
CI / Test (ubuntu-latest, Node 22.x, npm) (push) Failing after 37m39s
CI / Test (ubuntu-latest, Node 22.x, yarn) (push) Failing after 34m7s
CI / Validate Components (push) Failing after 37m15s
CI / Python Tests (push) Failing after 10m1s
CI / Security Scan (push) Failing after 10m1s
CI / Lint (push) Failing after 17m12s
CI / Coverage (push) Failing after 20m19s
CI / Test (macos-latest, Node 18.x, bun) (push) Has been cancelled
CI / Test (macos-latest, Node 18.x, npm) (push) Has been cancelled
CI / Test (macos-latest, Node 18.x, pnpm) (push) Has been cancelled
CI / Test (macos-latest, Node 18.x, yarn) (push) Has been cancelled
CI / Test (windows-latest, Node 18.x, npm) (push) Has been cancelled
CI / Test (windows-latest, Node 18.x, pnpm) (push) Has been cancelled
CI / Test (windows-latest, Node 18.x, yarn) (push) Has been cancelled
CI / Test (macos-latest, Node 20.x, bun) (push) Has been cancelled
CI / Test (macos-latest, Node 20.x, npm) (push) Has been cancelled
CI / Test (macos-latest, Node 20.x, pnpm) (push) Has been cancelled
CI / Test (macos-latest, Node 20.x, yarn) (push) Has been cancelled
CI / Test (windows-latest, Node 20.x, npm) (push) Has been cancelled
CI / Test (windows-latest, Node 20.x, pnpm) (push) Has been cancelled
CI / Test (windows-latest, Node 20.x, yarn) (push) Has been cancelled
CI / Test (macos-latest, Node 22.x, bun) (push) Has been cancelled
CI / Test (macos-latest, Node 22.x, npm) (push) Has been cancelled
CI / Test (macos-latest, Node 22.x, pnpm) (push) Has been cancelled
CI / Test (macos-latest, Node 22.x, yarn) (push) Has been cancelled
CI / Test (windows-latest, Node 22.x, npm) (push) Has been cancelled
CI / Test (windows-latest, Node 22.x, pnpm) (push) Has been cancelled
CI / Test (windows-latest, Node 22.x, yarn) (push) Has been cancelled
1.8 KiB
1.8 KiB
Rendering Strategies
Angular supports multiple rendering strategies to optimize for SEO, performance, and interactivity.
1. Client-Side Rendering (CSR)
Default Strategy. Content is rendered entirely in the browser.
- Use case: Interactive dashboards, internal tools.
- Pros: Simplest to configure, low server cost.
- Cons: Poor SEO, slower initial content visibility (must wait for JS).
2. Static Site Generation (SSG / Prerendering)
Content is pre-rendered into static HTML files at build time.
- Use case: Marketing pages, blogs, documentation.
- Pros: Fastest initial load, excellent SEO, CDN-friendly.
- Cons: Requires rebuild for content updates, not for user-specific data.
3. Server-Side Rendering (SSR)
Content is rendered on the server for the initial request. Subsequent navigations happen client-side (SPA style).
- Use case: E-commerce product pages, news sites, personalized dynamic content.
- Pros: Excellent SEO, fast initial content visibility.
- Cons: Requires a server (Node.js), higher server cost/latency.
Hydration
Hydration is the process of making server-rendered HTML interactive in the browser.
- Full Hydration: The entire app becomes interactive at once.
- Incremental Hydration: (Advanced) Parts become interactive as needed using
@deferblocks. - Event Replay: Captures and replays user events that happened before hydration finished.
Decision Matrix
| Requirement | Strategy |
|---|---|
| SEO + Static Content | SSG |
| SEO + Dynamic Content | SSR |
| No SEO + High Interactivity | CSR |
| Mixed | Hybrid (Route-based) |