Astro 4.12: Server Islands

¡Astro 4.12 ya está disponible! Este lanzamiento incluye la primera versión experimental de Server Islands, nuestra nueva solución para integrar HTML estático de alto rendimiento y componentes dinámicos generados en el servidor juntos. También se incluyen mejoras en la paginación y el resaltado de sintaxis.

Este lanzamiento incluye los siguientes aspectos destacados:

• Experimental: Server Islands
• Añadidas URLs de first y last a los datos de paginación
• Añadido soporte para la opción defaultColor de Shiki
• Nueva función inferRemoteSize

Para actualizar un proyecto existente, usa la herramienta CLI automatizada @astrojs/upgrade. Alternativamente, actualiza manualmente ejecutando el comando de actualización para tu gestor de paquetes:

# Recommended:
npx @astrojs/upgrade

# Manual:
npm install astro@latest
pnpm upgrade astro --latest
yarn upgrade astro --latest

Experimental: Server Islands

En 2021 Astro llevó la idea de la islands architecture al mainstream, permitiéndote crear "islas" de componentes interactivos del lado del cliente mientras la mayor parte de tu página se genera estáticamente.

Con Server islands estamos extendiendo esta misma arquitectura al servidor. Server islands facilitan la combinación de HTML estático de alto rendimiento y componentes dinámicos generados en el servidor.

Dentro de cualquier página web puedes tener contenido que sea:

• Completamente estático y nunca cambia.
• Respaldado dinámicamente por una base de datos que cambia con poca frecuencia, pero más a menudo de lo que despliegas.
• Contenido personalizado, adaptado a usuarios individuales.

Actualmente, debes elegir una estrategia de caché para todos estos tipos de contenido, y si la página es una experiencia con login eso normalmente significa que no hay caché en absoluto. Ahora, con Server islands obtienes lo mejor de ambos mundos.

Server islands se usan para tu contenido más dinámico; contenido personalizado como el avatar de un usuario, su carrito de compra, y reseñas de productos. Cuando estos componentes se difieren, eres libre de cachear la página misma de forma más agresiva.

Esto significa que los usuarios, con login o sin él, verán las partes más críticas de la página instantáneamente, ya que se cachean en Edge CDNs. El contenido de fallback será visible por un breve período de tiempo antes de que las islas dinámicas se carguen.

Cada isla se carga de forma independiente del resto; esto significa que una isla más lenta, como una conectada a un backend legacy, no retrasará que el resto del contenido personalizado se vea y se interactúe con él.

Rendimiento

Para probar la viabilidad de esta idea construimos server-islands.com. Esta demo está inspirada en la demo de Next.js Partial Prerendering, rediseñada para adaptarse a la personalidad de Astro. Server Islands tiene mucho en común con Partial Prerendering (PPR), especialmente en su objetivo de permitir una mayor cacheabilidad de las páginas.

server-islands.com funciona consistentemente más rápido en ejecuciones repetidas; obtiene un 20% más rápido en Largest Contentful Paint, que es uno de los 3 Core Web Vitals de Google que impactan tanto en la experiencia del usuario como en el SEO.

En lugar de iniciar la petición al origen en el servidor como PPR, Server Islands lo hacen desde el navegador. Esto significa que mientras Server islands se pintan antes, podrían terminar más tarde que PPR.

Tanto Server islands como PPR funcionan mejor en sitios como estos, donde el contenido principal de la página puede cachearse en el edge. Funcionan bien para ecommerce pero probablemente no sería algo que quisieras usar para un feed de red social. Debido a que la página se cachea en el edge, esa espera por la petición de la isla es mínima.

En última instancia, estamos confiados en que este tradeoff es el mejor rendimiento general para los usuarios de Astro, tanto en la experiencia del usuario como en superar los Core Web Vitals sin requerir ninguna infraestructura de backend especial ni soporte para empezar.

Portabilidad

