Resumable: lazy download
With { lazy: true }, an island's bundle is not downloaded on page load. A tiny global loader waits for the first interaction, fetches the ~1.5KB bundle plus the shared runtime (~3.5KB, once), resumes the state, and replays the event. Ideal when a page has many widgets — you only pay for the ones a visitor actually touches.
Tip
Open the Network tab and reload: NOTHING under /islands/ loads. Interact with any widget (click, type, select) — only ITS bundle appears, plus the shared runtime on the first one. The five islands below are all lazy and use different event types (click, input, change).
Five lazy islands (click · input · change)
Counter (click)
Vote (click)
7
Likes (click)
42 likes
Input (input)
→ you typed: “”
Size (change)
→ medium · $12
// Add { lazy: true } and the island's bundle is NOT downloaded on load.
// A tiny global loader watches for the first interaction (pointerdown
// preloads; click / input / change replay), fetches the ~1.5KB bundle +
// the shared 3.5KB runtime once, resumes, then replays the event.
resumableIsland("Vote", Vote, { start: 7 }, { lazy: true })
resumableIsland("Select", Select, {}, { lazy: true })
// 5 interactive islands on this page → 0 bytes of island JS on load.
// You pay ~1.5KB only for the widgets a visitor actually touches.