What is Astro's Islands Architecture?
Answer
The Islands Architecture is Astro's core innovation — a web architecture pattern where most of a page is static HTML with isolated "islands" of interactivity. By default, Astro components produce zero JavaScript — pure HTML and CSS. Interactive components (React, Vue, Svelte, etc.) are hydrated as independent islands using client:* directives. client:load: hydrate immediately on page load. client:idle: hydrate when the browser is idle. client:visible: hydrate when the component enters the viewport. client:media: hydrate when a CSS media query matches. client:only: skip SSR entirely, render only on the client. Each island hydrates independently — the rest of the page remains static. Benefits: Faster page loads: ship minimal JS. Better Core Web Vitals: less TBT, better TTI. Progressive enhancement: pages work without JS. Islands Architecture is particularly powerful for content sites with a few interactive widgets (search, cart, newsletter) surrounded by mostly static content.