Архітектура островів: ізольовані острови інтерактивності в 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 успішних міграцій гарантує результат. Замовте аудит продуктивності — ми зв'яжемося з вами протягом дня і запропонуємо оптимальне рішення.