Devii · Frontend · 2026-06-22 · 7 min read
Astro Islands: Ship Less JavaScript With Partial Hydration
Astro's component islands architecture and when to hydrate React, Vue, or Svelte on the client.
**Astro** is a content-focused web framework that renders mostly static HTML and hydrates interactive **islands** selectively. Docs: `docs.astro.build`. The default path sends zero client JavaScript unless a component opts in with `client:*` directives.
Islands can use React, Vue, Svelte, Solid, and other UI integrations as **server-rendered** markup with client hydration boundaries. This suits marketing sites, docs, and blogs where only search bars or carts need interactivity.
`client:visible` and `client:idle` defer hydration until the browser intersects or is idle, improving **Largest Contentful Paint** on content-heavy pages.
Astro is not a replacement for every SPA. Apps with constant client state may still choose React Router or similar. Measure with Lighthouse and real devices before assuming islands alone fix performance.