Angular Academy · Lesson

Server Routes and Rendering Modes

Configure prerender, SSR, and CSR per route.

Server Routes and Rendering Modes is a free Angular Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Angular Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

One Size Does Not Fit All

Not every route should render the same way. Angular SSR lets you assign a rendering mode per route: server-rendered, client-rendered, or prerendered at build time.

The Three Modes

RenderMode.Server renders on each request, RenderMode.Client renders only in the browser (CSR), and RenderMode.Prerender generates static HTML at build time (SSG).

Server Routes Config

Define a ServerRoute[] mapping paths to render modes, then provide it with provideServerRouting in the server config.

import { RenderMode, ServerRoute } from '@angular/ssr';

export const serverRoutes: ServerRoute[] = [
  { path: '', renderMode: RenderMode.Prerender },
  { path: 'dashboard', renderMode: RenderMode.Client },
  { path: '**', renderMode: RenderMode.Server }
];

Wiring It Up

// app.config.server.ts
import { provideServerRouting } from '@angular/ssr';

providers: [
  provideServerRendering(),
  provideServerRouting(serverRoutes)
]

When To Prerender

Choose Prerender for stable, public pages: home, about, docs. They are built once into HTML, served instantly from a CDN, with zero per-request server cost.

When To Use Server

Choose Server for pages whose content changes per request or per user but still needs SEO or fast first paint, like a product page with live stock.

When To Use Client

Choose Client for highly interactive, private pages where SEO and first paint matter little, such as an authenticated dashboard. The server sends a shell and the browser renders.

Prerendering Dynamic Params

For parameterized routes you must tell the prerenderer which params to generate by returning a list with getPrerenderParams.

{
  path: 'product/:id',
  renderMode: RenderMode.Prerender,
  async getPrerenderParams() {
    const ids = await fetchProductIds();
    return ids.map(id => ({ id }));
  }
}

Fallback For Prerender

Params not prerendered can fall back to server or client rendering at runtime, so you prerender popular items and render the long tail on demand.

Per-Route Headers and Status

Server routes can set response headers and status codes, useful for caching policy or returning a 404 from a not-found route handler.

{
  path: 'old-page',
  renderMode: RenderMode.Server,
  headers: { 'Cache-Control': 'no-store' }
}

Mixing Modes Strategically

A real app blends modes: prerender marketing pages, server-render SEO-critical dynamic pages, and client-render the app behind login. This optimizes cost and performance together.

Quick Check

Check your rendering modes knowledge.

Recap

You configured per-route rendering with ServerRoute[] and provideServerRouting: Prerender for stable public pages, Server for dynamic SEO pages, and Client for private interactive pages, including prerender params for dynamic routes.

Frequently asked questions

Is the “Server Routes and Rendering Modes” lesson free?

Yes — the full text of “Server Routes and Rendering Modes” is free to read here on the web, and the Angular Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Angular Academy course, upgrade to CoddyKit PRO.

What will I learn in “Server Routes and Rendering Modes”?

Configure prerender, SSR, and CSR per route. You practise Angular Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Angular Academy?

No prior experience is required. Angular Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Server Routes and Rendering Modes” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Angular Academy lesson?

Yes. Every Angular Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to Angular Academy