Saltearse al contenido

Astro Islands

Astro fue pionero y popularizó una arquitectura de frontend llamada Islas. La arquitectura de islas da como resultado un mejor rendimiento del frontend al ayudarte a evitar patrones monolíticos de JavaScript y eliminar automáticamente todo el JavaScript no esencial de la página. Los desarrolladores siguen usando sus componentes y frameworks de UI favoritos con Astro y aún obtienen estos beneficios.

Una breve historia

Sección titulada Una breve historia

El término “isla de componente” fue acuñado por primera vez por la arquitecta de frontend de Etsy Katie Sylor-Miller en 2019. Esta idea fue luego expandida y documentada en esta publicación por el creador de Preact, Jason Miller, el 11 de agosto de 2020.

La idea general de una arquitectura de “Islas” es engañosamente simple: renderizar páginas HTML en el servidor e inyectar placeholders o slots alrededor de regiones altamente dinámicas […] que luego pueden ser “hidratadas” en el cliente en pequeños widgets autocontenidos, reutilizando su HTML inicial renderizado en el servidor.

  • Jason Miller, Creador de Preact

Esta técnica se basa en el patrón de arquitectura también conocido como hidratación parcial o selectiva.

En contraste, la mayoría de los frameworks web basados en JavaScript hidratan y renderizan un sitio web completo como una gran aplicación de JavaScript (también conocida como aplicación de una sola página o SPA). Las SPAs proporcionan simplicidad y potencia, pero sufren de problemas de rendimiento de carga de página debido al uso de JavaScript pesado del lado del cliente.

Las SPAs tienen su lugar, incluso incrustadas dentro de una página Astro. Pero, las SPAs carecen de la capacidad nativa de hidratación selectiva y estratégica, lo que las convierte en una opción demasiado pesada para la mayoría de los proyectos en la web hoy en día.

Astro se hizo popular como el primer framework web de JavaScript con hidratación selectiva incorporada, utilizando ese patrón de islas de componentes acuñado por primera vez por Sylor-Miller.

¿Qué es una isla?

Sección titulada ¿Qué es una isla?

En Astro, una “isla” se refiere a cualquier componente de UI interactivo en la página. Piensa en una isla como un widget interactivo flotando en un mar de HTML estático y ligero renderizado en el servidor.

Encabezado (isla interactiva)
Barra Lateral (HTML estático)

Contenido estático como texto, imágenes, etc.

Carrusel de imágenes (isla interactiva)
Pie de página (HTML estático)

Fuente: Islands Architecture: Jason Miller

Una isla siempre se ejecuta en aislamiento de otras islas en la página, y pueden existir múltiples islas en una página. Las islas aún pueden compartir estado y comunicarse entre sí, incluso si se ejecutan en diferentes contextos de componentes.

Esta flexibilidad permite que Astro admita múltiples frameworks de UI como React, Preact, Svelte, Vue, y SolidJS. Debido a que son independientes, incluso puedes mezclar varios frameworks en cada página.

Creando una isla

Sección titulada Creando una isla

Por defecto, Astro renderizará automáticamente cada componente de UI a solo HTML y CSS, eliminando todo el JavaScript del lado del cliente automáticamente.

src/pages/index.astro
<MyReactComponent />

Esto puede sonar estricto, pero este comportamiento es lo que mantiene los sitios web de Astro rápidos por defecto y protege a los desarrolladores de enviar accidentalmente JavaScript innecesario o no deseado que podría ralentizar tu sitio web.

Convertir cualquier componente de UI estático en una isla interactiva solo requiere una directiva client:*. Astro luego construye y empaqueta automáticamente tu JavaScript del lado del cliente para un rendimiento optimizado.

src/pages/index.astro
<!-- ¡Este componente ahora es interactivo en la página!
     El resto de tu sitio web se mantendrá estático. -->
<MyReactComponent client:load />

Con las islas, el JavaScript del lado del cliente solo se carga para los componentes interactivos explícitos que marcas usando directivas client:*.

Y debido a que la interacción se configura a nivel de componente, puedes manejar diferentes prioridades de carga para cada componente según su uso. Por ejemplo, client:idle le dice a un componente que se cargue cuando el navegador se vuelve inactivo, y client:visible le dice a un componente que se cargue solo una vez que ingresa al viewport.

¿Cuáles son los beneficios de las Islas?

Sección titulada ¿Cuáles son los beneficios de las Islas?

El beneficio más obvio de construir con las islas de Astro 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!