Архітектура островів: ізольовані острови інтерактивності в Astro

Острівна архітектура (Islands Architecture) — це метод гідратації компонентів, що дозволяє створювати інтерактивні острови на сторінці. Ми використовуємо Astro фреймворк для реалізації цього підходу, що забезпечує ізоляцію компонентів, скорочення JavaScript та покращення веб-продуктивності. Це також дозволяє інтегрувати мікрофронтенди та забезпечувати міжострівну комунікацію через nano stores.

Уявіть: ви завантажуєте сторінку блогу, а браузер скачує 200 КБ JavaScript для лише інтерактивного змісту та кнопки «Поділитися». При цьому 80% коду не потрібно для першого відображення — він просто займає мережу та процесор. Islands Architecture вирішує цю проблему: тільки необхідний JS завантажується для кожного інтерактивного блоку. Ми використовуємо цей патерн з Astro впродовж багатьох років, і наші клієнти отримують скорочення initial JS на 80–90%, зростання Lighthouse Performance до 96 балів та зниження часу взаємодії (TTI) в 4 рази. Завдяки Islands Architecture, наші клієнти отримують у 4 рази швидший TTI та у 8 разів менший TBT у порівнянні з класичним React SSR. Це дозволяє суттєво скоротити витрати на трафік та прискорити завантаження. Наприклад, для сайту з 100 000 відвідувачів на місяць економія може скласти до $3000 на рік. Оцініть вартість проєкту — зв'яжіться з нами для безкоштовного аудиту.

Архітектурна модель

Статичний 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?

Вимірювання на реальних проєктах після міграції:

Розкид залежить від кількості та складності островів, але виграш очевидний. Отримайте консультацію — ми оцінимо потенціал Islands Architecture для вашого проєкту безкоштовно.

Директиви гідрації

Як реалізувати Islands в Astro покроково?

1. Встановіть Astro з підтримкою потрібних фреймворків (npx create astro).
2. Розбийте макет на статичні та інтерактивні блоки. Статичні — .astro або .mdx, інтерактивні — .tsx, .vue, .svelte.
3. Перенесіть інтерактивні компоненти в папку islands/. Кожен файл — окремий острів.
4. Імпортуйте острів у шаблон і додайте директиву гідрації:
   • client:load — одразу при завантаженні сторінки (для критичних елементів на кшталт кошика).
   • client:idle — коли браузер у простої (для змісту).
   • client:visible — коли елемент з'являється у вікні перегляду (для коментарів).
5. Реалізуйте міжострівну комунікацію через nano stores або браузерні події.
6. Виміряйте метрики та за необхідності скоригуйте директиви.

--- // 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: деплой, документація

Наша компанія має понад 5 років досвіду в веб-розробці та виконала 50+ успішних міграцій на Islands Architecture. Наша команда з багаторічним досвідом та понад 50 успішних міграцій гарантує результат. Замовте аудит продуктивності — ми зв'яжемося з вами протягом дня і запропонуємо оптимальне рішення.