What is the Islands Architecture and partial hydration for performance?

Answer

Islands Architecture and partial hydration address the core performance problem of traditional SSR: even after sending full HTML, the entire JavaScript bundle must download and execute to "hydrate" the page before it becomes interactive. In a large app, this hydration can take seconds on mobile — high TBT and poor INP. Islands Architecture (Astro): only interactive "islands" hydrate with JavaScript. Static content sends zero JS. Each island hydrates independently with a specific strategy (load, idle, visible). Partial Hydration Frameworks: Qwik: the most radical approach — resumability instead of hydration. Serializes component state as HTML attributes. No hydration at all — JavaScript loads only when interaction occurs at the exact component that was interacted with. 0-RTT to interactive. Marko: automatic partial hydration — compiler determines which components need client-side JS. Fresh (Deno): islands architecture with Preact. SolidStart: fine-grained reactivity with partial hydration. The goal: ship the minimum JavaScript to make a page interactive, not the entire framework + components for the whole site. This is the frontier of web performance as of 2024.