Angular does not require you to choose one rendering method for the whole application. You can select Server rendering for routes that need request-time or user-specific data, Prerender for pages whose content is known at build time, and Client rendering for routes that depend on browser-only behavior. Angular’s route-level hybrid rendering lets one application combine all three.
What Angular SSR does—and when to use it
With server-side rendering (SSR), Angular renders a route on the server for each request and sends HTML containing the page content to the browser. This can put useful content in the initial response, but it also means running a server request handler and ensuring server-side code does not assume browser APIs are available.
As an Amazon Associate I earn from qualifying purchases.
SSR is one of Angular’s three route-level rendering modes. The right choice depends mainly on when a route’s data is available, whether the content varies by visitor or request, and whether the route depends on browser-only capabilities.
Choose a mode by route
| Mode | What Angular does | Good fit | Trade-offs |
|---|---|---|---|
| Client (CSR) | Renders the route in the browser. This is Angular’s default behavior. | Highly interactive routes, browser-dependent libraries, or an installable/offline client experience. | The browser must download, parse, and execute JavaScript before the complete content appears; additional data requests can add delay. Angular notes that CSR can be less favorable for SEO because crawlers may have limits on executing JavaScript. |
| Server (SSR) | Renders the application on the server for each request and sends populated HTML. | Content that depends on the request or user, or routes where rendered content should be present in the initial HTML. | Requires a server runtime, server-compatible code, and request-time rendering work that can increase hosting costs. |
| Prerender (SSG) | Generates static HTML for selected routes at build time. | Shared pages whose required data is available during the build. | Cannot include data specific to a later visitor’s request. Generating many route variants can increase build time and deployment size. |
These are qualitative trade-offs in Angular’s guidance, not a guarantee of a particular performance or SEO result. A rendered HTML response can help make content available earlier, but the outcome still depends on the page, data, and deployment.
#1 Best Overall
A practical route mix
- Use Prerender for a shared About page whose content is known when you build.
- Use Server rendering for a profile route that needs information tied to the current request.
- Keep a route Client-rendered if its behavior depends on browser-only libraries or capabilities.
How to enable SSR in an Angular application
Angular’s documented setup uses the Angular CLI. For a new application, use ng new --ssr. To add SSR support to an existing application, use ng add @angular/ssr. The CLI SSR setup includes hydration by default.
Assign rendering modes to routes
Server route configuration typically lives in app.routes.server.ts. Define routes with RenderMode.Client, RenderMode.Server, or RenderMode.Prerender according to the route’s data and runtime needs. This lets you combine modes instead of applying SSR indiscriminately across the application.
Prerender parameterized routes
For a parameterized route, Angular’s getPrerenderParams supplies the parameter values for which HTML should be generated during the build. You can also set a fallback behavior for paths that were not generated: use server rendering, client rendering, or no fallback. Angular specifies that dependencies injected into getPrerenderParams must be obtained synchronously, before asynchronous work or an await.
Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Does Angular SSR require Node.js?
Request-time SSR needs a server runtime and an appropriate request handler, so it cannot be deployed as only static files. Angular’s guidance describes the runtime requirement but does not establish that every deployment must use one particular runtime. Check that the runtime and hosting environment you choose can execute the server handler produced for your application.
Rank #3
Prerender-only output has a different deployment path. With outputMode: "static", Angular generates static HTML without generating a server file; Angular says this output can be served by a CDN or static file server. If all routes can use build-time content, static hosting may be sufficient. If any route needs request-time SSR, the deployment must support that route’s server handler.
Hydration: reuse the server-rendered page in the browser
Hydration restores the Angular application in the browser while reusing the DOM produced by SSR. Angular warns that without hydration the browser destroys and re-renders that DOM, which can cause visible flicker and negatively affect Core Web Vitals such as Largest Contentful Paint (LCP) and layout shift.
Angular CLI’s SSR setup enables hydration by default. In a custom setup, configure provideClientHydration(). Keep the server-rendered and browser-rendered content consistent: differences between them can cause hydration mismatches or layout shifts.
Handling browser-only initialization
Do not make server and browser templates render different content by using an isPlatformBrowser condition in the template. Angular warns this can produce hydration mismatches and layout shifts. For browser-specific initialization, its current server-rendering guidance recommends platform-specific providers and afterNextRender instead.
Data transfer, caching, and per-request state
Angular documents HTTP transfer-cache behavior for HttpClient, configurable through HttpTransferCacheOptions. Eligible HEAD and GET requests may be cached during SSR and reused during hydration. The behavior has exclusions, including requests with authorization, proxy-authorization, or cookie headers; credentialed requests; cache-control directives such as no-store, no-cache, or private; and responses with Set-Cookie.
Because these eligibility rules matter for sensitive data and can be implementation-sensitive, verify the current Angular server guide before changing transfer-cache behavior. Do not assume a response is transferred or safe to reuse without checking the request and response conditions.
There is also a server-state distinction to account for: Angular warns that top-level server provider values are evaluated once and can remain shared across requests until the server restarts. If a value must be created separately for each request, use a factory provider rather than relying on a shared top-level value.
Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchWindows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallCosts and constraints to plan for
- Server compatibility: SSR and prerendered code must not unconditionally use browser APIs. Code that assumes objects such as browser globals exist can fail outside the browser.
- Request-time work: SSR renders for each request, adding server work and runtime requirements.
- Build-time work: Prerendering many route variants can lengthen builds and increase the size of deployed output.
- Personalization: A static prerender cannot contain information that is specific to a visitor making a later request.
- Security: Server request handling has SSRF and allowed-host considerations. Angular points to separate server-side security guidance for those controls; consult it when configuring request handling.
Choosing a deployment approach
Use static hosting when your selected routes can be served from prerendered output. Angular’s static output mode generates HTML without a server file, making a CDN or static file server a possible fit. Use a hosting environment with a compatible server request handler when routes require request-time SSR. A hybrid application may need both strategies, depending on how its routes are built and deployed.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
