What is Astro's Islands Architecture at the technical level?

At the technical level, Astro's Islands Architecture works through selective hydration with fine-grained control. During SSR/SSG: Astro renders the full page to HTML including framework components (React/Vue/Svelte) using their SSR APIs. Framework components with client:* directives get a special HTML wrapper with their serialized props. The JavaScript bundle for those components is added to the page as module scripts with type="module". Hydration process: client:load: immediately hydrates using queueMicrotask. client:idle: uses requestIdleCallback. client:visible: uses IntersectionObserver. client:media: uses window.matchMedia. Each island hydrates completely independently — there is no shared React tree, no shared Vue app. The JS for each island's framework is code-split per island. Unused framework runtimes are never loaded. This is fundamentally different from Next.js or Remix where the entire page is one React tree — Astro's model means a Vue island error doesn't affect the React sidebar.