Arquitectura de islas
Astro ayudó a ser pionero y popularizar un nuevo patrón de arquitectura frontend llamado Arquitectura de islas (Islands Architecture). La arquitectura de islas funciona renderizando la mayor parte de tu página en HTML rápido y estático, añadiendo pequeñas “islas” de JavaScript cuando se necesita interactividad o personalización en la página (un carrusel de imágenes, por ejemplo). Esto evita las cargas útiles de JavaScript monolíticas que ralentizan la capacidad de respuesta de muchos otros frameworks web de JavaScript modernos.
Una breve historia
Sección titulada “Una breve historia”El término “isla de componentes” (component island) fue acuñado por primera vez por la arquitecta de frontend de Etsy, Katie Sylor-Miller en 2019. Esta idea fue expandida y documentada posteriormente 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” (Islands) es engañosamente simple: renderizar páginas HTML en el servidor e inyectar marcadores de posición o slots alrededor de regiones altamente dinámicas […] que luego pueden ser “hidratadas” en el cliente en pequeños widgets autónomos, reutilizando su HTML inicial renderizado en el servidor.
— Jason Miller, creador de Preact
La técnica sobre la que se basa este patrón arquitectónico también se conoce como hidratación parcial o selectiva.
Por el contrario, la mayoría de los frameworks web basados en JavaScript hidratan y renderizan un sitio web completo como una única gran aplicación de JavaScript (también conocida como aplicación de una sola página o SPA). Las SPAs ofrecen simplicidad y potencia, pero sufren de problemas de rendimiento al cargar la página debido al uso intensivo de JavaScript en el lado del cliente.
Las SPAs tienen su lugar, incluso integradas dentro de una página de Astro. Sin embargo, las SPAs carecen de la capacidad nativa de hidratar de forma selectiva y estratégica, lo que las convierte en una opción exagerada para la mayoría de los proyectos en la web hoy en día.
Astro se popularizó como el primer framework web de JavaScript convencional con hidratación selectiva integrada, utilizando el mismo patrón de islas de componentes acuñado por Sylor-Miller. Desde entonces, hemos ampliado y evolucionado el trabajo original de Sylor-Miller, lo que ayudó a inspirar un enfoque similar de islas de componentes para el contenido renderizado dinámicamente en el servidor.
¿Qué es una isla?
Sección titulada “¿Qué es una isla?”En Astro, una isla es un componente de UI mejorado en una página de HTML por lo demás estática.
Una isla de cliente es un componente de interfaz de usuario de JavaScript interactivo que se hidrata por separado del resto de la página, mientras que una isla de servidor es un componente de interfaz de usuario que renderiza en el servidor su contenido dinámico por separado del resto de la página.
Ambas islas ejecutan procesos costosos o más lentos de forma independiente, componente por componente, para optimizar la carga de la página.
Componentes de isla
Sección titulada “Componentes de isla”Los componentes de Astro son los bloques de construcción de tu plantilla de página. Se renderizan a HTML estático sin tiempo de ejecución en el lado del cliente.
Piensa en una isla de cliente como un widget interactivo que flota en un mar de HTML renderizado en el servidor, que por lo demás es estático y ligero. Las islas de servidor se pueden añadir para elementos dinámicos o personalizados renderizados en el servidor, como la foto de perfil de un visitante que ha iniciado sesión.
Contenido estático como texto, imágenes, etc.
Fuente: Islands Architecture: Jason Miller
Una isla siempre se ejecuta de forma aislada de otras islas en la página, y pueden existir múltiples islas en una misma página. Las islas de cliente aún pueden compartir estado y comunicarse entre sí, aunque se ejecuten en diferentes contextos de componentes.
Esta flexibilidad permite que Astro sea compatible con 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 de cliente
Sección titulada “Islas de cliente”Por defecto, Astro renderizará automáticamente cada componente de interfaz de usuario a solo HTML y CSS, eliminando todo el JavaScript del lado del cliente de forma automática.
<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 su sitio web.
Convertir cualquier componente de UI estático en una isla interactiva requiere únicamente una directiva client:*. Astro entonces construye y empaqueta automáticamente tu JavaScript del lado del cliente para un rendimiento optimizado.
<!-- This component is now interactive on the page! The rest of your website remains static. --><MyReactComponent client:load />Con las islas, el JavaScript del lado del cliente solo se carga para los componentes interactivos explícitos que marques usando las 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 indica a un componente que se cargue cuando el navegador esté inactivo, y client:visible le indica a un componente que se cargue solo una vez que entre en el viewport.
Beneficios de las islas de cliente
El beneficio más obvio de construir con islas de Astro es el rendimiento: la mayor parte de tu sitio web se convierte en HTML rápido y estático, y JavaScript solo se carga para los componentes individuales que lo necesitan. JavaScript es uno de los recursos más lentos que puedes cargar por byte, por lo que cada byte cuenta.
Otro beneficio es la carga paralela. En la ilustración de ejemplo anterior, la isla de baja prioridad “carrusel de imágenes” no necesita bloquear a la isla de alta prioridad “encabezado”. Ambos se cargan en paralelo e hidratan de forma aislada, lo que significa que el encabezado se vuelve interactivo de inmediato sin tener que esperar al carrusel más pesado de la parte inferior de la página.
Aún mejor, puedes indicarle a Astro exactamente cómo y cuándo renderizar cada componente. Si ese carrusel de imágenes es realmente costoso de cargar, puedes adjuntar una directiva de cliente especial que le indique a Astro que solo cargue el carrusel cuando sea visible en la página. Si el usuario nunca lo ve, nunca se carga.
En Astro, depende de ti como desarrollador indicarles explícitamente a Astro qué 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 detrás de la historia de rendimiento rápido por defecto de Astro!
Islas de servidor
Sección titulada “Islas de servidor”Las islas de servidor son una forma de apartar el código del lado del servidor lento o costoso del proceso de renderizado principal, facilitando 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 en tu página para convertirlo en su propia isla de servidor:
---import Avatar from "../components/Avatar.astro";---<Avatar server:defer />Esto divide tu página en áreas más pequeñas de contenido renderizado en el servidor que se cargan en paralelo.
El contenido principal de tu página se puede renderizar inmediatamente con contenido de marcador de posición, como un avatar genérico, hasta que el contenido de la propia isla esté disponible. Con las islas de servidor, tener pequeños componentes de contenido personalizado no retrasa el renderizado de una página que, de lo contrario, sería estática.
Este patrón de renderizado fue creado 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 serverless de tu elección.
Beneficios de las islas de servidor
Un beneficio de las islas de servidor es la capacidad de renderizar sobre la marcha las partes más dinámicas de tu página. Esto permite que la estructura externa y el contenido principal se almacenen en caché de manera más agresiva, proporcionando un rendimiento más rápido.
Otro beneficio es proporcionar una excelente experiencia al visitante. Las islas de servidor están optimizadas y se cargan rápidamente, a menudo incluso antes de que el navegador haya dibujado la página. Pero en el corto tiempo que tardan tus islas en renderizarse, puedes mostrar contenido alternativo personalizado y evitar cualquier cambio en el diseño (layout shift).
Un ejemplo de un sitio que se beneficia de las islas de 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 el encabezado.
- Ofertas especiales y rebajas para el producto.
- Reseñas de los usuarios.
Al usar islas de servidor para estos elementos, el visitante verá la parte más importante de la página, tu producto, de inmediato. Se pueden mostrar avatares genéricos, indicadores de carga y anuncios de la tienda como contenido alternativo hasta que las partes personalizadas estén disponibles.