Директивы client
Директива client:* решает не только «оживлять ли остров», но и «когда». Код острова, который виден не сразу, можно загрузить позже — например, когда посетитель до него докрутит. Так первая загрузка страницы остаётся быстрой.
Все директивы
| Директива | Когда загружается остров |
|---|---|
client:load | Сразу после загрузки страницы |
client:idle | Когда браузер закончил основную работу и простаивает |
client:visible | Когда элемент появился на экране при прокрутке |
client:media="(max-width: 700px)" | Когда выполнено условие медиазапроса |
client:only="react" | Только в браузере, без HTML при сборке |
client:visible
Кнопка «Нравится» стоит в конце статьи, и до неё доходят не все. Замените в src/pages/posts/[id].astro директиву:
<Content />
<LikeButton client:visible />Откройте статью и вкладку Network в инструментах разработчика браузера. Пока вы не докрутили до кнопки, код React не загружается; когда кнопка появляется на экране, в списке запросов появляются файлы скриптов.
client:idle
Для элементов, которые нужны скоро, но не в первую же секунду, подходит client:idle. Например, поле поиска в шапке в src/layouts/BaseLayout.astro:
---
import Search from '../components/Search.jsx';
---
<header>
<a href="/">Блог Анны</a>
<Search client:idle />
</header>Поле видно сразу как HTML, а оживает, как только браузер освободится. Сам компонент Search.jsx — обычный React-компонент с полем ввода.
client:only
Некоторые компоненты не могут выполниться при сборке: они сразу обращаются к window или localStorage. Таким компонентам дают client:only с названием библиотеки:
<ThemeSwitcher client:only="react" />Astro не будет выводить их HTML на сервере, и до загрузки скрипта на месте компонента пусто. Название библиотеки нужно, чтобы Astro знал, каким способом отрисовать компонент в браузере.
Острова сервера
В Astro 5 появились и серверные острова — директива server:defer. Она откладывает отрисовку медленного компонента .astro на сервере: страница отдаётся сразу, а этот кусок подгружается отдельным запросом. Для неё нужен режим рендеринга по запросу с адаптером — об этом глава «Данные и сервер».
Частая ошибка
Ставят client:load на каждый компонент «на всякий случай». Страница теряет главное преимущество Astro и грузит столько же JavaScript, сколько обычное React-приложение. Давайте директиву только тем компонентам, которые реагируют на действия посетителя, и выбирайте самую позднюю подходящую — чаще всего client:visible или client:idle.