Island Architecture
ELI5 — The Vibe Check
Island architecture is like building a static HTML beach with small islands of interactive JavaScript sprinkled on top. Most of the page is plain HTML that loads instantly. Only the parts that actually need interactivity (a dropdown menu, a search bar, a chart) get JavaScript. Everything else stays dry and fast. It's the opposite of SPAs where everything is a JavaScript island and there's no beach.
Real Talk
Islands architecture is a web rendering pattern where a server-rendered page contains isolated 'islands' of dynamic, interactive components that are independently hydrated. The surrounding static content requires no client-side JavaScript, dramatically reducing bundle size and improving performance. Popularized by Astro, it contrasts with full-page hydration used by traditional SPAs and SSR frameworks.
When You'll Hear This
"We moved to island architecture and cut our JS bundle by 80%." / "Astro's island architecture is perfect for content-heavy sites with a few interactive widgets."
Related Terms
Astro
Astro is the 'ship zero JavaScript by default' framework.
Hydration
Hydration is when a server-rendered HTML page comes alive in the browser.
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?
SSG (Static Site Generation)
SSG builds all your pages ahead of time — before anyone visits. You get a folder of plain HTML files that are blazing fast to serve from a CDN.