# Vue-острова и бюджет гидратации: сколько JS можно позволить на статичном сайте

Каждый Vue-компонент на странице — это килобайты рантайма. Разбираем, как мы выбираем директиву гидратации и считаем бюджет вручную.

*Рубрика: Разработка · Опубликовано: 5 марта 2026 г. · Автор: Александр Покидов*

Канонический URL: https://pokidov.dev/blog/vue-islands-i-byudzhet-gidratatsii

---

Архитектура «острова» — это компромисс: HTML рендерится статически, а интерактивность подключается точечно, только там, где она нужна.

## Директивы гидратации

ProjectsPage.astro
```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 вообще.