Islands Architecture
Islands Architecture is a web application design pattern in which a page is rendered mostly as static HTML, with small, independent, interactive 'islands' of client-side JavaScript embedded within it and hydrated individually. Each island…
Definition
Islands Architecture is a web application design pattern in which a page is rendered mostly as static HTML, with small, independent, interactive 'islands' of client-side JavaScript embedded within it and hydrated individually. Each island manages its own state and hydration timing, isolated from the rest of the page.
Overview
The term 'Islands Architecture' was popularized by Preact creator Jason Miller in a 2020 blog post, though the underlying idea traces back further to component frameworks like Marko, which had used a similar model for years at eBay. The core insight is that most web pages are not uniformly interactive — a blog post might have a single share button or embedded video player amid paragraphs of static text — so treating the entire page as one big client-side application to hydrate wastes bandwidth and CPU on parts that never change once rendered. In an islands-based framework, the server (or a static site generator) renders the full page as HTML, and the build tooling identifies which components are 'islands' — typically because the developer explicitly marks them (e.g., with a directive like `client:load` in Astro) — and ships only those components' JavaScript to the browser, each hydrating independently of the others. Because islands are isolated, one island's re-render or state update does not require re-rendering or even being aware of sibling islands, unlike a traditional single-page app where the entire component tree exists in one client-side reactivity graph. This architecture trades some of the flexibility of a fully client-rendered SPA — cross-island state sharing requires an explicit mechanism such as URL state, a shared store, or custom events — for substantially better baseline performance on content-heavy sites. It has become closely associated with the 'multi-page application' resurgence, where frameworks like Astro, Eleventy plus islands plugins, Fresh, and Qwik City lean into shipping less JavaScript by default and only 'opting in' to interactivity where explicitly needed, contrasting with the 'ship one big app bundle' default of frameworks like Create React App or a typical Next.js Pages Router SPA.
Key Concepts
- Page rendered as static HTML with isolated interactive 'islands' of JavaScript
- Each island hydrates and manages state independently of others
- JavaScript is shipped only for components explicitly marked as interactive
- Popularized by Preact's Jason Miller, with roots in eBay's Marko framework
- Enables per-island hydration timing (immediately, on visible, on idle, on interaction)
- Reduces total JavaScript payload compared to full single-page-app hydration
- Cross-island communication requires explicit state sharing (stores, events, URL state)
- Core pattern behind Astro, Fresh, and similar 'content-first' frameworks