wehub-resource-sync
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
45 lines
1.8 KiB
Markdown
45 lines
1.8 KiB
Markdown
# 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 `@defer` blocks.
|
|
- **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) |
|