Scripts del lado cliente

¿No basta con las islas?

A veces no necesitas un framework entero para un poco de interactividad. Quieres algo de JS para "cuando se haga click en este botón, abre este menú", "valida este input", "haz toggle a esa clase". Para eso, los archivos .astro aceptan etiquetas <script>.

Un <script> normal y corriente

Lo que está dentro de <script> se envía al navegador y se ejecuta una vez la página se carga.

¿Qué hace Astro con esos scripts?

Por defecto, Astro:

1. Bundlea el script (puedes usar imports de paquetes npm).
2. Procesa TypeScript sin que tengas que configurar nada.
3. Deduplica: si dos páginas usan el mismo <script>, no se descarga dos veces.
4. Hace tree-shaking: solo entra al bundle lo que de verdad usas.

Imports dentro de scripts

Astro instala/empaqueta motion automáticamente.

Scripts inline y atributos especiales

Puedes desactivar el procesamiento si quieres dejar un script tal cual:

• is:inline → no lo procesa, no lo bundlea.
• define:vars={{ foo: "bar" }} → inyecta variables del frontmatter como globales del script.

Scope de los scripts en componentes

Si un componente tiene un <script> y lo usas dos veces en una página, el script solo se ejecuta una vez (Astro lo deduplica). No es un script "por instancia": es un script "por componente". Si necesitas lógica para cada instancia, busca elementos con querySelectorAll y aplica el comportamiento a cada uno.

¿Cuándo usar <script> y cuándo una isla?

Una guía rápida:

• Lógica simple, sin estado complejo, sin re-renderizado → <script>. Es liviano y barato.
• UI con estado, listas dinámicas, formularios complejos → componente de framework como isla (client:*).

No te obsesiones: muchas webs profesionales mezclan los dos.

Tu desafío 🚀

Abre src/pages/index.astro. Verás un <button id="saludar">.

1. Añade un bloque <script>...</script> en el archivo.
2. Dentro, usa document.querySelector("#saludar") (o getElementById) para encontrar el botón.
3. Llama a addEventListener("click", ...) para escuchar el click.
4. En el callback, llama a alert("Hola!") (o el mensaje que prefieras).

Si todo va bien, al hacer click verás el alert. Acabas de añadir interactividad sin frameworks y sin pagar coste de runtime.