A page of static HTML with islands
Islands architecture treats a page as mostly static HTML with a few isolated interactive regions called islands. Only those islands ship and run JavaScript, while the rest of the page stays static and needs no client code.
- The server renders the full page to HTML.
- Each interactive widget is hydrated independently as its own island.
- Static content between islands never loads any JavaScript.
Why ship less JavaScript
Most pages are largely static, a header, an article, a footer, with only a search box or cart button needing interactivity. Hydrating the whole tree wastes work.
- Less JavaScript means faster interactivity and lighter pages.
- Islands can hydrate on demand, for example when scrolled into view.
- A bug in one island cannot break unrelated static content.
This model fits content heavy sites with pockets of interactivity. The tradeoff is that highly app like pages with interactivity everywhere see less benefit, because then almost everything is an island anyway.
Key idea
Islands architecture renders a mostly static page and hydrates only small interactive islands, shipping far less JavaScript than full page hydration so content heavy sites stay fast.