Astro y React: La Combinación Perfecta

La combinación de Astro y React ofrece lo mejor de dos mundos: el rendimiento excepcional de los sitios estáticos y la interactividad de React.

¿Qué hace especial a esta combinación?

1. Island Architecture

Astro utiliza una arquitectura de “islas” donde solo las partes interactivas de tu página cargan JavaScript:

• El contenido estático se renderiza como HTML puro
• Los componentes React solo se hidratan cuando es necesario
• Reduces drásticamente el JavaScript que llega al navegador

2. Directivas de Cliente

Con Astro puedes controlar exactamente cuándo y cómo se carga React:

<!-- Carga inmediata -->
<Component client:load />

<!-- Carga cuando es visible -->
<Component client:visible />

<!-- Solo en dispositivos móviles -->
<Component client:media="(max-width: 768px)" />

3. Renderizado en el Servidor

Todo se pre-renderiza en el servidor por defecto, lo que significa:

• SEO perfecto: Los motores de búsqueda ven todo el contenido
• Carga instantánea: No hay spinner de carga inicial
• Mejor accesibilidad: Funciona incluso sin JavaScript

Ejemplo Práctico

Imagina que tienes un blog (como este) donde la mayoría del contenido es estático, pero quieres un botón de “Me gusta” interactivo:

// LikeButton.tsx
import { useState } from 'react';

export default function LikeButton() {
  const [likes, setLikes] = useState(0);

  return (
    <button onClick={() => setLikes(likes + 1)}>
      ❤️ {likes} Me gusta
    </button>
  );
}

Solo este componente cargará React en el cliente, mientras que el resto de la página permanece como HTML estático.

Ventajas en Números

• ~85% menos JavaScript comparado con un SPA tradicional
• Lighthouse score de 100 fácilmente alcanzable
• Tiempo de carga < 1 segundo en la mayoría de casos

Conclusión

Si necesitas un sitio con buen SEO, carga rápida y algo de interactividad, Astro + React es la elección perfecta. No sacrificas rendimiento por funcionalidad.

¿Qué esperas para probarlo en tu próximo proyecto?