🎯

angular-ssr

🎯Skill

from analogjs/angular-skills

What it does

Angular skills for building signal-based forms with Angular v21+'s Signal Forms API, including schema-based validation, two-way binding, and dynamic form patterns.

Overview

Angular-ssr is a Claude Code skill that provides comprehensive guidance for implementing server-side rendering, hydration, and prerendering in Angular v20+ using @angular/ssr. It covers SSR setup, render mode configuration, incremental hydration strategies, and handling browser-only APIs in server-rendered applications.

Key Features

Render Mode Configuration - Three render modes (Prerender for static pages, Server for dynamic SSR, Client for SPA) with per-route configuration via ServerRoute[]
Incremental Hydration - Defer hydration of specific components using @defer (hydrate on viewport) for optimized client-side performance
SSR Setup Automation - Complete setup via ng add @angular/ssr with automatic generation of server.ts, main.server.ts, and server config
Browser API Safety - Patterns for handling browser-only APIs (window, document, localStorage) in SSR-compatible code using isClient checks
Prerendering Support - Static HTML generation at build time for marketing pages, blogs, and other content-heavy routes

Who is this for?

This skill is designed for Angular developers working with Angular v20+ who need to implement server-side rendering for improved SEO, faster initial loads, and better user experience. It is especially useful for teams migrating existing Angular SPAs to SSR or building new Angular applications that require a mix of static, server-rendered, and client-only pages.

📦

Same repository

analogjs/angular-skills(10 items)

angular-ssr

Installation

Vibe Index InstallInstalls to .claude/skills/ - auto-recognized by Claude Code

npx vibeindex add analogjs/angular-skills --skill angular-ssr

skills.sh Install⚠ Installs to .agents/skills/ - may not be auto-recognized by Claude Code

npx skills add analogjs/angular-skills --skill angular-ssr

Manual InstallCopy SKILL.md content and save to the path below

~/.claude/skills/angular-ssr/SKILL.md

SKILL.md

2,594Installs

245

Last UpdatedJan 24, 2026

View on GitHub Back to Skills

More from this repository9

🎯

angular-component🎯Skill

An Angular v20+ component skill from the analogjs/angular-skills collection, teaching AI coding agents modern standalone component patterns with signal inputs/outputs, OnPush change detection, and native control flow.

🎯

angular-signals🎯Skill

Angular v20+ Signals API best practices for reactive state management, computed values, and effect handling.

🎯

angular-forms🎯Skill

Angular skills for building signal-based forms with Angular v21+'s Signal Forms API, including schema-based validation, two-way binding, and dynamic form patterns.

🎯

angular-routing🎯Skill

Covers Angular routing patterns including lazy loading, route guards, resolvers, nested routes, and navigation strategies for Angular v20+

🎯

angular-http🎯Skill

Covers Angular HttpClient patterns including interceptors, error handling, request/response transformation, and API communication best practices

🎯

angular-di🎯Skill

Covers Angular v20+ dependency injection using inject(), injection tokens, and provider configuration for service architecture, managing singleton vs scoped services, and understanding the DI hierarchy.

🎯

angular-directives🎯Skill

Covers Angular directive patterns including custom attribute and structural directives, DOM manipulation, and component behavior extension

🎯

angular-testing🎯Skill

Angular skills for building signal-based forms with Angular v21+'s Signal Forms API, including schema-based validation, two-way binding, and dynamic form patterns.

🎯

angular-tooling🎯Skill

Covers Angular development tooling including Angular CLI, build optimization, testing configuration, and project scaffolding for Angular v20+