1. What is Angular Hydration?

What is Hydration?

Angular hydration is the process where Angular running in the browser reuses the HTML that was already generated on the server and attaches Angular's client-side behavior to it.

Hydration is mainly associated with SSR (Server-Side Rendering) and prerendered applications.

Simple definition

Hydration converts server-rendered static HTML into a fully interactive Angular application without unnecessarily recreating the existing DOM.

Without Hydration

Suppose the server sends:

<h1>Products</h1>

<button>Add to Cart</button>

The browser can see the button, but Angular's client-side behavior still needs to become active.

Without hydration, the client may discard/recreate portions of the server-rendered DOM when Angular starts.

Conceptually:

Server
   ↓
Generate HTML
   ↓
Browser displays HTML
   ↓
Angular starts
   ↓
Existing DOM recreated
   ↓
Interactive application

This can result in unnecessary DOM work and potentially visible layout/content changes.

With Hydration

Server
   ↓
Generate HTML
   ↓
Browser displays HTML
   ↓
Angular starts
   ↓
Reuse existing DOM
   ↓
Attach Angular behavior
   ↓
Interactive application

Angular recognizes:

"This HTML has already been rendered. I can reuse it."

That process is hydration.

Full Simple Sample Program

app.config.ts

import { ApplicationConfig } from '@angular/core';
import {
  provideClientHydration
} from '@angular/platform-browser';

export const appConfig: ApplicationConfig = {
  providers: [
    provideClientHydration()
  ]
};

counter.ts

import {
  Component,
  signal
} from '@angular/core';

@Component({
  selector: 'app-counter',
  standalone: true,
  templateUrl: './counter.html'
})
export class Counter {

  count = signal(0);

  increment(): void {
    this.count.update(value => value + 1);
  }
}

counter.html

<h2>Counter</h2>

<p>Count: {{ count() }}</p>

<button (click)="increment()">
  Increment
</button>

How It Works

During SSR, the server might generate:

<h2>Counter</h2>

<p>Count: 0</p>

<button>
    Increment
</button>

The browser can immediately display this.

Then Angular JavaScript loads.

Hydration allows Angular to reuse that HTML and connect:

(click)="increment()"

with the Angular component behavior.

After hydration:

User clicks Increment
        ↓
increment()
        ↓
Signal updated
        ↓
count = 1
        ↓
UI updated

So hydration connects:

Server-rendered HTML
        +
Angular client-side application
        ↓
Interactive application

2. Why Is Hydration Needed?

The primary reason is to reuse server-rendered HTML rather than unnecessarily rebuilding the page when Angular starts in the browser.

Without hydration

SSR generates HTML
       ↓
Browser displays HTML
       ↓
Angular starts
       ↓
Angular recreates DOM

There is duplicated rendering work.

With hydration

SSR generates HTML
       ↓
Browser displays HTML
       ↓
Angular starts
       ↓
Reuse existing HTML
       ↓
Attach Angular behavior

This is more efficient.

Benefits

1. Reuses existing DOM

Angular doesn't need to recreate everything that the server already rendered.

2. Better user experience

It can reduce visible page flicker/layout disruption during client startup.

3. Better performance

Less unnecessary DOM creation and destruction is required.

4. Preserves SSR benefits

You get:

SSR
 ↓
Fast initial HTML
 ↓
Hydration
 ↓
Angular interactivity

So SSR and Angular SPA behavior work together.

Hydration Key Points

• Hydration is primarily relevant to SSR/prerendering.
• Server generates the initial HTML.
• Browser displays that HTML.
• Angular then starts in the browser.
• Angular reuses the existing DOM.
• Angular attaches its application behavior.
• The page becomes fully interactive.

Easy way to remember

SSR creates it → Hydration activates it.

Or:

SSR
 ↓
HTML visible

Hydration
 ↓
HTML interactive

3. What is Hybrid Rendering?

What is Hybrid Rendering?

Hybrid rendering means using different rendering strategies for different routes/pages within the same Angular application.

For example:

Home             → SSG
About            → SSG
Articles         → SSR
Article Details  → SSR
Admin Dashboard  → CSR
Admin CRUD       → CSR

Instead of saying:

"My entire Angular application must use CSR."

or:

"My entire Angular application must use SSR."

you choose the rendering strategy appropriate for each route.

Full Simple Sample Program

A modern Angular application can define server-route rendering behavior.

app.routes.ts

import { Routes } from '@angular/router';

export const routes: Routes = [
  {
    path: '',
    loadComponent: () =>
      import('./home').then(m => m.Home)
  },
  {
    path: 'about',
    loadComponent: () =>
      import('./about').then(m => m.About)
  },
  {
    path: 'articles',
    loadComponent: () =>
      import('./articles').then(m => m.Articles)
  },
  {
    path: 'articles/:slug',
    loadComponent: () =>
      import('./article-details')
        .then(m => m.ArticleDetails)
  },
  {
    path: 'admin/dashboard',
    loadComponent: () =>
      import('./admin/dashboard')
        .then(m => m.Dashboard)
  }
];

app.routes.server.ts

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

