¿Qué es Islands Architecture?

Islands Architecture es un patrón de frontend que renderiza la mayor parte de una página como HTML estático y trata solo determinados widgets interactivos como componentes aislados e hidratados. En lugar de enviar una single-page-application completa, el navegador recibe un mar de HTML con pequeñas islas de JavaScript. En los storefronts de comercio, el resultado es mucha menos hidratación y una huella de JavaScript de primera parte mucho más pequeña.

Definición

Frameworks como Astro, Eleventy con Is-land, Fresh en Deno y el ecosistema Marko popularizaron el patrón, y conceptos similares aparecen en la reanudabilidad de Qwik y en la combinación de RSC y componentes de cliente de React. El renderizador genera HTML para toda la página y emite scripts de hidratación solo para los componentes marcados explícitamente como interactivos, con directivas como client:idle, client:visible o client:media. Cada isla se hidrata de forma independiente, puede usar cualquier framework (React, Vue, Svelte, Solid) y evita el coste de hidratación global que asume una SPA típica en la primera carga.

Por qué importa

En los sitios de comercio, la mayor parte del marcado es estático durante cualquier sesión dada: cabecera, pie, breadcrumbs, hero, bloques de texto, descripciones de categoría, contenido SEO. Solo un puñado de componentes necesita realmente ser interactivo, como añadir al carrito, el selector de variantes, el mini-carrito y los filtros. Islands se ajusta a esa realidad y la convierte en mejoras medibles en INP y en el tiempo hasta la interactividad. También simplifican el presupuesto de rendimiento, porque el coste de cada isla es visible y acotado. El CLS también mejora, porque el marcado estático se entrega ya formado por completo y solo las islas se mueven dentro de contenedores reservados.

Casos de uso

Las partes con mucho contenido editorial de un storefront de headless-commerce, como los funnels de landing-page, las páginas de marca, el contenido de blog y los centros de ayuda, son un excelente candidato para Islands Architecture sobre Astro o Fresh. Los equipos combinan esto con un content-management-system-cms como Hygraph o Sanity, despliegan a través de Cloudflare Pages, Netlify o Vercel y alcanzan Core Web Vitals casi perfectos de fábrica. Para flujos de comercio más profundos, las islas pueden envolver el mini-carrito, el selector de moneda, la capa de búsqueda y los widgets del recommendation-engine mientras el resto permanece estático. El patrón también es una progresión natural para los equipos que usan React Server Components, ya que RSC básicamente formaliza la misma idea dentro del ecosistema React.

Relacionado

Explora Composable Headless Frontend · Performance and Core Web Vitals.