Архитектура островов

Архитектура островов сочетает в основном статический HTML с изолированными интерактивными компонентами (островами), которые гидратируются независимо.

Общий объём JS уменьшается, поскольку гидратируются только компоненты, которым нужна интерактивность. TTI становится быстрее.

Astro популяризировал этот шаблон, а SvelteKit может использовать его благодаря сочетанию предварительной генерации и выборочной гидратации.

Предварительно генерируйте страницы и используйте ssr = true, а интерактивность откладывайте с помощью ленивой загрузки отдельных компонентов.

SvelteKit разделяет код по маршрутам. Для дополнительного разделения используйте динамический import() внутри страниц.

Маркетинговые страницы могут быть статическими, а форма «Подписаться» — островом с динамической гидратацией.

Меньший объём JS, более быстрая отрисовка крупнейшего содержимого, лучшие основные веб-показатели.

Архитектура становится сложнее. Смешанный статический и динамический подход требует тщательного планирования.

Объединяйте острова с пограничным SSR, чтобы обеспечить быструю первую отрисовку для пользователей по всему миру и минимальный объём JS.

Astro специально создан для островной архитектуры, а возобновляемость Qwik развивает эту идею ещё дальше.

Сайты с большим объёмом контента и периодической интерактивностью: блоги, документация, интернет-магазины.

Островная архитектура сочетает статический HTML с выборочной гидратацией интерактивных компонентов, обеспечивая минимальный объём JS и быстрый TTI.