Para usar la directiva client: en Astro y habilitar la hidratación de componentes, sigue estos pasos:
Instala Astro: Asegúrate de tener Astro instalado en tu proyecto. Si no lo tienes, puedes instalarlo usando npm:
npm install astro
Crea un Componente React: Crea un componente React que quieras hidratar. Por ejemplo, crea un archivo Counter.jsx en la carpeta src/components:
// src/components/Counter.jsx
import React, { useState } from ‘react’;
const Counter = () => {
const [count, setCount] = useState(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
};
export default Counter;
Usa el Componente en una Página Astro: Importa y usa el componente en una página Astro, habilitando la hidratación con la directiva client:. Por ejemplo, en src/pages/index.astro:
<html>
<head>
<title>My Astro Site</title>
</head>
<body>
<h1>Welcome to My Astro Site</h1>
<Counter client:load />
</body>
</html>
En este ejemplo, client:load indica que el componente Counter debe hidratarse y ejecutarse en el cliente cuando la página se carga.
Opciones de Hidratación: Astro ofrece varias opciones de hidratación que puedes usar según tus necesidades:
client:load: Hidrata el componente cuando la página se carga.
client:idle: Hidrata el componente cuando el navegador está inactivo.
client:visible: Hidrata el componente cuando se vuelve visible en la ventana de visualización.
client:media="(query)": Hidrata el componente cuando se cumple una consulta de medios específica.
client:only=“framework”: Hidrata el componente solo en el framework especificado (por ejemplo, react).
Aquí tienes un ejemplo usando client:visible:
<html>
<head>
<title>My Astro Site</title>
</head>
<body>
<h1>Welcome to My Astro Site</h1>
<Counter client:visible />
</body>
</html>
Con estos pasos, puedes habilitar la hidratación de componentes en Astro usando la directiva client:
