Angular SSR with Angular Universal Optimization

What this prompt does

This prompt asks the AI to implement optimized server-side rendering for an Angular [angular_version] app with [page_count] routes. It sets up Angular Universal on [server_runtime], applies incremental hydration for [defer_components], and uses transfer state for [transfer_data] to avoid double-fetching on the client. It assigns a per-route rendering strategy — SSR for [ssr_routes], SSG for [ssg_routes], CSR for [csr_routes] — and prefetches API data in server-side resolvers.

The structure works because SSR mistakes show up as double-fetched data, broken browser-only APIs, and no real speed gain, and this prompt targets each. Transfer state is the lever that actually moves TTFB and FCP by reusing server-fetched data on the client. SEO meta management, per-route JSON-LD, caching with [cache_ttl] TTL plus stale-while-revalidate, performance targets of [ttfb_target]ms TTFB and [fcp_target]ms FCP, and deployment to [deploy_target] with edge caching make it a complete, measurable setup. Incremental hydration for [defer_components] is what stops heavy widgets like charts from blocking interactivity: rather than hydrating the entire page at once, expensive components hydrate only when needed, keeping the main thread free for the content users came to read.

When to use it

• You need an Angular app to render on the server for SEO and faster first paint.
• Your app mixes content types and you want SSR, SSG, and CSR assigned per route.
• You are double-fetching data on hydration and want transfer state to stop it.
• You keep hitting browser-only API errors (window, document) during server render.
• You want per-route JSON-LD and meta tags managed properly for SEO.
• You are deploying to [deploy_target] and want edge caching with sensible TTLs.

Example output

Expect an Angular Universal setup on [server_runtime], incremental hydration config for [defer_components], transfer state for [transfer_data], a per-route strategy map (SSR [ssr_routes], SSG [ssg_routes], CSR [csr_routes]), server-side resolvers, Title/Meta and JSON-LD per route, a caching layer with [cache_ttl] TTL and stale-while-revalidate, and deployment to [deploy_target] — with before/after metrics against [ttfb_target]ms and [fcp_target]ms targets.

Pro tips

• Use transfer state for [transfer_data] aggressively — eliminating double-fetch is the single biggest TTFB/FCP win in most SSR migrations.
• Assign rendering strategy per route deliberately: static [ssg_routes] like blog and docs don't need SSR, and over-SSR-ing wastes server cycles.
• Guard browser-only APIs with isPlatformBrowser rather than scattering typeof window checks; the model should generate this consistently.
• Set [cache_ttl] to match content volatility — long TTL for static pages, stale-while-revalidate for dynamic ones, not a single blanket value.
• Measure before/after with real targets ([ttfb_target]ms, [fcp_target]ms); without baseline numbers you can't tell if SSR actually helped.
• Defer hydration only for genuinely heavy [defer_components] like charts; deferring everything can hurt perceived interactivity.
• Prefetch API data in server-side resolvers so the server render has real content, then pass it through transfer state — otherwise you render an empty shell on the server and gain nothing for SEO.