Island Architecture
React, Vue, and Svelte components coexisting on one page — each hydrating independently.
How Islands Work
Each component below is an independent "island" of interactivity. The surrounding page is static HTML. Islands hydrate on their own schedule — scroll down to see them come alive.
client:visible
Hydrates when the component scrolls into the viewport. Best for below-the-fold content.
React Counter
Simple useState demo — the most basic island.
Framework: React · Hydration: client:visible
React Tab Switcher
Conditional rendering with useState.
Framework: React · Hydration: client:visible
client:visible (Vue)
Same directive, different framework. Astro handles the integration seamlessly.
Vue Reactive Form
Two-way data binding with Vue's reactivity system.
Framework: Vue · Hydration: client:visible
client:load
Hydrates immediately on page load. Use for above-the-fold interactive content.
Svelte Animated Card
Built-in transitions — no animation library needed.
Framework: Svelte · Hydration: client:visible
client:media
Only hydrates when a CSS media query matches. This counter only activates on desktop (≥768px).
React Counter
Simple useState demo — the most basic island.
Framework: React · Hydration: client:visible
Resize your browser below 768px — the counter won't hydrate on mobile.
client:only
Skips server rendering entirely. Component only runs in the browser (CSR). Use for browser-only APIs.
Hydration Directive Summary
| Directive | When | Best For |
|---|---|---|
client:load | Immediately | Above-the-fold interactive UI |
client:visible | On scroll into view | Below-the-fold content (recommended default) |
client:media | On media query match | Desktop-only or mobile-only features |
client:idle | On browser idle | Low-priority widgets |
client:only | Browser only (CSR) | Browser API dependent components |