Islands Architecture
ELI5 — The Vibe Check
Islands Architecture treats your page like an ocean of static HTML with little islands of interactivity. The header might be an interactive island, the rest is just HTML. Each island hydrates independently so you're not shipping JavaScript for your static footer. Astro made this famous.
Real Talk
Islands Architecture is a web architecture pattern where a server-rendered page contains isolated 'islands' of interactive components that hydrate independently. The surrounding static HTML requires no JavaScript, dramatically reducing the amount of client-side code for content-heavy sites.
When You'll Hear This
"Astro's islands architecture means our blog ships almost zero JS" / "Each island hydrates on its own, so a slow component doesn't block the page"
Related Terms
Partial Hydration
Partial Hydration is the art of only making interactive the parts of your page that actually need to be interactive. Why hydrate a static paragraph?
Progressive Enhancement
Progressive Enhancement is the philosophy of building the basics first (HTML that works), then layering on CSS and JavaScript like frosting on a cake.
Streaming SSR
Streaming SSR sends HTML to the browser as it's generated, not all at once.