Astro 5.4

Por
Matt Kane

¡Astro 5.4 trae optimización de imágenes remotas en Markdown, seguridad mejorada para los servidores de dev y preview, soporte de RegExp para exclusiones de Vercel ISR, y más!

🖼️ Tenemos un lanzamiento perfecto para ti con 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

Optimización de imágenes remotas en Markdown

El servicio de imágenes de Astro ya manejaba la optimización de tus imágenes Markdown locales. ¡Ahora, puede hacer lo mismo para imágenes remotas también!

Anteriormente, cuando usabas sintaxis estándar de Markdown como ![Houston](https://images.unsplash.com/photo-1530089711124-9ca31fb9e863) con imágenes remotas, Astro simplemente las pasaba sin ningún procesamiento. Esto era diferente a cómo funcionaba el componente Image, y significaba que no podías aprovechar la optimización de imágenes de Astro para imágenes almacenadas en un CMS u otras ubicaciones externas.

Con Astro 5.4, el servicio de imágenes ahora procesa y optimiza automáticamente las imágenes remotas en tus archivos Markdown y MDX también. Obtendrás todos los beneficios de la optimización de imágenes de Astro sin cambiar cómo escribes tu contenido.

Esta característica está habilitada por defecto–cualquier imagen remota existente en tus archivos Markdown y MDX se optimizará automáticamente. Si necesitas optar por no participar para imágenes específicas, puedes usar tags HTML <img> en lugar de sintaxis Markdown.

Ten en cuenta que las imágenes en tu carpeta public/ todavía nunca se procesan, siguiendo el comportamiento normal de Astro.

¡Gracias a PolyWolf por esta gran contribución!

Soporte experimental de imágenes responsive en Markdown

Anteriormente la característica experimental de imágenes responsive solo tenía soporte completo en los componentes Image y Picture. ¡En Astro 5.4, hemos extendido este soporte a archivos Markdown y MDX también!

Al usar la opción experimental.responsiveImages en tu configuración de Astro, Astro ahora generará imágenes responsive para las imágenes en tus archivos Markdown y MDX, aplicando las propiedades y estilos correctos para hacerlas responsive.

¡Gracias de nuevo a PolyWolf que también contribuyó esta característica!

Allowlist de hosts para servidores de dev y preview

Para mayor seguridad, Astro 5.4 introduce una nueva opción para restringir a qué hostnames responderán tus servidores de dev y preview.

La nueva opción de configuración server.allowedHosts te permite especificar una lista de hostnames permitidos. Esto comprobará el header Host de las peticiones entrantes y solo responderá a las peticiones con un hostname coincidente. Esto ayuda a prevenir ataques de DNS rebinding como GHSA-vg6x-rcgg-rjx6.

Puedes configurar esto en tu astro.config.mjs:

astro.config.mjs
import {defineConfig} from "astro/config";


export default defineConfig({
  server: {
    allowedHosts: ['hello.world.example.local', 'hello.example.local']
  }
})

O directamente en el CLI:

astro dev --allowed-hosts=hello.world.example.local,hello.example.local
astro preview --allowed-hosts=hello.world.example.local,hello.example.local

Solo deberías usar esto con dominios que controles. Permitir dominios de terceros puede exponerte a riesgos de seguridad.

Si necesitas más detalles sobre cómo funciona debajo del capó, consulta la documentación de Vite, ya que la implementación es la misma.

Soporte de RegExp para exclusiones de Vercel ISR

Si estás usando Incremental Static Regeneration (ISR) con el adaptador de Vercel, ahora tienes más flexibilidad para definir qué rutas deben excluirse del caché ISR.

Anteriormente, tenías que listar explícitamente cada ruta a excluir en la opción isr.exclude. Para sitios con muchas rutas que requieren server-side rendering, esto podía volverse difícil de manejar:

astro.config.mjs
import vercel from '@astrojs/vercel';


export default defineConfig({
  output: 'server',
  adapter: vercel({
    isr: {
      exclude: [
        '/api/users',
        '/api/posts',
        '/api/comments',
        // ... many more API routes
      ]
    }
  })
});

Ahora puedes usar expresiones regulares para crear exclusiones potentes basadas en patrones:

astro.config.mjs
import vercel from '@astrojs/vercel';


export default defineConfig({
  output: 'server',
  adapter: vercel({
    isr: {
      exclude: [
        '/preview',      // Specific route
        '/auth/[page]',  // Dynamic route
        /^\/api\/.+/,    // RegExp: all routes starting with /api/
      ]
    }
  })
});

Esto hace mucho más fácil gestionar las exclusiones ISR a escala, especialmente para sitios con muchas API routes o páginas dinámicas.

¡Gracias a Slawek Kolodziej por esta contribución!

Nuevos helpers de configuración y opciones de build

Astro 5.4 introduce nuevas APIs que hacen más fácil trabajar con Astro programáticamente, particularmente para escenarios de testing y scripting.

Helpers de configuración

Dos nuevas funciones helper se exportan ahora desde astro/config:

  • mergeConfig: Te permite mezclar configuraciones de Astro parcialmente definidas sobre una configuración base, siguiendo las mismas reglas que la función updateConfig disponible para integraciones.
  • validateConfig: Valida que un valor dado sea una configuración válida de Astro y rellena los valores por defecto según sea necesario.

Estos helpers son particularmente útiles para autores de integraciones y para desarrolladores que escriben scripts que necesitan manipular configuraciones de Astro programáticamente.

Opciones de build programáticas

La API build ahora acepta un segundo argumento opcional BuildOptions con dos opciones:

  • devOutput: Cuando se establece a true, genera una compilación basada en desarrollo similar al código transformado en astro dev. Por defecto es false.
  • teardownCompiler: Controla si se debe hacer teardown de la instancia WASM del compiler después de la compilación. Por defecto es true.

Estas opciones proporcionan más control al ejecutar compilaciones de Astro programáticamente, especialmente para escenarios de testing o pipelines de build personalizados.

Correcciones de bugs

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

Gracias

Gracias a todos los que contribuyeron a este lanzamiento, incluyendo Emanuele Stoppa, Luiz Ferraz, Sarah Rainsberger, HiDeoo, Yan Thomas, PolyWolf, Slawek Kolodziej, y muchos más.

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