El creador de Preact, Jason Miller, escribió en 2020 este artículo donde explicaba el concepto de la «Arquitectura de Islas» que introdujo por primera vez Katie Sylor-Miller (@ksylor), arquitecta frontend de Etsy.
Ha sido relativamente difícil de implementar hasta que ha llegado Astro, un framework que precisamente está pensado para construir páginas con arquitectura de islas.
La idea es pensar en una página web generada en el servidor, enviada hacia el navegador, y que contenga todo el contenido estático, pero con pequeños elementos repartidos que por la razón que sea, necesitan ser dinámicos. Estos componentes son las llamadas «islas».
Es decir, en lugar de tener una web donde todo a la vez sea dinámico, sobrecargado de scripts y que nuestra aplicación tenga un control total sobre el renderizado de la página, con las «islas interactivas» se consigue aislar ese comportamiento y «hidratar» componentes de forma independiente y cuando sea necesario.
Las partes de una web que son puramente estáticas y no tienen interacción (como por ejemplo, el contenido de un artículo) se dice que «no tienen hidratación», y por lo tanto, no son más que porciones de HTML puro y estático. En cambio, las regiones de dicha página que necesiten interactividad, la aplicación se encarga de «hidratarlos», como por ejemplo un widget con botones de compartir en redes sociales.
Ya no priorizamos el rendimiento y la optimización
El problema que tenemos hoy en día es que muchas páginas están tan cargadas de recursos y sobre todo JavaScript, que son mucho más lentas de lo que pensamos incluso quienes desarrollamos. Nos parece normal que una página tarde 5 segundos en cargar y no somos conscientes de toda la basura que le enviamos al navegador para que procese antes de mostrar contenido o que la web sea interactiva.
A veces, generamos decenas de ficheros y pequeñas librerías JavaScript que sobrecargan el navegador y hacen que dispositivos menos potentes o con conexiones mucho menos rápidas y estables, tengan problemas para cargar las páginas más simples.
Para evitar esta moda, Google está haciendo un buen trabajo con las Web Vitals. Es bastante estricto y no es fácil lograr una puntuación de más del 90%. Además, los clientes se fijan en ese detalle y aunque no entiendan qué significan las distintas métricas, quieren que su página tenga una buena puntuación.
Con frameworks como Astro, que tienen esta arquitectura en su propio diseño, es casi imposible hacer una web lenta.
¿Y qué ocurre con el SEO?
Es fácil hacernos rápidamente esta pregunta cuando trasteamos con este tipo de frameworks tan nuevos, y más todavía si estamos acostumbrados a lidiar con aplicaciones SPA desarrolladas por ejemplo con Angular, que al no estar generadas en el servidor sino en el cliente, necesitan un router de URL’s adicional en el navegador, y hacer buen SEO es difícil.
En este caso, como el contenido está generado en el servidor, las páginas ya son de por sí SEO friendly. La misma arquitectura de islas favorece la buena indexación.
Frameworks con arquitectura de islas
Además de Astro, que es actualmente de los más conocidos y en cuestión de muy poco tiempo ha adquirido una popularidad asombrosa, también existe Marko, un framework open source creado por eBay y que soporta dicha arquitectura.
