Архитектура «острова» — это компромисс: HTML рендерится статически, а интерактивность подключается точечно, только там, где она нужна.
Директивы гидратации#
ProjectsPage.astro
<ProjectsGrid client:load categories={categories}>
<!-- статическая разметка карточек, доступна без JS -->
</ProjectsGrid>
<CaseModal client:idle />client:load— гидратация сразу, для критичного интерактива.client:idle— когда браузер свободен, для второстепенного интерактива.client:visible— при появлении в вьюпорте, лучший вариант по умолчанию.client:media— только при совпадении медиа-запроса (например, мобильное меню).
Частая ошибка
client:load на каждом острове «на всякий случай» — самый быстрый способ выйти за бюджет JS на первой загрузке.
Мы проверяем бюджет вручную после каждого раунда: суммарный gzip JS первой загрузки не должен превышать ~70 КБ, из них ~35 КБ — рантайм Vue.
Ключевые выводы
- client:visible откладывает гидратацию до появления в вьюпорте — почти всегда правильный выбор по умолчанию.
- client:load оправдан только для того, что обязано работать сразу же (мобильное меню, критичная форма).
- Общий бюджет первой загрузки стоит проверять руками на каждой новой странице, а не раз в квартал.
- Статическая разметка передаётся в слот компонента — так контент остаётся доступным без JS вообще.
