Islands Architecture is a pattern for building web pages that are mostly static HTML with small, isolated regions of interactivity. Instead of shipping and hydrating the JavaScript for an entire page, the page is rendered to plain server HTML, and only the genuinely interactive regions, the “islands,” receive client-side JavaScript and are hydrated independently. Everything between the islands stays as fast, inert markup.
The term was named in an August 11, 2020 post by Jason Miller, the creator of the Preact framework, on jasonformat.com. He describes the core technique as rendering “HTML pages on the server, and inject placeholders or slots around highly dynamic regions” that “can then be hydrated on the client into small self-contained widgets.” In the same post he credits the “Component Islands” terminology to Etsy’s frontend architect Katie Sylor-Miller, who coined it during a 2019 discussion.
The motivation is the cost of hydration. In a typical single-page application, the whole page is one large JavaScript bundle that must download and execute before anything becomes interactive, even if most of the page is static text. Islands Architecture flips that: each interactive widget is its own small bundle, hydrated separately, and the static remainder needs no JavaScript at all. This dramatically reduces the JavaScript shipped and shortens the time to interactivity.
The pattern became most associated with Astro, which built its rendering model around it. Astro’s documentation defines an island as “an enhanced UI component on an otherwise static page of HTML,” and describes the architecture as rendering “the majority of your page to fast, static HTML with smaller islands of JavaScript added when interactivity or personalization is needed.” Astro renders components to “just HTML and CSS, stripping out all client-side JavaScript automatically,” and developers opt specific components into hydration using explicit client directives, so “JavaScript is only loaded for the individual components that need it.”
Islands sit at the intersection of server-side rendering, static generation, and partial hydration. By treating interactivity as the exception rather than the default, the pattern offered a concrete answer to the heavy, all-or-nothing hydration of early SPA frameworks, and influenced a broader industry shift toward shipping far less JavaScript to the browser.