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.
Previous
How do JavaScript virtual machines optimize JavaScript performance?
Next
What are Container Queries and their performance implications?
More Web Performance Questions
View all →- Advanced What is the scheduler API and how does it improve INP?
- Advanced What is speculation rules API and prerendering?
- Advanced How do JavaScript virtual machines optimize JavaScript performance?
- Advanced What are Container Queries and their performance implications?
- Advanced How do you implement performance observability in production?