Большинство контентных сайтов не нуждаются в полноценном одностраничном приложении. Им нужен быстрый 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:
npx @thebcms/cli create astro starter simple-blogПосле входа в систему и указания имени проекта:
cd your-project && npm install && npm run devВ BCMS:
- Шаблоны определяют структуру записи блога.
- Записи — это сами посты.
- Перезапустите приложение Astro после изменений модели контента, чтобы обновились типы и данные.
Добавляем «островок»: карусель изображений
Типичный пример:
- Установите Vue-карусель (стартовые шаблоны Astro часто уже включают Vue).
- Добавьте медиа-поле в шаблон блога в BCMS.
- Создайте Vue-компонент, который принимает коллекцию медиа как пропс.
- Выведите его на странице блога с директивами client:load или client:visible.
В качестве запасного варианта используйте обложку, если поле карусели пусто. Это гарантирует, что страница останется полезной, даже если редакторы пропустят опциональные медиа.
Продакшн-режим
Используйте npm run build, затем раздавайте папку dist. Посетители получат HTML без ожидания обращения к базе данных для каждой загрузки страницы. Вы сохраняете интерактивность только там, где она оправдана.
Fluxs
Комментарии (2)
Войдите, чтобы комментировать.