Single-Page Applications (SPAs) - and beyond

Angular still shines at classic SPA delivery: fast client-side navigation, rich interactivity, and a smooth,
app-like feel. But modern Angular doesn’t stop there. You can opt-in to hybrid rendering-mixing CSR
(client-side rendering), SSR (server-side rendering), and pre-rendering/SSG-on a per-route basis. That
means you can render marketing pages statically at build time, user-specific dashboards on the server at
request time, and keep the rest purely client-side. One app, three rendering modes, chosen where they fit best
for performance, SEO, and cost. (angular.dev)

Getting started is intentional and simple. Create a project with SSR enabled (--ssr) or add it to an
existing workspace; Angular wires up the server build, route configuration, and hydration plumbing for you. (angular.dev)

With SSR in play, Angular sends HTML on first load, then hydrates that HTML in the browser-re-using the
server-rendered DOM and attaching behaviour without re-painting the page. Hydration improves Core Web Vitals
(LCP, CLS) and eliminates the “flicker” that pure CSR can show on first paint. You enable it via a single
provider (the CLI scaffolds this for you), and you can layer on Event Replay so clicks typed before
hydration aren’t lost. (angular.dev)

Per-route rendering modes. Angular lets you declare how each path should render: Client (CSR), Server
(SSR), or Prerender (SSG). This is where the “beyond” part really lands-choose SSR for user-specific
content, Prerender for static pages, CSR for highly interactive areas or offline-optimised flows. (angular.dev)

Wire those routes into the server configuration, optionally declaring an App Shell for CSR routes so users
see meaningful content immediately even when a path is client-rendered. (angular.dev)

Transfer cache and fewer round trips. When SSR renders a page that fetches data, Angular’s HTTP transfer
cache serialises those responses into the HTML and reuses them in the browser-saving duplicate requests and
accelerating time-to-interactive. You can tweak what’s cached during hydration. (angular.dev)

Prerendering at scale. Static pages (docs, marketing, long-tail CMS content) can be generated at build
time and pushed to a CDN. You can specify which parameterised routes to prebuild and define fallback
strategies (server, client, or none) for paths you didn’t prerender-useful when content volume is large and
build time matters. (angular.dev)

The upshot: Angular remains a first-class SPA framework, yet now gives you precision tools-hybrid
rendering, hydration, transfer cache-to tune startup, SEO, and scalability per route. Add SSR where it pays,
prerender what’s static, keep CSR where it sings. One codebase. Optimal delivery. (angular.dev)

Key references (v20 docs): Hybrid rendering setup and per-route modes; hydration and Event Replay; HTTP
transfer cache. (angular.dev)