← All posts
The Astro Islands Playbook
Engineering 1 min read
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.
Comments
No login required. Comments are reviewed before they appear.