Astro 6 Beta

Por
Matthew Phillips

¡Presentamos Astro 6 Beta! Estamos emocionados de anunciar el primer lanzamiento beta de Astro 6, que incluye un development server rediseñado, mejoras significativas de rendimiento de renderizado, y nuevas APIs integradas para trabajar con CSP, fuentes, y live content collections.

¿Qué es Astro? Astro es el web framework para construir sitios web content-driven, incluyendo blogs, marketing, y e-commerce. Si necesitas un sitio web que cargue rápido con un gran SEO, entonces Astro es para ti.

El refactor del development server de Astro 6 acerca mucho más las rutas de código de desarrollo y producción de Astro y aumenta la estabilidad de Astro en todos los runtimes. Ahora, puedes desarrollar tu proyecto de Astro usando el mismo runtime que producción. Notablemente, esto desbloquea soporte first-class para Astro en Cloudflare Workers, con más acceso a primitivos específicos del runtime y una experiencia de desarrollo más fiel a la realidad.

Para probar Astro 6 Beta, ejecuta el comando create astro:

npm create astro@latest -- --ref next

Para actualizar un proyecto existente a la beta, usa la herramienta CLI automatizada @astrojs/upgrade:

# Recommended:
npx @astrojs/upgrade beta


# Manual:
npm install astro@beta
pnpm install astro@beta
yarn add astro@beta

Consulta nuestra guía de actualización v6 para todos los detalles y guía de migración para breaking changes.

Un astro dev rediseñado

La característica principal de Astro 6 es un development server completamente rediseñado (astro dev).

Astro 6 fue la oportunidad de mejorar significativamente cómo Astro gestiona diferentes entornos (client, server, y prerender) con un refactor interno para usar la Environment API de Vite que cierra el gap entre prod y dev.

Anteriormente, el código que funcionaba localmente podía comportarse de forma algo diferente una vez desplegado. Las características específicas de la plataforma a menudo no se podían testear hasta después del despliegue. En algunos casos, Astro incluso tenía rutas de lógica separadas para "dev" y "prod", aumentando la posibilidad de bugs de edge-case.

Aprovechando esta API internamente, Astro ahora puede ejecutar tu aplicación web dentro del mismo runtime al que despliegas, con el mismo JavaScript engine, los mismos globals, y las mismas platform APIs disponibles durante el desarrollo.

Este refactor permite a Astro:

  1. Ejecutar contra runtimes reales – El desarrollo puede ejecutarse dentro del mismo runtime que producción.
  2. Soportar más plataformas – Cloudflare Workers hoy, con una fundación que soporta runtimes adicionales en el futuro.

Al unificar las rutas de código de desarrollo y producción ya hemos descubierto y corregido numerosos bugs sutiles que existían solo en desarrollo o solo en producción.

Este cambio hace a Astro 6 más estable para proyectos en todos los runtimes, incluyendo entornos no-Node.js. ¡Todos los usuarios de Astro disfrutarán de mayor estabilidad y fiabilidad como resultado de esta actualización!

Spotlight: Astro 6 en Cloudflare Workers

Cloudflare Workers son el ejemplo más completo de lo que el nuevo astro dev hace posible hoy.

Hasta ahora, la integración de Cloudflare de Astro simulaba el runtime de Workers durante el desarrollo. Trabajabas contra APIs especiales específicas de Astro como Astro.locals.runtime que proporcionaban polyfills y mocks de la plataforma de Cloudflare, luego hacías deploy y esperabas que todo se comportara igual en producción.

Con Astro 6 Beta, astro dev ahora puede ejecutar toda tu aplicación usando workerd, el runtime de JavaScript open-source de Cloudflare. Este es el mismo runtime que potencia a Cloudflare Workers en producción—no una simulación ni polyfill.

En Astro 6, ahora puedes desarrollar directamente contra platform APIs reales, detectando problemas durante el desarrollo en lugar de después del despliegue. Las APIs especiales de simulación como Astro.locals.runtime ya no son necesarias.

Cuando ejecutas astro dev con soporte de Cloudflare, ahora tienes acceso a:

  • Durable Objects – Testear objetos serverless con estado localmente
  • KV Namespaces – Desarrollar contra key-value storage real
  • R2 Storage – Trabajar con object storage en dev
  • Workers Analytics Engine – Testear recopilación de analytics
  • Variables de entorno & secrets – Soporte completo de configuración
  • Hot Module Replacement (HMR) – Actualizaciones en tiempo real mientras se ejecuta dentro de workerd

Accede a tus bindings de Cloudflare directamente usando el módulo cloudflare:workers:

---
import { env } from "cloudflare:workers";


// Access KV storage directly - works in both dev and production
const kv = env.MY_KV_NAMESPACE;
await kv.put("visits", "1");
const visits = await kv.get("visits");
---
<p>Visits: {visits}</p>

El adaptador de Cloudflare también se ha mejorado significativamente junto al nuevo dev server:

  • astro preview ahora funciona con Cloudflare, permitiéndote testear tu aplicación compilada localmente antes de desplegar
  • Actualizaciones de la Integration API para entrypoints personalizados y configuración del dev server
  • Mensajes de error mejorados cuando tu código difiere del comportamiento de producción

Estamos refinando activamente el soporte de Cloudflare mientras trabajamos hacia el lanzamiento estable de Astro 6. Actualmente, los builds prerenderizados (estáticos) no se ejecutan a través de workerd, pero lo harán antes de que se lance v6.