export const serverRoutes: ServerRoute[] = [

  {
    path: '',
    renderMode: RenderMode.Prerender
  },

  {
    path: 'about',
    renderMode: RenderMode.Prerender
  },

  {
    path: 'articles',
    renderMode: RenderMode.Server
  },

  {
    path: 'articles/:slug',
    renderMode: RenderMode.Server
  },

  {
    path: 'admin/**',
    renderMode: RenderMode.Client
  }

];

This is a good example of hybrid rendering.

How the Example Works

Home

renderMode: RenderMode.Prerender

means:

Home
 ↓
SSG / Prerender
 ↓
HTML generated ahead of time

Good for relatively static public content.

About

renderMode: RenderMode.Prerender

Again:

About
 ↓
SSG

The page doesn't normally change frequently.

Articles

renderMode: RenderMode.Server

means:

User requests /articles
        ↓
Server renders page
        ↓
HTML returned
        ↓
Hydration

This is SSR.

Admin Dashboard

renderMode: RenderMode.Client

means:

/admin/dashboard
        ↓
Angular runs in browser
        ↓
Call ASP.NET Core API
        ↓
Render dashboard

This is CSR.

Hybrid Rendering Architecture

For an Angular + ASP.NET Core application:

                   Angular Application
                          │
           ┌──────────────┼──────────────┐
           │              │              │
          SSG            SSR            CSR
           │              │              │
         Home          Articles        Admin
         About       Article Detail   Dashboard
           │              │              │
           └──────────────┼──────────────┘
                          │
                          ▼
                 ASP.NET Core Web API
                          │
                          ▼
                      SQL Server

Why Use Hybrid Rendering?

Because different pages have different requirements.

Consider a portfolio application.

Home

Mostly static:

Home
 ↓
SSG

Why render it on every request if the content rarely changes?

Article Details

Public and potentially dynamic:

/articles/angular-signals
        ↓
SSR

You may want:

• SEO
• Current article data
• Fast initial content

Admin Dashboard

Private and highly interactive:

/admin/dashboard
        ↓
CSR

You don't need Google indexing your admin dashboard.

CSR is a natural fit.

CSR, SSR and SSG in Hybrid Rendering

So:

Hybrid rendering = CSR + SSR + SSG used appropriately within one application.

Relationship Between SSR and Hydration

This is important for interviews.

User requests page
        ↓
       SSR
        ↓
Server generates HTML
        ↓
Browser receives HTML
        ↓
User sees content
        ↓
Angular JavaScript loads
        ↓
     Hydration
        ↓
Angular reuses existing HTML
        ↓
Application becomes interactive

Therefore:

SSR ≠ Hydration

They perform different jobs.

SSR

Generates the initial HTML on the server.

Hydration

Reuses that server-generated HTML when Angular starts in the browser and makes the application interactive.

CSR vs SSR vs SSG vs Hydration vs Hybrid

This table is useful for quick revision:

Memory trick

CSR
↓
Client renders


SSR
↓
Server renders


SSG
↓
Build renders


Hydration
↓
Existing HTML becomes Angular-interactive


Hybrid
↓
Mix rendering strategies

Key Points

Angular Hydration

• Used with server-rendered/prerendered Angular.
• Reuses existing server-generated DOM.
• Avoids unnecessary DOM recreation.
• Connects Angular behavior to the existing page.
• Makes the page fully interactive.
• Helps preserve SSR performance benefits.

Hybrid Rendering

• Different routes can use different rendering strategies.
• RenderMode.Client → CSR.
• RenderMode.Server → SSR.
• RenderMode.Prerender → SSG/prerendering.
• Useful when public and private pages exist in the same application.
• Lets you optimize each route based on SEO, freshness, interactivity, and performance requirements.

Interview Questions and Answers

1. What is Angular hydration?

Answer:
Angular hydration is the process where Angular running in the browser reuses server-rendered HTML and attaches client-side Angular behavior to it instead of unnecessarily recreating the DOM.

2. Why is hydration needed?

Answer:
Hydration preserves the HTML produced by SSR or prerendering while making it interactive. This reduces unnecessary DOM recreation and can improve startup performance and user experience.

3. Is hydration the same as SSR?

Answer:
No.

SSR       → Generates HTML
Hydration → Reuses and activates that HTML

SSR happens on the server, while hydration happens when Angular starts in the browser.

4. What is hybrid rendering?

Answer:
Hybrid rendering means using multiple rendering strategies, such as CSR, SSR, and SSG, for different routes within the same Angular application.

5. Give an example of hybrid rendering.

Answer:

Home             → SSG
About            → SSG
Articles         → SSR
Article Details  → SSR
Admin Dashboard  → CSR

Each route uses the rendering strategy best suited to its requirements.

6. What are RenderMode.Client, RenderMode.Server, and RenderMode.Prerender?

Answer:

RenderMode.Client
        ↓
CSR

RenderMode.Server
        ↓
SSR

RenderMode.Prerender
        ↓
SSG

They specify how Angular should render particular server routes.

7. Why would you use hybrid rendering?

Answer:
Because different routes have different requirements. Public dynamic pages may benefit from SSR, static pages from SSG, and private highly interactive pages from CSR.

Interview Quick Answer

Hydration is the process of reusing server-rendered HTML and attaching Angular's client-side behavior to make it interactive. Hybrid rendering means using CSR, SSR, and/or SSG for different routes of the same Angular application according to each route's requirements.