Islands Architecture
Slap yourself if
You think Islands Architecture is just partial hydration with a cooler name.
Why this exists
Islands Architecture exists to drastically reduce JavaScript execution on the client by defaulting to static HTML and explicitly opting into interactivity only where it is required.
Mental model
Islands Architecture treats interactivity as an exception, not the default. The page is mostly static HTML, with small isolated interactive components—islands—hydrated independently on the client.
- The server renders the entire page as static HTML.
- Most of the page is shipped with zero client-side JavaScript.
- Interactive components are marked as isolated islands.
- Each island ships its own JavaScript bundle.
- Islands are hydrated independently, often lazily or on interaction.
- Assuming islands can freely share client-side state.
- Creating too many islands and increasing bundle overhead.
- Triggering hydration at interaction time and causing noticeable delays.
- Breaking accessibility by delaying interactive semantics.
Islands Architecture is an approach where most of a page is rendered as static HTML, and only isolated interactive components are hydrated on the client, reducing JavaScript cost by default.
- Islands Architecture is just lazy loading.
- It eliminates hydration completely.
- It’s only a framework feature.
Deep dive
Premium deep dives include more internals, more scars.
How Islands Architecture actually works
Where islands architecture breaks down
The benefits disappear quickly when islands are poorly chosen.
Tradeoffs vs partial and selective hydration
Islands optimize for minimal JS, not developer convenience.
When Islands Architecture is a bad idea
Not all apps benefit from islands.
Interview landmines
- Confusing islands with partial hydration.
- Claiming islands remove the need for hydration entirely.
Related terms
Partial Hydration
You think partial hydration just means hydrating components later.
Selective hydration
You think hydration is a single on/off switch that just needs to be faster.
Hydration
You think hydration just means React attaching event listeners.
Streaming SSR
You think streaming SSR is just 'SSR but faster' or only about sending HTML in chunks.
Server components
You think server components are just SSR with better DX or a way to hide API calls.