Islands Architecture: Selective Hydration
Learn how islands isolate interactive components so only they ship JavaScript while the rest stays static HTML.
The Islands Concept
Islands Architecture, coined by Jason Miller in 2020, treats a web page as mostly static HTML with isolated "islands" of interactivity embedded in it. The static ocean of HTML is sent to the browser as-is. Only the interactive islands download and execute JavaScript, making the JavaScript payload proportional to actual interactivity.
How Islands Work
Each island is an independently hydrated component. The server renders the island's initial HTML along with the rest of the page. When the island's JavaScript loads, it hydrates only that component subtree. The HTML surrounding the islands is never touched by JavaScript — it is truly static.
All lessons in this course
- The Full Hydration Problem
- Islands Architecture: Selective Hydration
- Astro and React Islands Setup
- Measuring Performance: Lighthouse and Core Web Vitals