ASTRO
#astro#islands#client-visible#viewport#performance

Astro: островок с client:visible — гидратация при появлении в viewport

Директива client:visible запускает гидратацию островка только когда элемент попадает в зону видимости. Меньше JS при загрузке.

Как использовать

  1. Скопируйте нужный фрагмент кода.
  2. Вставьте в свой проект и при необходимости измените под задачу.
  3. Проверьте зависимости и окружение (версии, переменные).

client:visible гидратирует островок только когда он попадает в viewport (Intersection Observer). Подходит для виджетов ниже первого экрана: калькуляторы, формы, галереи. Документация: client:visible.

---
// src/pages/pricing.astro
import Layout from '../layouts/BaseLayout.astro';
import PricingCalc from '../components/PricingCalc.tsx';
---
<Layout title="Стоимость">
  <section>
    <h2>Калькулятор стоимости</h2>
    <p>Виджет загрузится и станет интерактивным только когда пользователь доскроллит сюда.</p>
    <PricingCalc client:visible />
  </section>
</Layout>

Когда использовать:

  • Виджет (калькулятор, форма, фильтры) находится ниже первого экрана.
  • Нужно уменьшить объём JS при первой загрузке.
  • Контент в основном статический, интерактив точечный.

Usage:

Добавьте client:visible к компоненту вместо client:load. Гидратация произойдёт при первом появлении элемента в зоне видимости (по умолчанию с небольшим отступом).

Notes:

⚠️ До срабатывания Intersection Observer островок отображается как статический HTML (если компонент что-то рендерит при сборке). Для «above the fold» интерактива используйте client:load.

Похожие сниппеты