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.
Бесплатный онлайн-инструмент — проверка HTTP-заголовков: результат мгновенно, без регистрации.
Подробности
- 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 Architecture: примеры использования
Islands Architecture применяется в различных фреймворках и библиотеках для оптимизации загрузки и выполнения JavaScript. Например, в Astro разработчики могут использовать статический рендеринг для большей части страницы и динамический рендеринг только для интерактивных элементов.
В Fresh (Deno) можно настроить частичную гидратацию с помощью специальных директив в шаблонах. Qwik поддерживает resumability, что позволяет возобновлять выполнение JavaScript для отдельных островов после первоначального статического рендеринга.
Пример конфигурации в Astro может включать использование Astro.hydrate() для определённых компонентов, которые требуют динамического взаимодействия.
Преимущества Islands Architecture
Islands Architecture предлагает несколько ключевых преимуществ:
Улучшенная производительность: статический рендеринг большей части страницы снижает время загрузки и улучшает общую производительность.
Оптимизация ресурсов: меньший объём JavaScript снижает потребление ресурсов и улучшает работу на устройствах с ограниченными возможностями.
Упрощение тестирования: статически отрендеренные страницы легче тестировать, так как они не зависят от JavaScript для отображения контента.
Кроме того, Islands Architecture способствует более чёткому разделению логики и представления, что упрощает разработку и поддержку кода.
Сравнение с другими подходами
Islands Architecture отличается от традиционных подходов, таких как SPA (Single Page Application), где весь контент рендерится динамически.
В отличие от SPA, Islands Architecture позволяет использовать статический рендеринг для большинства страниц, что снижает начальное время загрузки.
Например, Next.js использует SPA-like hydration, где вся страница обрабатывается с помощью JavaScript. В то время как в Islands Architecture только интерактивные блоки требуют JS runtime, что делает подход более гибким и производительным.
Это особенно полезно для маркетинговых страниц, где большая часть контента статична, но требуется динамическое взаимодействие в отдельных элементах.
Больше по теме
Часто задаваемые вопросы
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 легко достижимый.
Запустить инструмент, который описан в этой статье
Бесплатный тариф — 10 мониторов, проверки каждые 5 мин, без карты. Платные тарифы — интервал от 1 минуты и проверки из нескольких регионов.