Astro 5.15

Por
Matthew Phillips

🎃 Astro 5.15 trae protección automática contra skew de Netlify, filtrado granular de preload de fuentes, y nuevas APIs potentes para adaptadores.

Explora qué hay de nuevo en este lanzamiento:

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

Protección contra skew de Netlify

Astro 5.15 introduce protección automática contra skew para despliegues en Netlify, asegurando que las versiones de cliente y servidor de tu sitio permanezcan perfectamente sincronizadas.

El skew de despliegue es un problema sigiloso que ocurre cuando los usuarios cargan assets de cliente más antiguos mientras el servidor está ejecutando código más nuevo. Esto puede causar bugs sutiles y comportamientos inesperados que son difíciles de rastrear. Con la protección contra skew de Netlify, esto ahora es cosa del pasado.

Cuando despliegas en Netlify, Astro incluye automáticamente tu deployment ID en todas las peticiones de assets y llamadas a la API. Esto permite a Netlify detectar y manejar cualquier discrepancia de versión automáticamente—sin necesidad de configuración. Tu sitio simplemente funciona, incluso durante despliegues rápidos o cuando los usuarios están en conexiones lentas que podrían cargar assets a través de límites de despliegue.

Si estás haciendo peticiones fetch personalizadas en tu aplicación, también puedes acceder al deployment ID directamente:

const deployId = import.meta.env.DEPLOY_ID;
const response = await fetch('/api/endpoint', {
  headers: {
    'x-deploy-id': deployId,
  },
});

La protección contra skew de Netlify funciona sin problemas en todas las características core de Astro, incluyendo View Transitions, Server Islands, Prefetch, y Astro Actions, dándote tranquilidad en todo tu sitio.

Nuevas APIs de adaptadores para personalizar headers y assets

Detrás de escena, la protección contra skew de Netlify está potenciada por un nuevo conjunto de APIs core que permiten a los adaptadores personalizar tanto headers como query parameters de assets a través de los sistemas de Astro.

Astro ahora expone una opción de configuración client en la interfaz AstroAdapter, permitiendo a los adaptadores especificar:

  • internalFetchHeaders - Headers personalizados que deben incluirse automáticamente en todas las llamadas fetch hechas por los sistemas core de Astro (Actions, View Transitions, Server Islands, y Prefetch)
  • assetQueryParams - Query parameters que deben añadirse automáticamente a las URLs de assets

Esto da a las plataformas de hosting los hooks que necesitan para implementar características sofisticadas como protección contra skew sin requerir configuración manual por parte de los desarrolladores.

Así es como un adaptador configura estas opciones en el hook astro:config:done:

exampleAdapter/index.ts
export default function exampleAdapter() {
  return {
    name: 'example-adapter',
    hooks: {
      'astro:config:done': async ({ setAdapter }) => {
        setAdapter({
          name: 'example-adapter',
          serverEntrypoint: 'example-adapter/ssr.js',
          client: {
            internalFetchHeaders: () => {
              const deployId = process.env.DEPLOY_ID;
              if (deployId) {
                return { 'x-deploy-id': deployId };
              }
              return {};
            },
            assetQueryParams: process.env.DEPLOY_ID
              ? new URLSearchParams({ deployId: process.env.DEPLOY_ID })
              : undefined,
          },
        });
      },
    },
  };
}

El adaptador de Vercel ahora también se beneficia de estas nuevas APIs. Anteriormente, la protección contra skew de Vercel tenía algunas limitaciones y bugs que impedían que funcionara correctamente con todas las características de Astro. Con esta actualización, el adaptador de Vercel ahora usa las mismas nuevas APIs para proporcionar protección contra skew fiable cuando la variable de entorno VERCEL_SKEW_PROTECTION_ENABLED está habilitada, llevándolo a paridad de características con Netlify.

Filtrado granular de preload de fuentes

La Fonts API experimental ahora soporta control granular sobre qué variantes de fuente se pre cargan. Anteriormente, solo podías elegir hacer preload de todas las variantes de una fuente o de ninguna. Ahora puedes especificar exactamente qué weights, styles, y subsets deben pre cargarse, ayudándote a optimizar el rendimiento descargando solo lo que realmente usas.

Al usar el componente <Font>, puedes pasar un array preload para filtrar variantes:

---
import { Font } from 'astro:assets';
---


<Font
  cssVariable="--font-roboto"
  preload={[
    { subset: 'latin', style: 'normal' },
    { weight: '400' },
  ]}
/>

Este ejemplo solo hará preload del subset Latin en estilo normal y cualquier archivo de fuente con un weight de 400. Para fuentes de weight variable (que soportan un rango como 100–900), Astro las compara inteligentemente con tus criterios de filtrado. Solicitar el weight 400 incluirá una fuente variable que cubre el rango 100–900, ya que soporta ese weight.

Puedes filtrar por cualquier combinación de:

  • weight - Weight específico de la fuente (ej., '400', '700')
  • style - Estilo de fuente (ej., 'normal', 'italic')
  • subset - Subset de fuente (ej., 'latin', 'cyrillic')

Esto te da control fino sobre tu estrategia de carga de fuentes, reduciendo descargas innecesarias mientras mantienes la flexibilidad de diseño.

Otras mejoras

  • Botón de copiar para stack traces – El error overlay ahora incluye un botón de copiar para compartir fácilmente stack traces con LLMs y editores de IA para debugging más rápido. ¡Gracias a Deveesh Shetty por contribuir esta característica! (#14489)
  • Scaffolding de configuración de Wrangler – El CLI astro add ahora automáticamente hace scaffolding de wrangler.jsonc al añadir la integración de Cloudflare. ¡Gracias a Oliver Speir por actualizar nuestra documentación de Cloudflare con guía actualizada! (#14564)
  • Deprecación de Node.js 18 – El adaptador de Vercel ahora marca Node.js 18 como deprecated en favor de versiones LTS más recientes. ¡Gracias a Jacob Lamb por esta contribución! (#14555)

Correcciones de bugs

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

Comunidad

El core team de Astro es:

Alexander Niebuhr , Armand Philippot , Chris Swithinbank , Emanuele Stoppa , Erika , Florian Lefebvre , Fred Schott , HiDeoo , Luiz Ferraz , Matt Kane , Matthew Phillips , Reuben Tier , Sarah Rainsberger , and Yan Thomas .

Gracias a todos los demás contribuidores que ayudaron a hacer posible Astro 5.15 con adiciones y mejoras de código y documentación, incluyendo:

Abdelrahman Abdelfattah, Alasdair McLeay, Alvaro Saburido, aprici7y, Aron Homberg, Bartosz Kapciak, Brian Dukes, Deveesh Shetty, Dinotaurent, Edward Brunetiere, Elian, Ewelina Bierć, Eyoz, Felix Schneider, Hunter Bertoson, Jacob Lamb, James Joseph Finn, Jeffrey Yasskin, Jonas Geiler, Junseong Park, kato takeshi, Kenzo Wada, knj, liruifengv, Louis Escher, Mads Erik Forberg, Martin Trapp, Matthew Justice, Maurici Abad Gutierrez, Nin3, Olcan EBREM, Oliver Speir, Paul Sachs, paul valladares, randomguy-2650, Razon Yang, Ricardo Cuauro, Robin Bühler, Sankalpa Acharya, Sebastian Beltran, Steven, Tarik, Thomas Bonnet, Timon Jurschitsch, vrabe, Xidorn Quan, and Yorukot