Hydration Example

Hydration

Hydration is the process that restores the server-side rendered application on the client

This demo showcases Angular's hydration strategies, allowing you to simulate network latency and observe how different components hydrate based on their configured triggers.

lock angular.dev/hydration-strategies

@if (currentState() === 'Server-Side Rendering...') {

Generating SSR Markup...

}

Component Strategies

Mixing eager and deferred hydration triggers.

Main App

{{ progress() }}%

@for (card of [card1(), card2(), card3(), card4()]; track $index) { 0, 'dashed-border': !card.isHydrated, }" >

@if (card.isHydrating) {

} @else { water_drop } @if (card.clickCount > 0) { CLICKS: {{ card.clickCount }} }

{{ card.title }}

{{ card.description }}

@if (card.isHydrating) { Hydrating... } @else if (!card.isHydrated) { Static } @else { Hydrated } @if (card.syntax) { {{ card.syntax }} } }

Eager Hydration

Essential components (like navigation or top-fold content) hydrate as soon as the main application bundle is ready.

Incremental Hydration

Use hydration triggers like on interaction or on timer to delay JS execution for non-critical elements.

Event Replay

User clicks are never lost. Angular records events during the "Static" phase and re-dispatches them once hydrated.

Learn more about hydration