Astro en Español 6.3 | Astro en Español

¡Astro 6.3 está aquí! Este lanzamiento trae advanced routing experimental, dándote control total sobre tu pipeline de peticiones. Compón handlers individuales, trae tu propio framework como Hono, y decide exactamente qué se ejecuta y en qué orden.

Explora qué hay de nuevo en este lanzamiento:

Experimental: Advanced Routing
Soporte de redirects en URLs de imágenes externas
Procesamiento de imágenes SVG deshabilitado por defecto

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: Advanced Routing

Astro 6.3 introduce soporte experimental para advanced routing: control total sobre cómo fluyen las peticiones a través de tu aplicación, con soporte first-class para frameworks como Hono.

Tu app exporta el patrón fetch handler usado por Cloudflare Workers, Deno, Bun, y Hono. Haz proxy de ciertas rutas a otro servicio y deja que Astro maneje el resto:

import { FetchState, astro } from 'astro/fetch';

export default {
  fetch(request: Request) {
    const state = new FetchState(request);

    if (state.url.pathname.startsWith('/api')) {
      return fetch(new URL(state.url.pathname, 'https://api.example.com'));
    }

    return astro(state);
  }
};

Astro normalmente ejecuta middleware, actions, i18n, y renderizado en un orden fijo. Eso funciona para la mayoría de proyectos, pero a medida que las aplicaciones crecen terminas trabajando alrededor del framework para añadir auth, logging, rate limiting, o lógica específica de plataforma en el lugar correcto.

Con advanced routing, cada paso del pipeline está disponible como su propio handler. Mezcla tu propia lógica y decide exactamente qué se ejecuta y en qué orden:

import { Hono } from 'hono';
import { logger } from 'hono/logger';
import { actions, middleware, pages, i18n } from 'astro/hono';

const app = new Hono();

// Your own middleware runs first.
app.use(logger());
app.use(async (c, next) => {
  if (new URL(c.req.url).pathname.startsWith('/admin')) {
    return c.redirect('/login');
  }
  return next();
});

// Astro handlers in the order you choose.
app.use(actions());
app.use(middleware());
app.use(pages());
app.use(i18n());

export default app;

Los handlers disponibles incluyen astro, trailingSlash, redirects, sessions, actions, middleware, pages, cache, y i18n, exportados desde tanto astro/fetch como astro/hono.

Para más información sobre cómo habilitar y usar esta característica en tu proyecto, consulta la documentación de Experimental Advanced Routing.

Soporte de redirects en URLs de imágenes externas

Al optimizar imágenes remotas, Astro previamente fallaba silenciosamente si la URL de la imagen devolvía un redirect. Esto era un problema para CDNs y servicios de imágenes que usan redirects para enrutar peticiones al edge node o storage bucket correcto. Tus imágenes simplemente desaparecían del build sin explicación.

Astro 6.3 ahora sigue hasta 10 redirects al obtener imágenes remotas. Cada URL en la cadena de redirects se valida contra tu configuración de image.remotePatterns y image.domains, así mantienes el control de qué hosts Astro puede obtener. Si un redirect lleva a un host que no está en tu allowlist, Astro lanzará un error útil en lugar de ignorar silenciosamente la imagen.

import { defineConfig } from "astro/config";

export default defineConfig({
  image: {
    domains: ["example.com", "cdn.example.com"]
  }
});

---
// Redirects to https://cdn.example.com/assets/image.png - works!
// Redirects to https://malicious.com/image.png - throws an error
---
<Image src="https://example.com/assets/image.png" width="1920" height="1080" alt="An example image." />

Si confías en todos los hosts HTTPS, puedes permitirlos con un solo remote pattern:

import { defineConfig } from "astro/config";

export default defineConfig({
  image: {
    remotePatterns: [{
      protocol: 'https'
    }]
  }
});

Procesamiento de imágenes SVG deshabilitado por defecto

El image service de Astro basado en Sharp puede rasterizar archivos SVG a otros formatos como PNG o WebP. Sin embargo, esto ejecuta librsvg por debajo, y los archivos SVG pueden contener scripts embebidos y otro contenido activo. Procesar SVGs no confiables de esta forma es un riesgo de seguridad potencial.

A partir de Astro 6.3, el procesamiento de imágenes SVG está deshabilitado por defecto. Si pasas una fuente SVG al pipeline de optimización de imágenes, Astro ahora lanzará un error útil en lugar de procesarlo silenciosamente.

Si confías en tus fuentes SVG y quieres restaurar el comportamiento anterior, establece la nueva opción image.dangerouslyProcessSVG:

import { defineConfig } from "astro/config";

export default defineConfig({
  image: {
    dangerouslyProcessSVG: true,
  }
});

Este cambio no afecta la importación de SVGs como componentes. Solo se aplica a la rasterización de fuentes SVG a través del pipeline de optimización de imágenes (ej. convertir un SVG a PNG vía <Image />).

Otras mejoras

Un nuevo método consume() para AstroCookies: este método marca las cookies como consumidas y devuelve los valores del header Set-Cookie. Después del consumo, cualquier llamada set() posterior logueará un warning ya que los headers ya se han enviado. Esto reemplaza el método estático AstroCookies.consume(cookies), que ahora está deprecado pero se mantiene por compatibilidad con adaptadores existentes.

Para una lista completa de correcciones de bugs y mejoras menores, consulta el changelog completo.