Astro está diseñado para generar HTML rápido y ligero, pero también puedes añadir componentes interactivos (botones, sliders, contadores, etc.) usando JavaScript o frameworks conocidos.

🧩 1. Cómo añadir JavaScript en Astro

Astro te da varias formas de usar JS. Veamos las principales 👇

✅ Opción 1. Script directo dentro del `.astro`

Puedes escribir un <script> directamente en el mismo archivo.

1<h1>Contador simple</h1>
2<button id="btn">Haz clic</button>
3<p id="out">0</p>
4
5<script>
6  let contador = 0;
7  document.getElementById("btn").addEventListener("click", () => {
8    contador++;
9    document.getElementById("out").textContent = contador;
10  });
11</script>

💡 Este código sí se envía al navegador (a diferencia del que va entre ---).

🟢 Úsalo para pequeñas interacciones.

✅ Opción 2. Archivo JS externo

También puedes enlazar un script separado:

1<html>
2  <head>
3    <script src="/scripts/main.js" defer></script>
4  </head>
5  <body>
6    <button id="btn">Incrementar</button>
7    <p id="out">0</p>
8  </body>
9</html>

public/scripts/main.js

1let contador = 0;
2document.getElementById("btn").addEventListener("click", () => {
3  contador++;
4  document.getElementById("out").textContent = contador;
5});

✅ Perfecto para organizar mejor tu código. ✅ Se guarda en public/ para que se sirva directamente.

🧠 2. Diferencia entre JavaScript del servidor y del cliente

Astro ejecuta dos tipos de código JS:

Tipo	Dónde se ejecuta	Ejemplo
Servidor	En la parte superior del `.astro` (entre `---`)	Lógica que genera contenido antes de enviarlo
Cliente	En `<script>` o componentes con `client:`	Interactividad en el navegador

Ejemplo:

1---
2const fecha = new Date().toLocaleDateString();
3---
4
5<p>Hoy es {fecha}</p>

El cálculo se hace en el servidor (no en el navegador).

⚙️ 3. Qué es la "Island Architecture" (arquitectura de islas)

Astro genera una página estática (solo HTML) y luego inyecta pequeñas “islas” interactivas solo donde las necesitas.

Por ejemplo:

Una web estática con un contador React.
Un blog estático con buscador dinámico en JS.

Esto ahorra rendimiento y JavaScript innecesario. 💨 Resultado: páginas ultrarrápidas.

🌐 4. Integrar frameworks (React, Vue, Svelte…)

Astro te permite mezclar frameworks sin esfuerzo. Por ejemplo, puedes usar React solo en un componente.

Paso 1. Instalar la integración

Ejemplo con React:

1npx astro add react

Para Vue:

1npx astro add vue

Para Svelte:

1npx astro add svelte

Astro configurará todo automáticamente.

Paso 2. Crear un componente React

src/components/Contador.jsx

1import { useState } from 'react';
2
3export default function Contador() {
4  const [n, setN] = useState(0);
5  return (
6    <div>
7      <h3>Contador React: {n}</h3>
8      <button onClick={() => setN(n + 1)}>Incrementar</button>
9    </div>
10  );
11}

Paso 3. Usarlo dentro de una página `.astro`

1---
2import Contador from '../components/Contador.jsx';
3---
4
5<h1>Interactividad con React</h1>
6
7<!-- Se renderiza solo en el cliente -->
8<Contador client:load />

💡 El atributo client:load indica cuándo se carga el componente. Vamos a ver los diferentes modos 👇

🕹️ 5. Modos de renderizado del cliente (`client:*`)

Astro ofrece varias estrategias para cargar componentes en el navegador.

Modo	Cuándo se ejecuta	Ideal para
`client:load`	Justo al cargar la página	Elementos esenciales (ej. botones)
`client:idle`	Cuando el navegador está libre	Scripts no urgentes
`client:visible`	Cuando el componente entra en pantalla	Elementos fuera del viewport
`client:media="(prefers-color-scheme: dark)"`	Según una media query	Modo oscuro, responsive
`client:only="react"`	Solo React en cliente, sin SSR	Apps 100% SPA

Ejemplo:

1<Contador client:visible />

👉 El contador solo se activa cuando el usuario lo ve, ahorrando recursos.

💬 6. Integrar librerías JS (ejemplo: Chart.js)

Puedes usar cualquier librería JS en un componente de framework.

Ejemplo con React y Chart.js:

1npm install chart.js

src/components/Grafico.jsx

1import { useEffect, useRef } from 'react';
2import { Chart } from 'chart.js/auto';
3
4export default function Grafico() {
5  const canvasRef = useRef();
6
7  useEffect(() => {
8    new Chart(canvasRef.current, {
9      type: 'bar',
10      data: {
11        labels: ['Ene', 'Feb', 'Mar'],
12        datasets: [{ label: 'Ventas', data: [10, 20, 15], backgroundColor: 'purple' }],
13      },
14    });
15  }, []);
16
17  return <canvas ref={canvasRef}></canvas>;
18}

Y en la página:

1<Grafico client:load />

🎉 Ahora tienes un gráfico interactivo dentro de Astro.

⚡ 7. Cuándo usar frameworks (y cuándo no)

✅ Usa Astro puro (sin frameworks) cuando:

Tu sitio es informativo (blog, landing, portfolio).
Solo necesitas HTML estático y algo de JS ligero.

✅ Usa React/Vue/Svelte cuando:

Necesitas interactividad compleja (formularios, dashboards, animaciones).
Quieres aprovechar librerías de esos ecosistemas.

Astro no te obliga a casarte con uno. Puedes usar varios a la vez, o ninguno.

🧠 En resumen:

Tema	Qué aprendiste
JS directo	Scripts pequeños en `.astro` o externos
JS del servidor	Se ejecuta antes del renderizado
Island Architecture	HTML estático con zonas interactivas
Frameworks	React, Vue, Svelte integrados fácilmente
client:*	Controla cuándo se carga un componente
Uso recomendado	JS mínimo, frameworks solo cuando sea necesario

Curso de Astro