/angular-ssr

Implement Angular SSR with hydration, TransferState caching, and per-route render modes. Use when configuring Angular Universal SSR, client hydration, static prerendering, or preventing double-fetching.

hoangnguyen0403@hoangnguyen0403

GitHub

From plugin

agent-skills-standard

538200 skills1 MCP

Install

$ npx -y skills add hoangnguyen0403/agent-skills-standard --skill angular-ssr --agent claude-code

How it fires

How this skill gets triggered: by you, by Claude, or both.

Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.
You can call itInvoke it directly when you want it.
Slash command/angular-ssr

Context preview

The summary Claude sees to decide when to auto-load this skill.

Implement Angular SSR with hydration, TransferState caching, and per-route render modes. Use when configuring Angular Universal SSR, client hydration, static prerendering, or preventing double-fetching.

SKILL.md

angular-ssr.SKILL.md

name: angular-ssr
description: Implement Angular SSR with hydration, TransferState caching, and per-route render modes. Use when configuring Angular Universal SSR, client hydration, static prerendering, or preventing double-fetching.
metadata:
  triggers:
    files:
    - '**/*.server.ts'
    - 'server.ts'
    keywords:
    - hydration
    - transferState
    - afterNextRender
    - isPlatformServer
    - RenderMode

SSR (Server-Side Rendering)

Priority: P2 (MEDIUM)

1. Enable Hydration

Run `ng add @angular/ssr`.
Add `provideClientHydration(withEventReplay())` to `app.config.ts` providers.

See [hydration examples](references/hydration.md) for app config and hydration setup.

2. Guard Browser-Only Code

Use `afterNextRender(() => { /* window access */ })` for one-time browser-only code.
For recurring checks, inject `PLATFORM_ID` and use `isPlatformBrowser(platformId)`.

3. Prevent Double-Fetching

Use `withHttpTransferCacheOptions()` or manual `TransferState` to cache server responses for client replay.

4. Configure Render Modes (Angular 17+)

Export `ServerRoute[]` in `app.routes.server.ts`:

**RenderMode.Prerender** — Static HTML at build time (blogs, marketing).
**RenderMode.Server** — Dynamic SSR per request (user-specific pages).
**RenderMode.Client** — Client-only SPA (authenticated dashboards).

5. Incremental Hydration (Angular 19+)

Defer hydration with `@defer (hydrate on viewport)`.
Triggers: `viewport`, `interaction`, `idle`, `timer(ms)`, `immediate`, `never`.
Add `withEventReplay()` to capture user events before hydration completes.

Anti-Patterns

**No direct window/document access**: Use `afterNextRender()` or `PLATFORM_ID` check.
**No double-fetching**: Use `withHttpTransferCacheOptions()` or `TransferState`.
**No SSR for auth-gated pages**: Set `RenderMode.Client` for authenticated dashboards.