En el ecosistema de JavaScript, es común construir sitios enteros con frameworks como React. El problema es que, a menudo, terminamos enviando cientos de kilobytes de JavaScript al navegador para potenciar una página que es, en su mayoría, contenido estático. El resultado: tiempos de carga lentos y una mala experiencia de usuario.
Astro resuelve este problema con un enfoque revolucionario: la arquitectura de islas (Astro Islands). Por defecto, tu sitio es HTML estático sin JavaScript. Luego, vos decidís qué componentes necesitan ser interactivos y cuándo deben cargarse. A este proceso lo llamamos hidratación.
¿Qué es una “Isla” de Astro?
Imaginá tu página como un océano de HTML estático, rápido y renderizado en el servidor. Una “isla” es un componente interactivo que flota en ese océano. Puede ser un carrusel de imágenes, un menú de navegación o un formulario de contacto. Cada isla se carga y se hidrata de forma independiente, en paralelo, y solo cuando es necesario.
Esta es la magia de Astro: podés seguir usando tus componentes de React, pero solo pagás el costo de performance por la interactividad que realmente aportá valor.
Las Directivas client:*: Tu Caja de Herramientas
Astro te da un control granular sobre cómo y cuándo se hidratan tus islas de React a través de las directivas client:*.
client:load
Hidrata el componente tan pronto como la página carga. Usalo con moderación.
- Cuándo usarlo: Para elementos interactivos que están en la parte superior de la página (above the fold) y deben estar funcionales de inmediato. Por ejemplo, un header con un menú desplegable.
---
import InteractiveHeader from '../components/InteractiveHeader.jsx';
---
<InteractiveHeader client:load />client:idle
Espera a que el navegador termine con las tareas importantes de la carga inicial y esté “libre” (idle) para hidratar el componente.
- Cuándo usarlo: Para componentes de prioridad media que están en la vista inicial pero no son críticos. Por ejemplo, un carrusel de imágenes que no es el elemento principal.
---
import ImageCarousel from '../components/ImageCarousel.jsx';
---
<ImageCarousel client:idle />client:visible
La opción más potente para la performance. Usa un IntersectionObserver para detectar cuándo el componente entra en el área visible del usuario y solo entonces lo hidrata.
- Cuándo usarlo: Para la mayoría de los componentes que están por debajo del fold. Mapas, gráficos, reproductores de video, formularios de contacto, etc.
---
import ContactForm from '../components/ContactForm.jsx';
---
<ContactForm client:visible />client:media={query}
Hidrata el componente solo si una media query de CSS se cumple.
- Cuándo usarlo: Para componentes que solo son interactivos en ciertos tamaños de pantalla. El caso de uso clásico es un menú de hamburguesa en móviles.
---
import MobileMenu from '../components/MobileMenu.jsx';
---
<MobileMenu client:media="(max-width: 768px)" />client:only={framework}
Evita por completo el renderizado en servidor (SSR). El componente se renderiza e hidrata solo en el cliente. Esencial para componentes que dependen de APIs del navegador como window.
---
import MyClientComponent from '../components/MyClientComponent.jsx';
---
<MyClientComponent client:only="react" />Compartiendo Estado Entre Islas
Por diseño, las islas son componentes aislados. Si necesitás que se comuniquen entre sí (por ejemplo, un botón que añade un producto a un carrito de compras en el header), el Context de React no funciona entre islas. La solución recomendada es usar una pequeña librería de estado global como Nano Stores, que está diseñada para este ecosistema.
Conclusión: Lo Mejor de Ambos Mundos
La estrategia de hidratación a demanda de Astro te permite construir sitios web increíblemente rápidos sin renunciar a la potencia y el ecosistema de React. Al enviar menos JavaScript, lográs:
- Mejor LCP: Menos recursos bloqueando el renderizado.
- Mejor INP: El hilo principal del navegador está menos ocupado, por lo que puede responder más rápido a las interacciones del usuario.
- Una experiencia de usuario superior.
¿Querés migrar una landing de React pesada a Astro sin perder interactividad? En LevelAR lo hacemos por etapas, midiendo cada mejora para demostrar el impacto en tus métricas de negocio. Contactanos.