Astro Islands

Purpose

Add interactivity to an Astro site the islands way: zero client JS by default, hydration only for the components that need it, each island hydrated independently at the right time.

When to Use

Activate when the task involves:

• making a component interactive
• choosing client:* directives (client:load, client:idle, client:visible, client:media, client:only, client:event)
• deciding what should and should not be hydrated
• sharing state between islands
• reducing hydration cost, bundle size, or time-to-interactive
• adding a UI framework component to a page

When Not to Use