Astro Islands

Astro Islands (Islas Astro aka Islas de componentes) se basan en un patrón de arquitectura web promovido por Astro. La idea de “arquitectura de islas” fue acuñada por primera vez por la arquitecta de interfaz de Etsy Katie Sylor-Miller en 2019, y se amplió en esta publicación por el creador de Preact, Jason Miller.

El término “Astro Island” se refiere a un componente de UI interactivo en una página HTML predominantemente estática. Pueden existir varias islas en una página, y una isla siempre se renderiza en forma aislada. Piensa en ellos como islas en un mar de HTML estático y no interactivo.

Fuente: Islands Architecture: Jason Miller

En Astro puedes utilizar cualquier framework de componentes de UI (React, Svelte, Vue, etc.) para renderizar islas interactivas en el navegador. Puedes “mix and match” (mezclar y combinar) diferentes frameworks en una misma página, o simplemente elegir tu favorito.

La técnica en la que se basa este patrón de arquitectura se conoce como hidratación parcial o selectiva. Astro aprovecha esta técnica para hidratar las islas automáticamente.

Astro genera todos los sitios web por defecto con cero JavaScript del lado del cliente. Usa componentes de frontend UI construidos con React, Preact, Svelte, Vue, SolidJS, AlpineJS, o Lit y Astro automáticamente los renderizará en HTML, y luego les quitará todo el JavaScript. Esto mantiene los sitios rápidos por defecto.

---
// Ejemplo: Usa un componente estático React en la página, sin JavaScript.
import MyReactComponent from '../components/MyReactComponent.jsx';
---
<!-- 100% HTML, ¡Cero JavaScript cargado en la página! -->
<MyReactComponent />

Pero a veces, se requiere JavaScript del lado del cliente para crear una UI interactiva. En lugar de obligar a toda la página a convertirse en una aplicación de JavaScript similar a SPA (aplicación de una sola página en base de JavaScript que se ejecuta en el navegador), Astro te pide crear una isla, un Astro Island.

---
// Ejemplo: Usa un componente dinámico de React en la página.
import MyReactComponent from '../components/MyReactComponent.jsx';
---
<!-- ¡Este componente ahora es interactivo en la página!
     El resto de tu sitio web se mantendrá estático con cero JS. -->
<MyReactComponent client:load />

Con Astro Islands, la gran mayoría de tu sitio web sigue siendo HTML y CSS puro y ligero. En el ejemplo anterior, agregamos una sola isla de interactividad aislada sin cambiar el resto de la página.

El beneficio más obvio de construir con Astro Islands es el rendimiento: la mayor parte de tu sitio web se convierte a HTML rápido y estático, y el JavaScript solo se carga para los componentes individuales que lo necesitan. JavaScript es uno de los assets más lentos que puede cargar byte por byte, por lo que cada byte cuenta.

Otro beneficio es la carga en paralelo. En la ilustración del ejemplo anterior, la isla del “carrusel de imágenes” de baja prioridad no necesita bloquear la isla del “encabezado” de alta prioridad. Los dos se cargan en paralelo y se hidratan de forma aislada, lo que significa que el encabezado se vuelve interactivo de inmediato sin tener que esperar que cargue el carrusel más pesado en la parte inferior de la página.

Aún mejor, puedes decirle a Astro exactamente cómo y cuándo renderizar cada componente. Si cargar ese carrusel de imágenes es realmente costoso, puedes adjuntar una client directive (directiva de cliente) especial que le indica a Astro a solo cargar el carrusel al momento en que sea visible en la página. Si el usuario nunca lo ve, nunca se carga.

En Astro, depende de ti como desarrollador decirle explícitamente a Astro cuáles componentes de la página deben ejecutarse también en el navegador. Astro solo hidratará exactamente lo que se necesita en la página y dejará el resto de tu sitio como HTML estático.

¡Las Islas son el secreto del rendimiento rápido por defecto de Astro!