Паттерн архитектуры островов
Отправляйте преимущественно статический HTML и гидратируйте только интерактивные виджеты для оптимального времени до интерактивности.
«Паттерн архитектуры островов» — бесплатный урок React Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения React Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс React Academy содержит 4 уроков всего.
Что такое архитектура островов?
Архитектура островов отправляет в основном статический HTML с небольшими независимо гидратируемыми интерактивными секциями (островами). Большая часть страницы не использует JS; островами React становятся только виджеты, которым нужна интерактивность.
Какую проблему это решает
Традиционный SSR гидратирует всю страницу, даже если 90% её содержимого статично (заголовки, текст, изображения). Острова гидратируют только интерактивные части, значительно сокращая объём JavaScript, отправляемого браузеру.
Основная концепция
Представьте страницу как море статического HTML с плавающими в нём островами интерактивности. Каждый остров гидратируется независимо и при необходимости может использовать другой фреймворк.
Astro как фреймворк для островов
Astro сделал архитектуру островов популярной. По умолчанию компоненты не используют JS. Добавьте директиву client:*, чтобы включить гидратацию.
---
import Header from './Header.astro'; // static — 0 JS
import SearchBar from './SearchBar.jsx'; // island — hydrated
import Footer from './Footer.astro'; // static — 0 JS
---
<Header />
<SearchBar client:load /> <!-- hydrate immediately -->
<SearchBar client:idle /> <!-- hydrate when browser is idle -->
<SearchBar client:visible /> <!-- hydrate when scrolled into view -->
<Footer />Директивы гидратации
Фреймворки для островов предлагают точную настройку времени гидратации: client:load (немедленно), client:idle (requestIdleCallback), client:visible (IntersectionObserver), client:media (медиазапрос CSS).
Реализация островов в Next.js
Маршрутизатор приложения Next.js приближённо реализует острова с помощью разделения на серверные и клиентские компоненты. Серверные компоненты = статические; клиентские компоненты = острова.
// Most of the page is a Server Component (no JS sent)
export default async function ProductPage() {
const product = await getProduct();
return (
<article>
<h1>{product.name}</h1>
<p>{product.description}</p>
{/* Only the interactive button is a Client Component island */}
<AddToCartButton product={product} />
</article>
);
}Ручная реализация островов с ленивой загрузкой React
Без специализированного фреймворка реализуйте острова, загружая интерактивные компоненты только после загрузки страницы.
const HeavyWidget = lazy(() => import('./HeavyWidget'));
function Page() {
const [show, setShow] = useState(false);
const containerRef = useRef(null);
useEffect(() => {
const obs = new IntersectionObserver(([entry]) => {
if (entry.isIntersecting) setShow(true);
});
obs.observe(containerRef.current);
return () => obs.disconnect();
}, []);
return (
<div ref={containerRef}>
{show && <Suspense fallback={null}><HeavyWidget /></Suspense>}
</div>
);
}Компромиссы
Преимущества: минимум JS, быстрое достижение TTI, агрессивное кэширование статического содержимого. Издержки: острова не могут легко обмениваться состоянием (отдельные контексты JS), а архитектура сложнее, чем у стандартного SPA.
Обмен состоянием между островами
Используйте встроенные в браузер механизмы (пользовательские события, URL, localStorage) или небольшой общий одиночный контейнер состояния для обмена данными между независимыми островами.
// Shared nano-store (nanostores library works well with Astro):
import { atom } from 'nanostores';
export const cartCount = atom(0);
// Island A:
cartCount.set(cartCount.get() + 1);
// Island B subscribes:
cartCount.subscribe(count => setDisplay(count));Когда использовать архитектуру островов
Лучше всего подходит для сайтов с большим количеством содержимого (блогов, интернет-магазинов, маркетинговых сайтов), где большая часть содержимого статична и лишь нескольким компонентам нужна интерактивность (поиск, корзина, формы).
Острова, SSR и SPA
SPA: весь JS, гидратируется всё. SSR: сервер отрисовывает и гидратирует всё. Острова: сервер отрисовывает всё, а гидратируются только интерактивные виджеты. Для сайтов с большим количеством содержимого острова обеспечивают лучшую производительность.
Быстрая проверка
Какое основное преимущество шаблона архитектуры островов с точки зрения производительности?
Итоги
Архитектура островов сохраняет большую часть HTML статичной (без JS) и гидратирует только интерактивные виджеты. Используйте Astro как специализированный фреймворк для островов или приблизительно реализуйте этот подход с помощью серверных и клиентских компонентов Next.js. Для некритичных островов выполняйте ленивую гидратацию с помощью client:visible/IntersectionObserver.
Часто задаваемые вопросы
Урок «Паттерн архитектуры островов» бесплатный?
Да — полный текст урока «Паттерн архитектуры островов» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс React Academy, подпишись на CoddyKit PRO. Курс React Academy содержит 4 уроков всего.
Чему я научусь в уроке «Паттерн архитектуры островов»?
Отправляйте преимущественно статический HTML и гидратируйте только интерактивные виджеты для оптимального времени до интерактивности. Ты практикуешь React Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать React Academy?
Предыдущий опыт не требуется. React Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.
Сколько времени занимает урок «Паттерн архитектуры островов»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке React Academy?
Да. Каждый урок React Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Как работает SSR React изнутри
- Ошибки гидратации: причины и исправления
- Выборочная гидратация и потоковая передача HTML
- Паттерн архитектуры островов