angular-ssr_skill

Overview

This skill implements server-side rendering, hydration, and prerendering for Angular v20+ using @angular/ssr. It guides setup, render-mode configuration, hydration strategies (including incremental hydration and event replay), and patterns for making browser-only code safe on the server. Use it to add SSR to existing apps, reduce time-to-first-byte, and pre-generate static pages where appropriate.

How this skill works

The skill adds the @angular/ssr package and bootstraps a server entry that renders Angular on the server and serves client assets. It configures server routes with per-route RenderMode (Prerender, Server, Client) and supports getPrerenderParams for dynamic prerendering. Hydration is provided via provideClientHydration with options for event replay and HTTP transfer caching, while browser-only APIs are isolated with platform checks and lifecycle helpers like afterNextRender.

When to use it

• Add SSR to improve SEO and initial render performance for public pages.
• Use prerendering for marketing, blog, and static product pages at build time.
• Use dynamic SSR for user-specific content or pages that require per-request data.
• Defer hydration for heavy interactive components to improve perceived performance.
• Make code SSR-compatible when you encounter window/document runtime errors on server builds.

Best practices

• Define serverRoutes with explicit RenderMode per route to mix prerender, SSR, and SPA pages.
• Use getPrerenderParams to enumerate dynamic route params and set a sensible fallback for non-prerendered paths.
• Wrap browser-only logic with isPlatformBrowser and use afterNextRender/afterRender for DOM work.
• Enable event replay to capture user interactions that occur before hydration finishes.
• Use TransferState or withHttpTransferCacheOptions to avoid duplicate HTTP requests during hydration.

Example use cases

• Add @angular/ssr to an existing Angular app to generate server HTML and hydrate on the client.
• Prerender marketing pages and product listing pages at build time, while SSR product detail pages per request.
• Defer hydration of comments, charts, and recommendation widgets to viewport or interaction triggers.
• Provide a WINDOW or LOCAL_STORAGE injection token that returns null on server and the real API in the browser.
• Deploy server bundle to a Node host that serves static browser assets and uses CommonEngine to render pages.