Can Angular Use CSR, SSR, and SSG Together?

You can use CSR, SSR, and SSG in the same Angular project.

The key idea is this: Angular controls rendering primarily at route level, not per individual component fragment.

One Angular app can mix all three

A practical route strategy can look like this:

So yes, one app can be hybrid by design.

Real-world example architecture

Imagine an e-commerce platform:

Home Page (/home) -> SSG

• Changes less frequently.
• SEO matters.
• Needs very fast first load.

Product Listing (/products) -> SSR

• Inventory/pricing may change often.
• SEO still important.
• Needs request-time freshness.

User Dashboard (/dashboard) -> CSR

• Login-protected and personalized.
• Highly interactive.
• SEO is usually irrelevant.

How Angular supports this technically

Angular (17+) supports route-level render modes through server route configuration:

• RenderMode.Client -> CSR
• RenderMode.Server -> SSR
• RenderMode.Prerender -> SSG

Example:

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

Angular selects the render behavior based on route match.

Important limitation

You generally do not split a single page as:

• header in SSR,
• sidebar in CSR,
• footer in SSG.

Angular render mode is selected for the route/page lifecycle. Component-level “mixed render mode” in the same route is not the default execution model.

What happens on SSR routes

For an SSR route (for example /products):

1. Server renders HTML.
2. Browser receives and paints HTML.
3. Angular bootstraps on client.
4. Hydration attaches behavior and event handlers.
5. After hydration, client-side navigation behaves similarly to CSR.

This is SSR + hydration.

Common hybrid pattern in modern Angular apps

• Marketing pages -> SSG
• SEO-sensitive dynamic pages -> SSR
• Authenticated product experience -> CSR
• Admin panels -> CSR
• Blogs/docs -> SSG
• Search result pages -> SSR

Restaurant analogy

Same building, different service styles:

One system, multiple strategies.

Interview-level answer

Yes, Angular supports hybrid rendering. A single Angular project can use CSR, SSR, and SSG together by configuring render modes per route with Angular SSR features.

If you want to explore this in context, you can check this github repo: https://github.com/arkomandal/angular-rendering-modes-demo.