Angular SsrSAFE

A collection of Agent Skills Standard and Best Practice for Programming Languages, Frameworks that help our AI Agent follow best practies on frameworks and programming laguages

The instruction file, verbatim from the audited commit — this is the text the model reads, and the surface the audit's instruction layer examines. Quoted here so you can judge it without cloning anything.

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

## References

- [Hydration](references/hydration.md)

SAFEgrade B · trust 89/100 Nothing in the source contradicts what it says it does. Grade A is reserved for packages that have also passed the behavioural sandbox.

What the source does

Filesystem

none-observed

Network

none-observed

Shell

none-observed

Dependencies

pinned

Secrets in source

none-found

Findings (0)

No findings outside the package's declared scope.

Gates applied: no_behavioural_pass.