Angular Route Rendering: How to Choose

This guide shows you how to control which rendering strategy Angular uses for each route in your application. You’ll learn how to set up Server-Side Rendering (SSR), Static Site Generation (SSG/prerendering), and Client-Side Rendering (CSR) on a per-route basis, so you can optimize for SEO, performance, and user experience. You’ll need an Angular project with Angular Universal (or the built-in SSR support in newer versions) already configured.

What You’ll Need

• An Angular project (version 14 or later is recommended, as SSR is more integrated).
• Angular Universal installed (for SSR/SSG) – if you created your project with ng add @nguniversal/express-engine or used the --ssr flag during creation, you’re set.
• Basic familiarity with Angular routing and the Angular CLI.

Step-by-Step

1. Understand your rendering options. Angular supports three main rendering modes: Client-Side Rendering (CSR) – the default, where the browser runs the app; Server-Side Rendering (SSR) – the server renders the HTML for each request; and Static Site Generation (SSG) – the server pre-renders a set of routes at build time. SSR gives fresh content per request, SSG gives fast static pages, and CSR is best for highly interactive apps.
2. Set up your project for SSR. If you haven’t already, run ng add @nguniversal/express-engine in your project root. This adds the necessary server-side files and scripts. For Angular 17+, you can also use the built-in provideServerRendering and provideClientRendering functions instead of the older engine.
3. Identify which routes need which rendering. For each route, ask: Does it need to be indexed by search engines? Does it change frequently? Does it require real-time data? If yes to the first, use SSG or SSR. If it’s a dashboard or admin page, CSR is fine.
4. Prerender static routes with SSG. In your angular.json file, inside the prerender builder options, you can specify which routes to prerender. For example, set "routes": ["/", "/about", "/contact"] to pre-render those pages at build time. These routes will be served as static HTML, which is fast and SEO-friendly.
5. Use SSR for dynamic routes. For routes that need fresh data on each request (like a user profile page), you’ll want SSR. In Angular Universal, the server renders the app for each request. To ensure a route is server-rendered, simply don’t include it in the prerender list. The server will render it on the fly.
6. Leverage the provideServerRendering and provideClientRendering functions (Angular 17+). These allow you to control rendering at the route level. In your app.config.ts, you can add these providers to specific routes using the providers array in the Route object. For example, to force client-side rendering for a route, add provideClientRendering() to that route’s providers.
7. Test your build. Run npm run build:ssr (or ng build for SSG). Check the dist folder: you’ll see index.html for each prerendered route, and the server bundle for SSR. Start the server with npm run serve:ssr and visit your routes to verify they render correctly.
8. Verify the rendered HTML. View the page source in your browser. For prerendered routes, you should see the full content in the HTML. For SSR routes, the content will be present after the server responds. For CSR routes, you’ll see a minimal placeholder.

Common Mistakes

• Prerendering routes with dynamic data. If you prerender a route that depends on user-specific data, you’ll serve stale or incorrect content. Only prerender truly static routes.
• Forgetting to exclude dynamic routes from prerender. If you set a wildcard like "routes": ["/**"], you’ll prerender everything, which can break dynamic routes. Be explicit.
• Using browser-only APIs in SSR. If you use window or document in a component that is server-rendered, you’ll get errors. Use isPlatformBrowser to guard such code.
• Not updating the server configuration. If you add new routes after setting up SSR, make sure they are either in the prerender list or handled by the server. Otherwise, they may fall back to CSR, which might not be what you want.

Tips

• Start with SSG for public pages. It’s the fastest and simplest. Use SSR only for routes that absolutely need real-time data.
• Use Angular’s built-in provideServerRendering and provideClientRendering for fine-grained control. This is the modern approach and is more flexible than the older engine.
• Consider using a headless CMS. If your site has many static pages, you can prerender them at build time and update the content by rebuilding, which is efficient.
• Monitor your server load. SSR can be resource-intensive. If you have many dynamic routes, consider caching or using a CDN for static content.

Troubleshooting

• Route shows blank page in SSR. Check the server console for errors. Often this is due to a browser-only API being used during server rendering. Wrap such code in if (isPlatformBrowser(platformId)).
• Prerendered route shows stale data. Ensure the route is not in the prerender list if it depends on dynamic data. If it is, remove it and use SSR instead.
• SSR not working for a specific route. Verify that the route is not accidentally matched by a prerender wildcard. Also check your server routes – if you’re using Express, make sure the Angular universal engine is applied to all routes.
• Build fails with ‘Prerendering routes failed’. This often happens when a route uses a service that makes HTTP calls during prerender. You can mock those calls or use provideClientRendering for that route.

Frequently Asked Questions

Can I mix SSR and SSG on the same site?

Yes, absolutely. You can prerender some routes (like marketing pages) and SSR others (like user dashboards). Angular Universal supports this out of the box.

Does SSR affect my Angular app’s interactivity?

No. SSR only renders the initial HTML on the server. Once the page loads in the browser, Angular takes over and the app becomes a normal SPA. The only difference is that the initial content is already visible.

How do I know if a route is being server-rendered or client-rendered?

You can check the page source in your browser. If you see the full content in the HTML, it’s server-rendered. If you only see a placeholder like <app-root></app-root>, it’s client-rendered.

Can I use Angular’s provideServerRendering with older versions?

No, these functions were introduced in Angular 17. For older versions, you’ll need to use the traditional Universal engine setup and rely on the prerender configuration.

Is there a performance hit for using SSR?

Yes, SSR adds server-side processing time. However, the initial load can feel faster for users because content appears immediately. Use SSG whenever possible to avoid the server overhead.

Do I need to change my routing code to support SSR?

No, your routing code remains the same. The rendering strategy is determined by the server configuration and build settings, not by the route definitions themselves.

Related

• Vodafone Record Loss: Subscriber Impact Explained
• Deep Wreck Diving: Training & Equipment
• Germany VPS Providers: Top 6 Compared