Arquitectura de islas: hidratación selectiva

La arquitectura de islas, término acuñado por Jason Miller en 2020, trata una página web como HTML mayoritariamente estático con «islas» aisladas de interactividad integradas en él. El océano estático de HTML se envía al navegador tal cual. Solo las islas interactivas descargan y ejecutan JavaScript, de modo que la carga de JavaScript es proporcional a la interactividad real.

Cada isla es un componente que se hidrata de forma independiente. El servidor renderiza el HTML inicial de la isla junto con el resto de la página. Cuando se carga el JavaScript de la isla, solo se hidrata el subárbol de ese componente. El HTML que rodea las islas nunca es manipulado por JavaScript: es realmente estático.

En una página de entrada de blog con arquitectura de islas, la carga de JavaScript podría ser de 5 kB para una única isla con un botón de «Me gusta». La misma página creada como una SPA de React podría enviar más de 200 kB de JavaScript para hidratar toda la página. El enfoque de islas hace que la carga sea proporcional a la interactividad, no al tamaño de la página.

Astro, el principal framework de arquitectura de islas, admite islas creadas con distintos frameworks en la misma página. Puede tener una isla de React junto a una isla de Vue y otra de JavaScript puro. Cada isla se empaqueta de forma independiente, por lo que los usuarios solo descargan el código de los frameworks utilizados por las islas visibles.

La directiva client:load hidrata la isla inmediatamente cuando se carga la página. Utilícela para las islas que son visibles e interactivas desde el principio, como un menú de navegación o una sección principal con un campo de búsqueda. Esta es la estrategia de hidratación de mayor prioridad.

La directiva client:idle espera a que el hilo principal del navegador esté inactivo (después de que se haya cargado el contenido crítico) antes de hidratar la isla. Es ideal para widgets que están por debajo del límite visible o para interacciones secundarias que no se necesitan de inmediato, como una barra para compartir en redes sociales.

La directiva client:visible utiliza un Intersection Observer para hidratar la isla solo cuando entra en la ventana gráfica al desplazarse. Es ideal para islas situadas en zonas profundas de la página, como una sección de comentarios o un carrusel de productos relacionados, que quizá la mayoría de los usuarios nunca llegue a ver. JavaScript ni siquiera se carga hasta que se necesita.

La directiva client:only omite por completo el renderizado en el servidor y solo renderiza la isla en el navegador. Es necesaria para componentes que utilizan API exclusivas del navegador (window, document) o que dependen del estado del cliente en el momento del montaje. La contrapartida es que esa isla no tiene HTML renderizado en el servidor.

La arquitectura de islas resuelve el problema de la hidratación completa al garantizar que JavaScript solo se cargue y ejecute para los componentes que son realmente interactivos. Una entrada de blog con un botón de «Me gusta» solo hidrata la isla del botón; el texto del artículo de 1200 palabras, el encabezado y el pie de página no generan ninguna ejecución de JavaScript en el cliente.

Cada isla tiene su propio estado aislado. Las islas no pueden compartir directamente el estado de React porque son árboles de React independientes. Esto es intencionado: si dos componentes necesitan compartir estado, deben combinarse en una sola isla. La comunicación entre islas utiliza parámetros de URL, eventos del DOM o bibliotecas de estado ligeras.

Los sitios migrados de una SPA de React a la arquitectura de islas (como el sitio de documentación de Astro) informan de mejoras drásticas: las cargas de JavaScript disminuyen entre un 70 % y un 90 %, el TTI mejora entre 2 y 4 segundos en dispositivos móviles y las puntuaciones de rendimiento de Lighthouse pasan de los 60 a más de 90 puntos. Las mejoras son más notables en páginas con mucho contenido.

¿Qué directiva de hidratación de Astro hidrata un componente únicamente cuando entra en el área visible al desplazarse?

La arquitectura de islas mantiene la mayor parte de la página como HTML estático e hidrata únicamente componentes interactivos aislados. Astro proporciona directivas de hidratación: client:load (inmediata), client:idle (después de que el navegador quede inactivo), client:visible (al desplazarse hasta el componente) y client:only (renderizado únicamente en el cliente). Cada isla se hidrata de forma independiente, por lo que la cantidad de JavaScript es proporcional a la interactividad y no al tamaño de la página.