Arquitectura de islas

Astro ayudó a promover y popularizar un nuevo patrón de arquitectura de frontend llamado Arquitectura de islas. La arquitectura de islas funciona renderizando la mayor parte de la página en HTML rápido y estático, añadiendo “islas” más pequeñas de JavaScript cuando se necesita interactividad o personalización en la página (un carrusel de imágenes, por ejemplo). Esto evita las cargas monolíticas de JavaScript que ralentizan la capacidad de respuesta de muchos otros marcos web modernos de JavaScript.

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 mismo patrón de islas de componentes acuñado por primera vez por Sylor-Miller. Desde entonces, hemos ampliado y evolucionado el trabajo original de Sylor-Miller, que ayudó a inspirar un enfoque similar de la isla de componentes para el contenido renderizado dinámicamente en el servidor.

¿Qué es una isla?

En Astro, una isla es un componente de interfaz de usuario mejorado en una página HTML que, de otro modo, sería estática.

Una isla del cliente es un componente de interfaz de usuario interactivo JavaScript que se hidrata por separado del resto de la página, mientras que una isla del servidor es un componente de interfaz de usuario que renderiza en servidor su contenido dinámico por separado del resto de la página.

Ambas islas ejecutan procesos caros o lentos de forma independiente, por componente, para optimizar la carga de las páginas.

Componentes de la isla

Los componentes de Astro son los bloques de construcción de tu plantilla de página. Se convierten en HTML estático sin tiempo de ejecución del lado del cliente.

Piensa en una isla cliente como un elemento interactivo flotando en un mar de HTML estático, ligero y renderizado por el servidor. Las islas de servidor pueden añadirse para elementos personalizados o dinámicos renderizados en el servidor, como la foto de perfil de un visitante conectado.

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

Carrusel de imágenes (isla interactiva)

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 cliente 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.

Islas del cliente

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.

<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.

<!-- ¡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.

Beneficios de las islas del cliente

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 de cliente son el secreto del rápido rendimiento por defecto de Astro!

Más información sobre el uso de componentes de frameworks de JavaScript en tu proyecto.

Islas del servidor

Las islas del servidor son una forma de apartar el código caro o lento del lado del servidor del proceso principal de renderizado, lo que facilita la combinación de HTML estático de alto rendimiento y componentes dinámicos generados por el servidor.

Añade la directiva server:defer a cualquier componente de Astro de tu página para convertirlo en su propia isla del servidor:

---
import Avatar from '../components/Avatar.astro';
---
<Avatar server:defer />

Esto divide la página en pequeñas áreas de contenido renderizado por el servidor que se cargan en paralelo.

El contenido principal de tu página puede ser renderizado inmediatamente con contenido alternativo, como un avatar genérico hasta que el contenido propio de tu isla esté disponible. Con las islas del servidor, tener pequeños componentes de contenido personalizado no retrasa la renderización de una página que, de otro modo, sería estática.

Este patrón de renderizado fue construido para ser portable. No depende de ninguna infraestructura de servidor, por lo que funcionará con cualquier host, desde un servidor Node.js en un contenedor Docker hasta el proveedor sin servidor de tu elección.

Beneficios de las islas del servidor

Una de las ventajas de las islas del servidor es la posibilidad de renderizar sobre la marcha las partes más dinámicas de la página. De este modo, la capa exterior y el contenido principal se almacenan en caché de forma más agresiva, lo que proporciona un rendimiento más rápido.

Otra ventaja es ofrecer una gran experiencia al visitante. Las islas del servidor están optimizadas y se cargan rápidamente, a menudo incluso antes de que el navegador haya pintado la página. Pero en el poco tiempo que tardan tus islas en renderizarse, puedes mostrar contenido fallback personalizado y evitar cualquier cambio de diseño.

Un ejemplo de sitio que se beneficia de las islas del servidor de Astro es una tienda de comercio electrónico. Aunque el contenido principal de las páginas de productos cambia con poca frecuencia, estas páginas suelen tener algunas piezas dinámicas:

El avatar del usuario en la cabecera.
Ofertas y rebajas especiales del producto.
Reseñas de los usuarios.

Utilizando islas del servidor para estos elementos, tu visitante verá la parte más importante de la página, tu producto, inmediatamente. Los avatares genéricos, los spinners de carga y los anuncios de la tienda pueden mostrarse como contenido alternativo hasta que las partes personalizadas estén disponibles.

Más información sobre el uso de islas de servidor en tu proyecto.

Contribuir Comunidad Patrocinador