agentskills.codes
AN

angular-ssr

by li-lanceCodingSource

Guides for Angular SSR implementation, including hydration and render modes.

FrontendPerformanceAngular

Install

mkdir -p .claude/skills/angular-ssr && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/10795" && unzip -o skill.zip -d .claude/skills/angular-ssr && rm skill.zip

Installs to .claude/skills/angular-ssr

Activation

This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.

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. (triggers: **/*.server.ts, server.ts, hydration, transferState, afterNextRender, isPlatformServer, RenderMode)
313 chars✓ has a “when” triggerlonger than Claude Code's old 250-char listing cap (fine on current versions)
Intermediate

Key capabilities

  • →Enable hydration
  • →Configure SSR render modes
  • →Implement TransferState caching
  • →Guard browser-only code

How it works

Configures Angular SSR, hydration, and render modes to optimize server-side rendering.

Inputs & outputs

You give it
Angular SSR configuration request
You get back
SSR-enabled Angular application

When to use angular-ssr

  • →Enable hydration in Angular
  • →Configure server-side rendering modes
  • →Implement TransferState caching

About this skill

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

When not to use it

  • →Client-only SPA development

Prerequisites

Angular

Limitations

  • →No direct window/document access allowed

How it compares

Provides structured SSR configuration instead of manual setup.

Compared to similar skills

angular-ssr side by side with the closest alternatives in the catalog.

SkillInstallsUpdatedSafetyDifficulty
angular-ssr (this skill)04moNo flagsIntermediate
angular1004moReviewAdvanced
angular-best-practices213moNo flagsAdvanced
angular-state-management84moNo flagsIntermediate

Try saying

Example prompts that trigger this skill in your AI assistant.

More by li-lance

View all by li-lance →

Android Dependency Injection (Hilt)

li-lance

Standards for Hilt Setup, Scoping, and Modules

00

Android Navigation

li-lance

Standards for Jetpack Navigation Compose (Type-safe)

00

php-concurrency

li-lance

Implement concurrency and non-blocking I/O in modern PHP. Use when implementing concurrent requests, async processing, or non-blocking I/O in PHP. (triggers: **/*.php, Fiber, suspend, resume, non-blocking, async)

00

react-performance

li-lance

Optimize React rendering, bundle size, and data fetching performance. Use when optimizing React rendering performance, reducing re-renders, or improving bundle size. (triggers: **/*.tsx, **/*.jsx, waterfall, bundle, lazy, suspense, dynamic)

00

common-workflow-writing

li-lance

Rules for writing concise, token-efficient workflow and skill files. Prevents over-building that requires costly optimization passes. Use when creating or editing workflow files, SKILL.md files, or new skill definitions. (triggers: .agent/workflows/*.md, SKILL.md, create workflow, write workflow, ne

00

common-security-standards

li-lance

Enforce universal security protocols for safe, resilient software. Use when implementing authentication, encryption, authorization, input validation, secret management, or any security-sensitive feature across any language or framework. (triggers: **/*.ts, **/*.tsx, **/*.go, **/*.dart, **/*.java, **

00

You might also like

angular

sickn33

Modern Angular (v20+) expert with deep knowledge of Signals, Standalone Components, Zoneless applications, SSR/Hydration, and reactive patterns. Use PROACTIVELY for Angular development, component architecture, state management, performance optimization, and migration to modern patterns.

100129

angular-best-practices

sickn33

Angular performance optimization and best practices guide. Use when writing, reviewing, or refactoring Angular code for optimal performance, bundle size, and rendering efficiency.

2192

angular-state-management

sickn33

Master modern Angular state management with Signals, NgRx, and RxJS. Use when setting up global state, managing component stores, choosing between state solutions, or migrating from legacy patterns.

823

angular-ui-patterns

sickn33

Modern Angular UI patterns for loading states, error handling, and data display. Use when building UI components, handling async data, or managing component states.

427

angular-modernization

bitwarden

Modernizes Angular code such as components and directives to follow best practices using both automatic CLI migrations and Bitwarden-specific patterns. YOU must use this skill when someone requests modernizing Angular code. DO NOT invoke for general Angular discussions unrelated to modernization.

422

angular-routing

analogjs

Implement routing in Angular v20+ applications with lazy loading, functional guards, resolvers, and route parameters. Use for navigation setup, protected routes, route-based data loading, and nested routing. Triggers on route configuration, adding authentication guards, implementing lazy loading, or reading route parameters with signals.

14

Search skills

Search the agent skills registry