Представьте: вы загружаете страницу блога, а браузер скачивает 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— когда элемент появляется в окне просмотра (для комментариев).
Пример типовой страницы блога:
--- // 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 успешных миграций гарантирует результат. Закажите аудит производительности на сайте — мы свяжемся с вами в течение дня и предложим оптимальное решение.
-