ASTRO
#astro#islands#react#client-load#hydration

Astro: островок React с client:load

Подключение React-компонента как островка с директивой client:load — гидратация при загрузке страницы.

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

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

Островок — интерактивный компонент (React, Vue, Svelte и т.д.), который гидратируется в браузере. Директива client:load запускает гидратацию после загрузки страницы. Документация: Client directives, Add React.

---
// src/pages/docs.astro
import Layout from '../layouts/BaseLayout.astro';
import Counter from '../components/Counter.tsx';
---
<Layout title="Документация">
  <h1>Документация</h1>
  <p>Весь текст — статический HTML. Кнопка ниже — островок React.</p>
  <Counter client:load />
</Layout>

Компонент React (пример):

// src/components/Counter.tsx
import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount((c) => c + 1)}>
      Счётчик: {count}
    </button>
  );
}

Usage:

client:load — гидратация при загрузке DOM. Используйте для виджетов, которые должны быть интерактивны сразу (счётчик, форма в футере, переключатель темы).

Notes:

⚠️ Для React нужна интеграция @astrojs/react в astro.config.mjs. Островок отправляется в браузер отдельным бандлом; остальная страница остаётся статическим HTML.

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