Examples · Islands on server HTML

Lazy island

data-aegis-load="visible" hydrates an island only when it scrolls into view.

A page can have dozens of islands; most are below the fold. With data-aegis-load the island stays inert server HTML until it is needed: visible, idle or interaction.

Playground

What to notice

The chart island at the bottom is registered up front but mounts only when scrolled near (400px before the viewport).
The timestamp shows when hydration actually happened.
visible(300px), idle(1500) and interaction(click,keydown) take arguments.

Scroll the result down slowly and watch the mounted-at time appear.

islandhydrate