The Astro Islands Playbook
A field guide to hydration directives: when to use client:load, client:idle, and client:visible.
Ships zero JavaScript by default; hydrates React islands only where interactivity earns its bytes.
The three directives
-
client:load — interactive immediately (theme toggle, hero)
-
client:idle — hydrate when the main thread is free
-
client:visible — hydrate on scroll into view
Most components do not need JavaScript at all. Start from static HTML and justify every island.