Astro Server Islands: Как сохранить скорость страницы, не жертвуя интерактивностью

Большинство контентных сайтов не нуждаются в полноценном одностраничном приложении. Им нужен быстрый HTML, а затем небольшое количество JavaScript для каруселей, комментариев или фильтров. Именно для этого и предназначены Astro Server Islands.

Astro по умолчанию генерирует статический HTML. Интерактивные компоненты становятся «островками», которые гидратируются только по запросу. Остальная часть страницы остаётся лёгкой, что положительно сказывается на LCP, FCP и Core Web Vitals.

Как работают Server Islands

Представьте страницу как набор статических зон с несколькими интерактивными компонентами:

• Статический контент рендерится на сервере и доставляется как HTML.
• Каждый «островок» — это изолированный интерактивный компонент.
• JavaScript загружается только для этих компонентов.
• Время гидратации контролируется с помощью клиентских директив.

Полезные директивы:

• client:load — гидратация после загрузки страницы (чат, кнопки «поделиться», «лайк»).
• client:idle — гидратация, когда браузер бездействует.
• client:visible — гидратация, когда компонент появляется в области просмотра (карусели, виджеты ниже сгиба).
• client:only — рендеринг только на клиенте.

Правило: используйте client:load для UI, который должен работать сразу после загрузки страницы. Для всего остального — client:visible.

Связка Astro с headless CMS

Astro отлично справляется с доставкой контента, а headless CMS — с управлением контентом. С BCMS вы получаете шаблоны (типы контента), записи (посты), медиа и типизированный контент, который ваш фронтенд может загружать без необходимости хранить Markdown в репозитории для каждого редактирования.

Такое разделение важно: редакторы обновляют контент в дашборде, разработчики сохраняют свободу выбора фреймворка. Сайт при этом по-прежнему отдаёт в основном статический HTML.

Практическая настройка

Начните со стартового шаблона BCMS Astro:

После входа в систему и указания имени проекта:

В BCMS:

• Шаблоны определяют структуру записи блога.
• Записи — это сами посты.
• Перезапустите приложение Astro после изменений модели контента, чтобы обновились типы и данные.

Добавляем «островок»: карусель изображений

Типичный пример:

• Установите Vue-карусель (стартовые шаблоны Astro часто уже включают Vue).
• Добавьте медиа-поле в шаблон блога в BCMS.
• Создайте Vue-компонент, который принимает коллекцию медиа как пропс.
• Выведите его на странице блога с директивами client:load или client:visible.

В качестве запасного варианта используйте обложку, если поле карусели пусто. Это гарантирует, что страница останется полезной, даже если редакторы пропустят опциональные медиа.

Продакшн-режим

Используйте npm run build, затем раздавайте папку dist. Посетители получат HTML без ожидания обращения к базе данных для каждой загрузки страницы. Вы сохраняете интерактивность только там, где она оправдана.