Astro добавил несколько директив для ваших островов (известных как компоненты). В этой статье я быстро объясню директивы, их различия и когда какие использовать.
Мы рассмотрим директивы с помощью простого приложения, чтобы продемонстрировать, как работает какая директива. Наше приложение будет иметь простой счетчик и второй компонент, который нам нужен, потому что мы хотим, чтобы у нашего основного потока были небольшие проблемы.
client:load
Эта директива укажет Astro немедленно загрузить javascript в клиенте.
Мы хотим использовать это, если нам нужна интерактивность в самом начале, когда наше приложение загружается, распространенным вариантом использования может быть навигация, потому что наш пользователь сталкивается с ней в самом начале и хочет взаимодействовать с ней напрямую.
client:idle
Мы используем client:idle, если у нас есть компонент, интерактивность которого менее необходима, Astro будет ждать, пока нашему браузеру нечего будет делать, и загрузит наш javascript, когда браузер перейдет в режим ожидания.
client:visible
На мой взгляд, это одна из самых мощных директив, которые дает нам Астро. В момент видимости Astro загрузит javascript для нашего острова, чтобы гарантировать интерактивность, но будет обслуживать его только при необходимости. Если пользователь никогда не видит компонент, пользователь никогда не загружает его javascript.
client:media="(max-width: x)"
Действует как client:load, но только когда выполняется определенное условие медиа-запроса css.
Это может быть полезно для элементов, кнопок или даже более крупных компонентов, которые вы хотите отображать только на экранах определенных размеров.
client:only="<your-framework>"
Отключает рендеринг на стороне сервера для острова, компонент будет отображаться и гидратироваться сразу после загрузки страницы.
Заключение
Astro дает нам много полезных директив для контроля, когда наш javascript должен/может быть загружен. Это очень поможет, когда дело доходит до тонкой настройки производительности вашего следующего веб-сайта.
Спасибо за чтение
Если у вас осталось немного времени, не стесняйтесь прочитать мою последнюю статью о мощных инструментах Astros:
