Острівна архітектура (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?
Вимірювання на реальних проєктах після міграції:
| Метрика | До (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: деплой, документація
Наша компанія має понад 5 років досвіду в веб-розробці та виконала 50+ успішних міграцій на Islands Architecture. Наша команда з багаторічним досвідом та понад 50 успішних міграцій гарантує результат. Замовте аудит продуктивності — ми зв'яжемося з вами протягом дня і запропонуємо оптимальне рішення.