Представьте: вы загружаете страницу блога, а браузер скачивает 200 КБ JavaScript для всего лишь интерактивного оглавления и кнопки «Поделиться». При этом 80% кода не нужно для первого отображения — он просто занимает сеть и процессор. Islands Architecture решает эту проблему: только необходимый JS загружается для каждого интерактивного блока. Мы используем этот паттерн с Astro на протяжении многих лет, и наши клиенты получают сокращение initial JS на 80–90%, рост Lighthouse Performance до 96 баллов и снижение времени взаимодействия (TTI) в 4 раза. Это позволяет существенно сократить расходы на трафик и ускорить загрузку. Оцените стоимость проекта: свяжитесь с нами для бесплатного аудита.
Архитектурная модель
Статичный HTML (сервер, нулевой JS):
┌─────────────────────────────────────┐
│ Header │ ← HTML
│ Logo | Nav links | ... │
├─────────────────────────────────────┤
│ Hero section │ ← HTML
│ H1, изображение, CTA │
├──────────────┬──────────────────────┤
│ Article text │ 🏝️ Island: │ ← JS только для острова
│ (HTML) │ TableOfContents.tsx │
│ │ (sticky, highlight) │
├──────────────┴──────────────────────┤
│ 🏝️ Island: CommentSection.tsx │ ← JS только для острова
│ (React, загружается при скролле) │
├─────────────────────────────────────┤
│ Footer │ ← HTML
└─────────────────────────────────────┘
Какие проблемы решает Islands Architecture?
Чрезмерная загрузка JavaScript
Даже небольшие интерактивные элементы на классических SSR-фреймворках тянут весь бандл. Например, кнопка поделиться — 50 КБ React ReactDOM. При островной архитектуре каждый остров — отдельный чанк, который гидратируется только когда нужно. В реальных проектах мы снижаем initial JS с 250 КБ до 15–40 КБ. По сравнению с классическим SSR, Astro Islands в 3 раза быстрее по Total Blocking Time. Экономия на трафике и хостинге за счет сокращения JS может достигать 30–50% от текущих расходов.
Замедление TBT и TTI
Каждый килобайт JS добавляет задержку к Total Blocking Time. Islands разносит гидрацию по времени: сначала статика отображается мгновенно, острова активируются после загрузки страницы. Это даёт TTI менее 1 секунды против 3–4 секунд до миграции.
Как Islands Architecture улучшает Core Web Vitals?
Измерения на реальных проектах после миграции:
| Метрика | До (Full React SSR) | После (Astro Islands) |
|---|---|---|
| Initial JS | 180–250 KB | 15–40 KB |
| TTI | 3.2 с | 0.8 с |
| TBT | 480 мс | 60 мс |
| Lighthouse Performance | 62 | 96 |
Разброс зависит от количества и сложности островов, но выигрыш очевиден. Получите консультацию — мы оценим потенциал Islands Architecture для вашего проекта бесплатно.
Директивы гидрации
| Директива | Момент гидрации | Использование |
|---|---|---|
client:load |
Сразу после загрузки страницы | Кнопка поделиться, корзина |
client:idle |
Когда браузер в простое | Оглавление, поиск |
client:visible |
Когда элемент появляется в окне просмотра | Комментарии, формы обратной связи |
client:media |
При выполнении медиа-запроса | Адаптивные виджеты |
client:only |
Полностью клиентский рендеринг (без SSR) | Кастомные анимации |
Как реализовать Islands в Astro пошагово?
- Установите Astro с поддержкой нужных фреймворков (
npx create astro). - Разбейте макет на статичные и интерактивные блоки. Статичные —
.astroили.mdx, интерактивные —.tsx,.vue,.svelte. - Перенесите интерактивные компоненты в папку
islands/. Каждый файл — отдельный остров. - Импортируйте остров в шаблон и добавьте директиву гидрации:
-
client:load— сразу при загрузке страницы (для критических элементов вроде корзины). -
client:idle— когда браузер в простое (для оглавления). -
client:visible— когда элемент появляется в окне просмотра (для комментариев).
-
- Реализуйте межостровную коммуникацию через nano stores или браузерные события.
- Измерьте метрики и при необходимости скорректируйте директивы.
Пример типовой страницы блога:
---
// src/pages/blog/[slug].astro
import type { GetStaticPaths } from 'astro';
import { getCollection } from 'astro:content';
import BaseLayout from '@/layouts/BaseLayout.astro';
import ArticleHero from '@/components/ArticleHero.astro';
import Prose from '@/components/Prose.astro';
import TableOfContents from '@/islands/TableOfContents.tsx';
import CommentSection from '@/islands/CommentSection.tsx';
import ShareButtons from '@/islands/ShareButtons.svelte';
import NewsletterSignup from '@/islands/NewsletterSignup.vue';
export const getStaticPaths: GetStaticPaths = async () => {
const posts = await getCollection('blog', p => !p.data.draft);
return posts.map(post => ({
params: { slug: post.slug },
props: { post },
}));
};
const { post } = Astro.props;
const { Content, headings } = await post.render();
---
<BaseLayout title={post.data.title} description={post.data.description}>
<ArticleHero post={post} />
<div class="article-layout">
<TableOfContents headings={headings} client:idle />
<article>
<Prose>
<Content />
</Prose>
</article>
</div>
<ShareButtons url={Astro.url.href} title={post.data.title} client:visible />
<CommentSection articleId={post.id} client:visible={{ rootMargin: '0px 0px 200px 0px' }} />
<NewsletterSignup client:load />
</BaseLayout>
Что такое межостровная коммуникация и зачем она нужна?
Острова изолированы — у них нет общего контекста. Рекомендуем nano stores для Astro. Пример хранилища корзины:
// src/stores/cart.ts
import { atom, computed } from 'nanostores';
import { persistentAtom } from '@nanostores/persistent';
export const cartItems = persistentAtom<CartItem[]>('cart', [], {
encode: JSON.stringify,
decode: JSON.parse,
});
export const cartCount = computed(cartItems, items => items.length);
export const cartTotal = computed(cartItems, items =>
items.reduce((sum, item) => sum + item.price * item.qty, 0)
);
export function addToCart(product: Product) {
const items = cartItems.get();
const existing = items.find(i => i.id === product.id);
if (existing) {
cartItems.set(items.map(i =>
i.id === product.id ? { ...i, qty: i.qty + 1 } : i
));
} else {
cartItems.set([...items, { ...product, qty: 1 }]);
}
}
React и Svelte острова подключаются к одному хранилищу; изменение в одном немедленно отражается в другом. Альтернатива — нативные браузерные события через CustomEvent.
Что входит в работу?
- Аудит текущей архитектуры и определение островов
- Настройка Astro с поддержкой нужных фреймворков
- Перенос статичных страниц и разбивка на острова
- Реализация межостровной коммуникации
- Оптимизация директив гидрации
- Тестирование изоляции и производительности
- Документация и обучение команды
- Поддержка после деплоя на Cloudflare Pages / Netlify
Стоимость аудита и миграции рассчитывается индивидуально на основе объема работ.
Сроки реализации
- Неделя 1–2: аудит, настройка, выявление интерактивных компонентов
- Неделя 3: перенос статики, разбивка на острова
- Неделя 4: межостровная коммуникация, тестирование изоляции
- Неделя 5: измерение Core Web Vitals, оптимизация
- Неделя 6: деплой, документация
Наша команда с многолетним опытом и более чем 50 успешных миграций гарантирует результат. Закажите аудит производительности на сайте — мы свяжемся с вами в течение дня и предложим оптимальное решение.