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. (triggers: **/*.server.ts, server.ts, hydration, transferState, afterNextRender, isPlatformServer, RenderMode)
Best use case
angular-ssr is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
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)
Teams using angular-ssr should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/angular-ssr/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How angular-ssr Compares
| Feature / Agent | angular-ssr | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
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)
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# 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)Related Skills
angular-tooling
Angular CLI usage, code generation, build configuration, and bundle optimization. Use when creating Angular projects, generating components/services/guards, configuring builds, running tests, or analyzing bundles. (triggers: angular.json, ng generate, ng build, ng serve, ng test, ng add, angular cli, bundle analysis)
angular-testing
Write Angular component tests using TestBed, ComponentHarness, and HttpTestingController with proper signal input handling. Use when writing component tests, mocking HTTP calls, or testing signal inputs. (triggers: **/*.spec.ts, TestBed, ComponentFixture, TestHarness, provideHttpClientTesting)
angular-style-guide
Naming conventions, file structure, and coding standards for Angular projects. Use when naming Angular files, organizing project structure, or following Angular style guide. (triggers: angular style, naming convention, file structure, angular-style-guide)
angular-state-management
Implement application state with Angular Signals, computed derivations, and NgRx Signal Store. Use when implementing reactive state with signal(), computed(), effect(), or @ngrx/signals in Angular. (triggers: **/*.store.ts, **/state/**, angular signals, signal store, computed, effect, linkedSignal)
angular-security
Harden Angular apps against XSS, CSP violations, and unauthorized access. Use when implementing XSS protection, Content Security Policy, or auth guards in Angular. (triggers: DomSanitizer, innerHTML, bypassSecurityTrust, CSP, angular security, route guard)
angular-rxjs-interop
Bridge Observables and Signals using toSignal and toObservable in Angular. Use when converting between RxJS Observables and Angular Signals. (triggers: toSignal, toObservable, takeUntilDestroyed, rxjs angular)
angular-routing
Configure Angular Router with lazy-loaded routes, functional guards, and component input binding. Use when defining routes, lazy-loading features, creating route guards, or setting up resolvers. (triggers: *.routes.ts, angular router, loadComponent, canActivate, resolver)
angular-performance
Optimization techniques including OnPush, @defer, and Image Optimization. Use when optimizing Angular rendering, deferring blocks, or improving Core Web Vitals. (triggers: ChangeDetectionStrategy.OnPush, @defer, NgOptimizedImage, runOutsideAngular, OnPush)
angular-http-client
Integrate HttpClient, Interceptors, and API interactions in Angular. Use when integrating HttpClient, writing interceptors, or handling API calls in Angular. (triggers: **/*.service.ts, **/*.interceptor.ts, HttpClient, HttpInterceptorFn, withInterceptors, httpResource, resource)
angular-forms
Build typed reactive forms with strict FormGroup typing, custom validators, and nonNullable controls in Angular. Use when implementing typed reactive forms, custom validators, or form control patterns. (triggers: FormBuilder, FormGroup, FormControl, Validators, reactive forms, typed forms)
angular-directives-pipes
Compose HostDirectives and Pure Pipes in Angular. Use when creating attribute directives with HostDirectives or writing pure pipes in Angular. (triggers: **/*.directive.ts, **/*.pipe.ts, hostDirectives, PipeTransform, pure)
angular-dependency-injection
Configure DI, inject() usage, and providers in Angular. Use when configuring Angular dependency injection, using inject(), or defining providers. (triggers: **/*.service.ts, angular inject, providedIn, injection token, provideAppInitializer)