LuisLlamas Logo
astro-islas-ui-frameworks

Islas - Usando React, Vue y Svelte en Astro

  • 5 min
  • Intermedio

Hasta ahora hemos tratado a Astro como un generador de sitios estáticos. Es decir, hemos usado componentes de Astro, routing y Markdown para generar contenido estático.

Pero el ecosistema de JavaScript es inmenso. Probablemente ya tengas una librería de componentes en React que te encanta, un calendario complejo hecho en Vue, o simplemente prefieras la reactividad de Svelte para ciertas interacciones.

¿Tenemos que reescribirlo todo para usar Astro? Va a ser que no. Puedes traer tus propios componentes de tu framework favorito y Astro los renderizará.

El concepto de “Bring Your Own Framework”

Astro intenta no reinventar la rueda de la reactividad. En lugar de crear su propio motor complejo de gestión de estado en el cliente (como el Virtual DOM de React), Astro te permite usar los motores que ya existen.

Puedes usar, React / Preact, Vue, Svelte, SolidJS, AlpineJS… casi cualquier Framework que se te ocurra. Y lo más impresionante: puedes usarlos todos a la vez en la misma página.

Aunque, por el bien de tu salud mental (y del rendimiento), te recomiendo que tampoco se te vaya la cabeza mezclando librerías a lo loco.

Instalación de adaptadores

Para que Astro entienda un componente de React o Vue, necesitamos instalar su adaptador correspondiente.

Como vimos en el artículo anterior con Tailwind, usaremos el comando astro add.

Por ejemplo, con React abriríamos la terminal y ejecutamos:

npx astro add react
Copied!

El asistente de Houston realizará las siguientes tareas:

  1. Instalará @astrojs/react y react / react-dom.
  2. Configurará el tsconfig.json para soportar JSX ("jsx": "react-jsx").
  3. Añadirá la integración en astro.config.mjs.

Si fuera otro framework como Vue o Svelte, el proceso es idéntico:

npx astro add vue
# o
npx astro add svelte
Copied!

Una vez terminado, si miramos nuestro astro.config.mjs, veremos algo así:

import { defineConfig } from 'astro/config';
import react from '@astrojs/react';
import tailwind from '@astrojs/tailwind';

export default defineConfig({
  // ¡Podemos tener múltiples integraciones a la vez!
  integrations: [tailwind(), react()],
});
Copied!

Creando nuestro primer componente de Framework

Vamos a crear un componente clásico: un Contador en React (aburrido como el solo, pero es el “hola mundo” de la reactividad).

Lo crearemos en la carpeta src/components/, pero esta vez con la extensión .jsx (o .tsx si usas TypeScript).

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

export default function Contador() {
  const [cuenta, setCuenta] = useState(0);

  return (
    <div className="p-4 border rounded bg-white shadow">
      <p className="text-xl mb-2">Cuenta actual: {cuenta}</p>
      <button 
        className="bg-blue-500 text-white px-4 py-2 rounded"
        onClick={() => setCuenta(cuenta + 1)}
      >
        Sumar +1
      </button>
    </div>
  );
}
Copied!

Es un componente de React estándar. No hay nada específico de Astro en este código.

Renderizando el componente en Astro

Ahora volvemos a una de nuestras páginas, por ejemplo src/pages/index.astro, e importamos el componente.

src/pages/index.astro
---
import Layout from '../layouts/Layout.astro';

// Importamos el componente de React igual que uno de Astro
import Contador from '../components/Contador.tsx';
---

<Layout title="Probando React">
  <h1>Probando integraciones</h1>
  
  <p>A continuación verás un componente de React:</p>

  <Contador />

</Layout>
Copied!

La “Trampa” del renderizado estático

Si guardas el archivo y vas al navegador, verás el contador. Verás el botón azul. Pero si haces click en el botón, ¡no pasará nada!

¿Está roto? ¿Hemos configurado mal React? No. Bienvenido a la filosofía de Astro.

Por defecto, Astro renderiza los componentes de UI (React, Vue, etc.) solo en el servidor (Server Side Rendering - SSR).

Es decir, lo que esta pasanfo

Astro ejecuta el código de React en el backend durante la compilación.

React genera el HTML resultante (<div>...Cuenta: 0...</div>).

Astro toma ese HTML, lo inyecta en la página y se lo envía al usuario.

Astro elimina el JavaScript de React.

Esto es el “Zero JS by default”. Astro asume que, si no le dices lo contrario, solo quieres usar React como un motor de plantillas para generar HTML bonito, no para interactividad.

Esta característica es genial para componentes como Headers, Footers o Sidebar. Puedes construirlos en React con toda su potencia, pero al usuario le llega HTML puro sin el peso de la librería React.

Mezclando frameworks

Solo por demostrar la capacidad (aunque rara vez lo hagas en producción), podríamos tener un componente de Vue al lado.

Crea src/components/Aviso.vue:

<script setup>
  defineProps(['mensaje'])
</script>

<template>
  <div class="aviso">
    ¡Vue dice: {{ mensaje }}!
  </div>
</template>

<style scoped>
  .aviso { color: green; font-weight: bold; }
</style>
Copied!

Y usarlo junto al de React:

---
import Contador from '../components/Contador.tsx';
import Aviso from '../components/Aviso.vue';
---

<Contador />
<Aviso mensaje="Hola desde el otro lado" />
Copied!

Astro se encarga de gestionar los procesos de compilación de ambos (usando Vite por debajo) y unificarlos en una sola página.

¿Cómo hago que funcione el botón?

Ahora te estarás preguntando:

Maravilloso el HTML estático, Luis, pero yo quiero que el botón sume

Ok, ok. 👍. Para que el componente “reviva” en el navegador y sea interactivo, necesitamos decirle a Astro explícitamente que cargue el JavaScript.

Este proceso se llama Hidratación.

Astro utiliza un sistema de Directivas de Hidratación (client:*) para controlar este comportamiento con precisión quirúrgica.

Pero ese es un tema tan importante que tiene su propio artículo. En la próxima entrega, veremos cómo “despertar” a nuestras Islas de interactividad.

En esta página