Construimos Server islands con la portabilidad en mente. No depende de ninguna infraestructura de servidor, así que funcionará con cualquier host que tengas, desde un servidor Node.js en un contenedor Docker hasta el proveedor serverless de tu elección.

Nuestra implementación ocurre principalmente en tiempo de compilación, donde el contenido del componente se intercambia por un pequeño script, uno que casi cabe en un Tweet.

Cada una de las islas marcadas con server:defer se separan en su propia ruta especial que el script obtiene en tiempo de ejecución. El trade-off es que la isla no obtiene un adelanto en el renderizado como podría si dependiera del manejo en el edge, pero creemos que los números de rendimiento favorecen el enfoque más simple que hemos tomado hasta ahora.

Probando Server Islands

Todavía estamos trabajando en pulir la característica, pero puedes probar Astro Server Islands hoy habilitando la característica en Astro 4.12:

import { defineConfig } from 'astro/config';
import netlify from '@astrojs/netlify';

export default defineConfig({
  output: 'hybrid',
  adapter: netlify(),

  experimental: {
    serverIslands: true,
  },
})

Server islands, como el nombre implica, se ejecutan en el servidor, así que necesitarás usar el output 'server' o 'hybrid'. Una vez que hayas habilitado la característica puedes usarlas en cualquier componente usando la directiva server:defer:

<Avatar server:defer>
  <GenericUserImage slot="fallback" />
</Avatar>

Cuando Astro compila tu sitio, omitirá el componente e inyectará un script en su lugar, además del contenido que hayas marcado con slot="fallback". Cuando la página se cargue en el navegador, estos componentes junto con cualquier prop que les pases, serán solicitados a un endpoint especial que los renderiza y devuelve el HTML.

Server Islands son componentes normales de Astro y pueden usar cualquiera de las características que esperas de Astro como middleware, slots, islas client:.

Cómo participar

Server Islands tienen un RFC activo. Todavía estamos finalizando los detalles y características; por ejemplo, probablemente añadiremos props encriptadas. Prueba el lanzamiento en 4.12 y cuéntanos qué te parece.

Añadidas URLs de first y last a los datos de paginación

El helper paginate() ahora devuelve las propiedades first y last en los datos de paginación. Estas propiedades contienen las URLs de la primera y última página, respectivamente. ¡Gracias a @tsawada por contribuir esta característica!

Añadido soporte para la opción defaultColor de Shiki

La opción defaultColor te permite sobrescribir los valores del estilo inline de un tema, añadiendo solo variables CSS para darte más flexibilidad al aplicar múltiples temas de color. Esta opción puede configurarse en tu configuración de Shiki para aplicar en todo tu sitio, o pasarse al componente integrado de Astro <Code> para estilizar un bloque de código individual. ¡Gracias a @madcampos por contribuir esto!

Nueva función inferRemoteSize

En Astro 4.4, añadimos una nueva propiedad a los componentes Image y Picture y a getImage() para inferir automáticamente el tamaño de imágenes remotas. Gracias a @itsmatteomanf, este lanzamiento ahora incluye una nueva función, inferRemoteSize(), que te permite obtener el tamaño de una imagen remota independientemente de estos componentes o de getImage().

Esto puede ser útil si estás usando el ancho de la imagen para generar diferentes densidades, o si necesitas la dimensión de la imagen para fines de estilizado.

---
import { inferRemoteSize, Image } from 'astro:assets';

const { width, height } = await inferRemoteSize('https://...');
---

<Image src={"https://..."} width={width / 2} height={height} densities={[1.5, 2]}  />

Algunas cosas más

Como es habitual, Astro 4.12 incluye más correcciones de bugs y mejoras menores que no han podido entrar en este post! Consulta las notas del lanzamiento completas para saber más.

Gracias especiales a @sarah11918, @Fryuni, @ARipeAppleByYoursTruly y a todos los demás que contribuyeron a este lanzamiento.