Islands Architecture
Коротко:
Islands Architecture — подход, когда страница рендерится как static HTML, а только отдельные интерактивные блоки ("islands") получают JS runtime. Остальное — zero JS. Популяризован Astro, также Fresh (Deno), Qwik (resumability). Результат: 2-10x меньше JS на стандартной marketing-странице vs Next.js (SPA-like hydration).
Ниже: подробности, пример, смежные термины, FAQ.
Подробности
- Default: static HTML, nothing hydrates
- Islands: explicit directive (
) - Hydration timing: client:load / client:idle / client:visible / client:media
- Compared к SPA: 95% меньше JS на typical blog/marketing pages
- Frameworks: Astro (universal), Fresh (Preact), Îles, Qwik (resumable)
Пример
---
// 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>Смежные термины
Больше по теме
Часто задаваемые вопросы
Islands vs RSC?
Islands: static-first + explicit hydration. RSC: server-first + automatic client boundaries. Astro best для content sites, RSC best для apps.
Bundle size?
Astro типичный blog: 20-50 KB JS. Next.js App Router: 150-300 KB (framework + runtime).
SEO impact?
Static HTML → excellent SEO. Lighthouse score 100 легко достижимый.