Si encuentras problemas o comportamiento inesperado, por favor avísanos. Este feedback es especialmente importante a medida que expandimos el soporte de runtime más allá de Node.js.

Consulta la guía de actualización del adaptador de Cloudflare para más información, y el changelog del adaptador de Cloudflare para la lista completa de cambios y mejoras.

Live Collections (Estable)

Las live content collections experimentales de Astro 5.10 ahora son estables en Astro 6. Estas se construyen sobre las content collections type-safe de Astro que ya te permiten obtener contenido tanto localmente como desde CMSs, APIs, bases de datos, y otras fuentes, con una API unificada que funciona en todo tu contenido.

Las live collections desbloquean la pieza que faltaba: actualizar datos en tiempo real sin requerir un rebuild. Con custom data loaders, las live collections son la solución perfecta para tus fuentes de datos de actualización frecuente que requieren frescura de datos al minuto, como precios de bolsa en vivo o inventario.

Las live collections usan una API diferente por debajo, pero la configuración y las funciones helper están diseñadas para resultar familiares para quienes ya usan las build-time content collections de Astro:

src/live.config.ts
import { defineLiveCollection } from 'astro:content';
import { storeLoader } from '@mystore/astro-loader';


const products = defineLiveCollection({
  loader: storeLoader({
    apiKey: process.env.STORE_API_KEY,
  }),
});


export const collections = { products };

Y dado que cualquier cosa puede pasar al hacer una petición de live data (ej. problemas de red, errores de API, problemas de validación), la API está diseñada para hacer el manejo de errores explícito:

---
import { getLiveEntry } from 'astro:content';


const { entry: product, error } = await getLiveEntry('products', Astro.params.id);
if (error) return Astro.redirect('/404');
---
<h1>{product.data.title}</h1>

Consulta la documentación de live content collections para más ejemplos y opciones de configuración.

Content Security Policy (Estable)

El soporte de Content Security Policy (CSP), publicado previamente como característica experimental en Astro 5.9, ahora es estable en Astro 6. CSP ayuda a proteger tu sitio contra ataques de cross-site scripting (XSS) y otros ataques de inyección de código controlando qué recursos pueden cargarse.

Esta fue la solicitud de característica más votada de Astro hasta ahora, y diseñamos cuidadosamente la característica para funcionar en todos los modos de renderizado de Astro (páginas estáticas, páginas dinámicas, y single-page applications), con máxima flexibilidad y type-safety en mente.

Esta característica es compatible con todos los adaptadores oficiales de Astro (Cloudflare, Netlify, Node, Vercel). Astro generará el header CSP o el elemento <meta> por ti, incluyendo hashes de los scripts y estilos usados en una página, ¡incluso los que se cargan dinámicamente!

Ahora puedes establecer csp: true en tu configuración de Astro para protección por defecto, o puedes personalizar aún más tu política de seguridad habilitando esta característica con un objeto de configuración que incluye opciones adicionales:

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


export default defineConfig({
  csp: {
    scriptDirective: {
      resources: [
        "'self'", "https://cdn.example.com"
      ]
    }
  }
});

Consulta la referencia de configuración CSP para todas las opciones disponibles.

Breaking Changes & Migración

Astro 6 incluye varios breaking changes a medida que limpiamos APIs deprecadas y nos alineamos con nuevos estándares. Cambios clave:

  • APIs eliminadas: Astro.glob(), emitESMImage(), componente deprecado <ViewTransitions />, legacy content collections
  • Versión de Node: Requiere Node 22+ (eliminado soporte para Node 18 & 20)
  • Integration API: Actualizaciones a interfaces de adaptadores, route data, y SSR manifest
  • Adaptador de Cloudflare: Breaking changes en Astro.locals.runtime y patrones de custom entrypoint
  • i18n: Cambiado el comportamiento por defecto para i18n.redirectToDefaultLocale
  • Zod 4: Actualizado a Zod 4, Zod 3 ya no soportado

Consulta la guía de actualización para pasos detallados de migración para cada cambio.

Estabilidad & Roadmap

Astro 6 es actualmente software beta. Este es nuestro lanzamiento inicial de estas características, y las estaremos refinando antes del lanzamiento estable de v6.0. Estamos buscando activamente feedback:

  • ¿Estás encontrando edge cases con el desarrollo en workerd?
  • ¿Necesitas soporte de runtime más allá de Cloudflare?
  • ¿Qué podríamos mejorar sobre la experiencia de desarrollo?

El soporte de dev con workerd es particularmente importante de testear ampliamente porque queremos asegurar que funciona sin problemas en diferentes tipos de proyectos y configuraciones.

Empezando

¿Listo para probar Astro 6 Beta?

npm create astro@latest -- --ref next

¿Ya en Astro 5? Actualiza a la beta:

npx @astrojs/upgrade beta

Para proyectos de Cloudflare, consulta la documentación específica del adaptador de Cloudflare v6 beta para instrucciones de configuración.

Gracias

Gracias a todos los que contribuyeron a Astro 6 Beta, especialmente al equipo de Cloudflare por su colaboración en el soporte de workerd.

¡Estamos emocionados de escuchar tu feedback mientras trabajamos hacia el lanzamiento estable de v6 con aún más por venir!

Contáctanos en Bluesky, Twitter, Mastodon, o Discord para contarnos tus experiencias, y reporta cualquier problema que encuentres en GitHub.