Islands Architecture
Key idea:
Islands Architecture — approach where the page renders as static HTML and only individual interactive blocks ("islands") get a JS runtime. Everything else is zero JS. Popularised by Astro, also Fresh (Deno), Qwik (resumability). Result: 2-10x less JS on a typical marketing page vs Next.js (SPA-like hydration).
Below: details, example, related terms, FAQ.
Details
- Default: static HTML, nothing hydrates
- Islands: explicit directive (
) - Hydration timing: client:load / client:idle / client:visible / client:media
- Vs SPA: 95% less JS on typical blog/marketing pages
- Frameworks: Astro (universal), Fresh (Preact), Îles, Qwik (resumable)
Example
---
// Astro — static by default
import Counter from './Counter.tsx';
---
<html>
<body>
<h1>Hello</h1> <!-- static, no JS -->
<Counter client:visible /> <!-- hydrate when scrolls into view -->
</body>
</html>Related Terms
Learn more
Frequently Asked Questions
Islands vs RSC?
Islands: static-first + explicit hydration. RSC: server-first + automatic client boundaries. Astro best for content sites, RSC best for apps.
Bundle size?
Typical Astro blog: 20-50 KB JS. Next.js App Router: 150-300 KB (framework + runtime).
SEO impact?
Static HTML → excellent SEO. Lighthouse score 100 easily achievable.