mcpbeat

Angular Ssr

hoangnguyen0403/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.

2k tokens
context cost
the whole folder, loaded on every use
3
files
instructions only
0
copies elsewhere
how many repositories repackaged it
536
stars on the repo
on the repository, not the skill itself

Install

one command, takes just this skill from the repository 
npx skills add https://github.com/HoangNguyen0403/agent-skills-standard --skill angular-ssr

What comes with it

5 760 bytes besides the instruction
evals/evals.json
references/hydration.md

The instruction itself

9 sections, as written by the author

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 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.

References

  • Hydration

How to use it

Copy the folder

Take hoangnguyen0403/angular-ssr from the repository into ~/.claude/skills for personal use, or into .claude/skills inside a project.

Check the name does not clash

The agent identifies a skill by the name field in its header. Two skills with the same name cannot sit side by side — one of them will be ignored.