Esta es la Parte 3 de nuestra serie sobre “El Futuro de Astro” cubriendo las tres características principales que tenemos planeadas para Astro en 2024. Esta publicación introduce Server Islands: una nueva primitiva de arquitectura de islas que te permite entregar shells de páginas HTML estáticas cacheadas en CDN con contenido dinámico inyectado.
En 2021, Astro fue pionero en una nueva arquitectura de frontend llamada Islands. Las islas son únicas porque permiten a Astro eliminar automáticamente todo el JavaScript no utilizado de tu página, entregando un rendimiento más rápido sin obligarte a renunciar a tus componentes de UI favoritos en el desarrollo (React, Svelte, Vue, etc).
Pero el rendimiento del frontend no es el único problema de rendimiento que encontrarás en la web. Cómo entregas un sitio web al usuario puede ser aún más impactante que qué entregas, y los desarrolladores a menudo se ven obligados a tomar una decisión difícil: rendimiento, o personalización?
Rendimiento: Sirve páginas como HTML estático, y cachea de forma agresiva. No podrás personalizar las páginas para el usuario, pero los beneficios de rendimiento, ahorro de costos y simplicidad de los despliegues estáticos en CDN son imposibles de igualar.
Personalización: Sirve páginas como HTML dinámico, renderizado bajo demanda. Esto fuerza tu solicitud a través de algún centro de datos que puede estar al otro lado del mundo, lo que ralentiza el rendimiento y aumenta tu probabilidad de no pasar los Core Web Vitals de Google. Sin embargo, el nivel de control y personalización que desbloqueas con respuestas dinámicas puede ser difícil de rechazar.
El rendimiento y la personalización no deberían ser mutuamente excluyentes. Creemos que la arquitectura de Islands también tiene la respuesta a este problema, y actualmente estamos trabajando en una nueva característica para traerte lo mejor de ambos mundos: Server Islands.
Server Islands
Server Islands son una nueva primitiva que estamos explorando para Astro, construyendo sobre nuestra arquitectura de frontend de islas existente. Defines una server island de la misma manera que lo harías con una client island, pero en lugar de usar una directiva client:* usarías la nueva directiva server:defer en su lugar:
<UserButton server:defer />Esto le dice a Astro que omita renderizar este componente en la respuesta inicial y “difiera” su renderizado para más tarde. Esto te permite cachear la página estática detrás de un CDN con algún contenido de marcador de posición inicial. Cuando el HTML dinámico se ha cargado, reemplaza la server island en la página con el resultado HTML del renderizado diferido.
Puedes ver esto funcionando en el prototipo a continuación. La página estática se carga instantáneamente con la mayor parte del contenido de tu página (21ms, en este ejemplo ejecutándose en Vercel). El HTML del componente diferido dinámico luego se renderiza por separado, y Astro lo une todo cuando el renderizado diferido se completa.
Conceptualmente, esto es similar al concepto de Suspense en React, Solid, etc. pero con la diferencia clave de que la isla diferida se renderiza como una solicitud HTTP separada. Intencionalmente hemos evitado transmitir el contenido estático y las islas de vuelta en una sola respuesta para simplificar las cosas para tu CDN de elección.
Al mover todo tu HTML dinámico a server islands diferidas, te quedas con lo mejor de ambos mundos:
- Rendimiento: Un shell de página HTML estático e instantáneo, cacheado en un CDN global.
- Personalización: Contenido dinámico inyectado donde quieras en la página.
Las server islands no tendrán sentido para cada caso de uso. Algunas páginas pueden requerir tanto contenido dinámico que aún tiene sentido renderizar toda la página en el servidor. Otros sitios pueden preferir obtener contenido dinámico como JSON desde endpoints de API en su lugar.
Sin embargo, creemos que las server islands tienen sentido para la gran mayoría del contenido personalizado en sitios web impulsados por contenido. Los sitios web que vemos construidos con Astro a menudo mezclan contenido dinámico y estático en la página. Para estos sitios que actualmente no pueden aprovechar el cacheo de CDN, las server islands probablemente entregarán grandes mejoras de rendimiento.
Próximos Pasos
Estamos en la fase de diseño de esta característica y estamos pensando en las ventajas y desventajas de diferentes implementaciones, pero el prototipado ya está en marcha.
Estate atento al soporte experimental para Server Islands en Astro en un futuro cercano. A menudo lanzamos nuevas características detrás de flags experimentales antes de que sean estables, lo que le da a nuestros usuarios mucho tiempo para probar nuevas APIs y dar comentarios. Si te gustaría involucrarte antes de eso, revisa el RFC y participa en las discusiones ahora.