Islands Architecture Playground
Experience Astro's partial hydration in action. Each component below uses a different hydration strategy—watch the status indicators to see when they become interactive.
What is Partial Hydration?
Hydration Strategies
client:loadWaiting...Hydrates immediately on page load. Use for above-the-fold interactive content.
client:idleWaiting...Hydrates when browser is idle. Good for lower-priority interactions.
client:visibleWaiting...Hydrates when scrolled into view. Perfect for below-the-fold content.
client:media="(min-width: 768px)"Waiting...Hydrates only on larger screens. Ideal for desktop-only features.
Cross-Framework Monitoring
Svelte Status Monitor
This component uses Svelte 5 runes ($state) and demonstrates cross-framework coexistence.
Static Astro Component
This component ships zero JavaScript. It's pure HTML rendered at build time. The buttons below are decorative—they don't work because there's no JS.
The Code
---
import Counter from './Counter.tsx';
---
<!-- Hydrate immediately -->
<Counter client:load />
<!-- Hydrate when idle -->
<Counter client:idle />
<!-- Hydrate when visible -->
<Counter client:visible />
<!-- Hydrate based on media query -->
<Counter client:media="(min-width: 768px)" />
<!-- Client-only (skip SSR) -->
<Counter client:only="react" />Bundle Impact
JavaScript Bundle Size Comparison
Approximate JS sent to browser for a typical interactive page
Astro ships 92% less JavaScript
By only hydrating interactive components, Astro dramatically reduces bundle size.
Key Takeaways
- 1. Default is zero JS — Components render as static HTML unless you add a client directive.
- 2. Granular control — Choose when each component hydrates based on its importance and position.
- 3. Framework freedom — Mix React, Vue, Svelte, or any supported framework in the same page.
- 4. Performance by default — Users get fast pages without you having to optimize manually.