Angular Incremental Hydration

All Triggers Demo

Incremental Hydration Triggers

Demo of all 6 supported hydration triggers using the syntax: @defer (hydrate on TRIGGER)

Immediate

Immediate Trigger

Server Rendered

This component hydrates immediately after the page finishes rendering (requests idle callback not required). Prioritized over idle content.

PerformanceHigh
Initialized at: 10:24:48 AM
Idle

Idle Trigger

Server Rendered

This component hydrates when the browser is idle (using requestIdleCallback). Good for non-critical content that doesn't need to be interactive immediately.

System Status: Optimal
Initialized at: 10:24:48 AM
Timer (2s)

Timer Trigger (5s)

Server Rendered

This component hydrates automatically after a 5-second delay. Useful for lower priority interactive content.

Time since hydration
00:00
Initialized at: 10:24:48 AM
Interaction

Interaction Trigger

Server Rendered

This component hydrates when you click the placeholder. The counter works only after hydration.

0
Initialized at: 10:24:48 AM
Hover

Hover Trigger

Server Rendered

This component hydrates when you hover over the placeholder. Great for heavy tooltips or optional details.

Detailed Analytics

Views
1,234
Clicks
567
Initialized at: 10:24:48 AM
When (Custom)

Custom Condition (When)

Server Rendered

This component hydrates only when the "Hydrate Now" button in the parent component is clicked.

Condition Met!

The parent signal became true, triggering hydration.

Initialized at: 10:24:48 AM
Never

Never Hydrate

Server Rendered (Static)

This component should never hydrate. It remains as static HTML sent from the server.

// This click listener will never work

Static timestamp: 10:24:48 AM

Scroll down for viewport trigger
⬇


Keep scrolling


Almost there


⬇

Viewport

Viewport Trigger

Server Rendered

This component hydrates when it enters the viewport. It might have been below the fold initially.

Heavy Data List (Simulated)

  • Item 1 - Loaded lazily
  • Item 2 - Loaded lazily
  • Item 3 - Loaded lazily
  • Item 4 - Loaded lazily
  • Item 5 - Loaded lazily
Initialized at: 10:24:48 AM