Understanding Island Architecture

What Are Islands?

Island Architecture is a web development pattern where interactive UI components (“islands”) are embedded within otherwise static HTML pages. Each island hydrates independently, meaning only the JavaScript needed for that specific component is loaded.

How Astro Implements Islands

Astro takes a unique approach: every page starts as static HTML. You opt into interactivity by adding hydration directives to components.

Hydration Directives

• client:load — Hydrates immediately on page load
• client:visible — Hydrates when the element scrolls into view
• client:idle — Hydrates when the browser is idle
• client:media — Hydrates when a media query matches
• client:only — Skips server rendering, runs client-side only

Multi-Framework Support

One of Astro’s most powerful features is the ability to use components from different UI frameworks on the same page. A React counter can sit next to a Vue form and a Svelte animation — each loading only the minimal JS for its own framework.

Performance Benefits

Because islands hydrate independently:

1. Smaller bundles — Only the JS for visible components loads
2. Faster FCP — Static HTML renders instantly
3. Progressive enhancement — Page works without JS, islands add interactivity
4. Framework-agnostic — Use the best tool for each component

When to Use Islands

Islands are ideal when your page is mostly content with a few interactive elements. If your entire page is dynamic (like a dashboard), a traditional SPA might be better.

For content sites, marketing pages, blogs, and documentation — Island Architecture delivers the best of both worlds.