Архитектура островов: выборочная гидратация

Архитектура островов, предложенная Jason Miller в 2020 году, рассматривает веб-страницу как преимущественно статический HTML с изолированными «островами» интерактивности, встроенными в него. Статический океан HTML отправляется в браузер без изменений. Только интерактивные острова загружают и выполняют JavaScript, поэтому объём JavaScript-кода пропорционален фактической интерактивности.

Каждый остров — это компонент с независимой гидратацией. Сервер формирует начальный HTML острова вместе с остальной страницей. Когда загружается JavaScript острова, он выполняет гидратацию только этого поддерева компонента. HTML вокруг островов никогда не обрабатывается JavaScript — он действительно остаётся статическим.

На странице записи блога с архитектурой островов объём JavaScript-кода может составлять 5 КБ для единственного острова с кнопкой «Нравится». Та же страница, созданная как React SPA, может отправлять более 200 КБ JavaScript-кода для гидратации всей страницы. При использовании островов объём кода пропорционален интерактивности, а не размеру страницы.

Astro — ведущий фреймворк для архитектуры островов — поддерживает острова, созданные с помощью разных фреймворков на одной странице. Рядом могут находиться остров React, остров Vue и остров на чистом JavaScript. Каждый остров собирается отдельно, поэтому пользователи загружают только код фреймворков, используемых видимыми островами.

Директива client:load выполняет гидратацию острова сразу при загрузке страницы. Используйте её для островов, которые сразу видимы и интерактивны, например для меню навигации или основной секции с полем поиска. Это стратегия гидратации с наивысшим приоритетом.

Директива client:idle ждёт, пока основной поток браузера освободится после загрузки критически важного содержимого, и только затем выполняет гидратацию острова. Это идеально подходит для элементов ниже первого экрана или второстепенных взаимодействий, которые не нужны сразу, например для панели публикации в социальных сетях.

Директива client:visible использует наблюдатель пересечений, чтобы выполнить гидратацию острова только после его появления в области просмотра. Это идеально подходит для островов, расположенных глубоко на странице, например для раздела комментариев или карусели похожих товаров, до которых большинство пользователей может никогда не дойти. JavaScript не загружается до тех пор, пока он не понадобится.

Директива client:only полностью пропускает отображение на стороне сервера и формирует остров только в браузере. Это необходимо для компонентов, использующих доступные только в браузере API (window, document), или зависящих от состояния на стороне клиента в момент монтирования. Компромисс заключается в отсутствии HTML, сформированного сервером, для этого острова.

Архитектура островов решает проблему полной гидратации, гарантируя, что JavaScript загружается и выполняется только для действительно интерактивных компонентов. На странице записи блога с кнопкой «Нравится» гидратацию проходит только остров этой кнопки — текст статьи из 1200 слов, заголовок и нижний колонтитул не вызывают выполнения JavaScript на клиенте.

У каждого острова есть собственное изолированное состояние. Острова не могут напрямую совместно использовать состояние React, поскольку являются отдельными деревьями React. Это сделано намеренно: если двум компонентам нужно общее состояние, их следует объединить в один остров. Для связи между островами используются параметры URL, события DOM или лёгкие библиотеки управления состоянием.

Сайты, перенесённые с React SPA на архитектуру островов, например сайт документации Astro, сообщают о значительных улучшениях: объём JavaScript-кода уменьшается на 70–90%, TTI на мобильных устройствах улучшается на 2–4 секунды, а показатели производительности Lighthouse растут с 60 до 90 и выше. Наиболее заметны результаты на страницах с большим объёмом содержимого.

Какая директива гидратации Astro гидратирует компонент только при прокрутке до его появления в области просмотра?

Архитектура островов оставляет большую часть страницы статическим HTML и гидратирует только отдельные интерактивные компоненты. Astro предоставляет директивы гидратации: client:load (немедленно), client:idle (после перехода в режим простоя), client:visible (при прокрутке) и client:only (рендеринг только на клиенте). Каждый остров гидратируется независимо, поэтому объем JavaScript зависит от интерактивности, а не от размера страницы.