Island architecture
Island architecture is the frontend pattern where most of a page is static server-rendered HTML with no client JavaScript, and only the interactive components (the 'islands') hydrate independently. Frameworks include Astro, Marko, and Eleventy with the Islands plugin. The model dramatically reduces shipped JavaScript for content-heavy sites.
The pattern is the architectural response to the observation that most pages are mostly static content with a few interactive elements (search box, modal trigger, comment widget) — yet traditional SPAs ship JavaScript for the entire page. Island architecture inverts the default: ship zero JavaScript, then opt into per-island hydration only where interactivity is required. The benefit is dramatic on content-heavy sites (blog, marketing, docs); the trade-off is harder cross-island state sharing (each island is independent by default). The pattern is converging with React Server Components on the same insight from different starting points.
Related terms
- Hydration
Hydration is the process of attaching JavaScript event handlers and state to server-rendered HTML on the client — the page is visible immediately (fast FCP) but interaction works only after hydration completes.
- Server component
A server component (React Server Components) is a React component that runs only on the server — it can fetch data directly from the database, use server-only secrets, and ship zero JavaScript to the client.
- Micro-frontend
A micro-frontend architecture decomposes a single web application into multiple independently developed and deployed frontend modules — each owned by a different team and integrated at runtime (via Module Federation, iframes, or web components) or build time (via package composition).