Incremental Hydration with @defer

Opt in with withIncrementalHydration() in the hydration provider. This unlocks the hydrate triggers in templates.

The most common trigger hydrates a block when it scrolls into view. Below-the-fold content stays dormant, saving JavaScript work until the user reaches it.

Hydrate when the user interacts (click, keydown) with the block. Perfect for widgets that are visible but rarely used, like an expandable panel.

Use hydrate on idle to hydrate when the browser is free, or hydrate on timer(2s) to hydrate after a delay. Good for non-critical regions.

hydrate never keeps the server-rendered HTML static: it displays but never ships JS for that block. Ideal for purely presentational, non-interactive content.

A normal @defer in a CSR context shows a placeholder until loaded. With incremental hydration the content is already server-rendered and visible; the trigger only controls when interactivity (hydration) kicks in.

You can combine triggers so a block hydrates on whichever happens first, balancing readiness with resource savings.

By deferring hydration of heavy or below-the-fold components, the initial JavaScript needed for interactivity shrinks, improving time-to-interactive and INP on the critical path.

Hydrate above-the-fold interactive elements eagerly or on idle; defer below-the-fold and rarely-used widgets to viewport or interaction. Measure to confirm the wins.

You used @defer (hydrate ...) with withIncrementalHydration() to hydrate on viewport, interaction, idle, timer, or never. This shrinks initial JS and improves interactivity by deferring hydration of below-the-fold and rarely-used blocks.