Devii · Frontend · 2026-06-22 · 7 min read

Share

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.

Performance metrics review
Performance metrics review

`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.