Astro 5.3

Por
Matt Kane

¡Astro 5.3 ya está aquí con renderizado de páginas más rápido, configuración más fácil para sessions experimentales, y más!

💘 Es la temporada del amor, y seguro que te enamorarás de estas mejoras en Astro:

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

Renderizado de páginas más rápido

Astro hace fácil usar funciones async dentro de componentes, pero anteriormente esto significaba que cada componente y página se renderizaba asincrónicamente, incluso si no era necesario. Cuando esto ocurre para cada componente en una página, ¡el overhead de estas promises puede sumarse realmente!

Ahora, gracias a una contribución increíble de la comunidad de MatthewLymer de Fora, Astro solo renderizará componentes asincrónicamente si… (es)pera… realmente contienen una llamada a una función async.

En benchmarks, esto ha resultado en una aceleración significativa para el renderizado de componentes sincrónicos. Esto beneficia tanto a compilaciones bajo demanda como estáticas, aunque las mayores mejoras se ven en los tiempos de respuesta SSR. Esto incluso ayuda a páginas que usan funciones async, porque la mayoría de los componentes en la página seguirán siendo sincrónicos.

La cantidad exacta de la mejora dependerá de los sitios individuales. Las páginas complejas con muchos componentes verán las mayores mejoras, mientras que las páginas que usan APIs externas más lentas en tiempo de petición pueden no cambiar. En nuestras pruebas, las respuestas SSR son generalmente 1.5-2x más rápidas a menos que la página esté consultando APIs externas. Algunos ejemplos:

No necesitas hacer nada para beneficiarte de esta mejora: simplemente relájate y disfruta de los tiempos de renderizado más rápidos.

Configuración automática de session storage

Astro 5.1 introdujo la session storage API experimental, que permite a los desarrolladores gestionar fácilmente las sessions de los usuarios en el servidor. La característica soporta decenas de drivers de almacenamiento backend diferentes, potenciada por unstorage.

Anteriormente necesitabas configurar un driver de session storage en tu astro.config.mjs, pero ahora Astro configurará automáticamente el session storage para ti al usar un adaptador soportado.

Empezamos con soporte para el adaptador @astrojs/node, que usa el filesystem para almacenamiento, y @astrojs/netlify, que usa Netlify Blobs. Esperamos añadir soporte de driver por defecto para más adaptadores en un futuro cercano, donde las plataformas de hosting incluyan una API de almacenamiento. En todos los casos, todavía puedes configurar manualmente tu propio driver de session storage si no existe uno por defecto o prefieres usar uno diferente.

Si aún no has experimentado con la session storage API, puedes habilitar esta característica estableciendo el flag experimental.session a true en tu astro.config.mjs:

astro.config.mjs
  {
    adapter: node({
      mode: "standalone",
    }),
    experimental: {
      session: true,
    },
  }

Si ya estás usando la característica de sessions, necesitarás actualizar tu configuración a la nueva sintaxis con este breaking change.

¡La opción experimental.session ahora es un flag boolean que puedes establecer a true y disfrutar de un driver de session storage por defecto con un adaptador soportado, sin necesidad de más configuración!

La configuración de session se ha movido a una key session de nivel superior. Esto te permite configurar un driver no por defecto, así como otras opciones como un prefijo base o un ttl de expiración.

astro.config.mjs
  {
    adapter: node({
      mode: "standalone",
    }),
    experimental: {
        session: {
            driver: "upstash",
        },
        session: true,
    },
    session: {
        driver: "upstash",
    },
  }

Para más detalles y ejemplos, consulta la documentación experimental de sessions.

Más control sobre el bundling de Netlify

Cuando Astro compila tu sitio para desplegar en una plataforma serverless como Netlify o Vercel, necesita hacer bundle de todos los archivos y dependencias necesarios para ejecutar tu sitio. Los adaptadores de Netlify y Vercel usan la misma librería para esto, que generalmente es buena determinando qué se necesita.

No siempre acierta con esto: a veces pierde un archivo que necesitas, particularmente si es un archivo estático que estás cargando con funciones de filesystem. Otras veces incluye archivos que no necesitas, lo que puede ralentizar tu compilación y aumentar tu bundle size, particularmente si es algo como un binary grande.

Para manejar esto, el adaptador de Vercel ya tiene opciones excludeFiles y includeFiles que te permiten especificar archivos que deben excluirse o incluirse en el bundle. Con este lanzamiento, estas opciones también están disponibles en el adaptador de Netlify. Ambas opciones aceptan un array de paths o globs.

astro.config.mjs
  {
    adapter: netlify({
      includeFiles: ["src/locales/**/*.po"],
      excludeFiles: ["node_modules/big-package/chonky-file.bin"],
    }),
  }

Gracias a Dani Fernández que contribuyó esta característica.

Manejo mejorado de peticiones HEAD

Los API endpoints ahora manejarán automáticamente las peticiones HEAD si hay un handler GET definido. Astro llamará al handler GET y devolverá la respuesta con un body vacío. Si prefieres manejar las peticiones HEAD de forma diferente, todavía puedes definir un handler separado. Consulta la documentación de API endpoints para más detalles.

Gracias a Vitalii Rybachenko de Netlify por esta contribución.

Correcciones de bugs

Como siempre, hemos estado trabajando duro en corregir problemas desde el lanzamiento 5.2. Consulta el changelog para todos los detalles.

Gracias

Gracias a todos los que contribuyeron a este lanzamiento, incluyendo Emanuele Stoppa, Sarah Rainsberger, HiDeoo, Yan Thomas, Dani Fernández, unprintable123, Sean Boult, Armand Philippot, Vitalii Rybachenko, Cornelius Roemer, y muchos más. Agradecimiento extra a MatthewLymer por el excelente trabajo en las mejoras de renderizado más rápido.

¡Esperamos ver qué construís con Astro 5.3! Si tienes preguntas, comentarios, o solo quieres decir hola, pásate por el Astro Discord.