Astro en Español 6.0 | Astro en Español

¡Astro 6 está aquí! Astro 6 introduce un amplio conjunto de nuevas capacidades, incluyendo una Fonts API integrada, Content Security Policy API, y soporte para Live Content Collections que funcionan con tu contenido alojado externamente a través de la content layer unificada de Astro.

Junto a estas nuevas características, también completamos un refactor importante del dev server de Astro y gran parte del pipeline de build. Potenciado por la nueva Environment API de Vite, Astro ahora puede ejecutar tu runtime exacto de producción durante el desarrollo. Eso significa menos sorpresas de "funciona en dev, rompe en prod" — especialmente en runtimes no-Node.js como Cloudflare Workers, Bun, y Deno.

Los aspectos destacados completos del lanzamiento incluyen:

Un astro dev rediseñado
Soporte mejorado de Cloudflare
Fonts API integrada
Live Content Collections
Content Security Policy
Paquetes actualizados
Experimental: Rust Compiler
Experimental: Queued Rendering
Experimental: Route Caching
Comunidad

Una cosa más: Astro 6 incluye un nuevo compiler de Rust experimental — el sucesor de nuestro compiler original basado en Go para .astro. Aún es temprano, pero los resultados ya son impresionantes (y en algunos casos, incluso más fiables que nuestro compiler actual de Go). Continuaremos invirtiendo en tooling potenciado por Rust a lo largo de la línea de lanzamientos 6.x para mejorar el rendimiento y la escalabilidad para sitios grandes.

Actualiza ahora

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

# Recommended:
npx @astrojs/upgrade

# Manual:
npm install astro@latest

Para nuevos proyectos, simplemente usa:

npm create astro@latest

Un `astro dev` rediseñado

El dev server de Astro fue originalmente construido para Node.js — y para la mayoría de usuarios de Astro, eso funcionaba genial. Pero a medida que runtimes no-Node como Cloudflare Workers, Bun, y Deno ganaron tracción, esa suposición se convirtió en un punto ciego. Los desarrolladores que apuntaban a estas plataformas no tenían forma de ejecutar su runtime real de producción durante el desarrollo, así que el comportamiento que veías localmente no siempre coincidía con lo que enviabas.

Astro 6 cambia eso. Aprovechando la nueva Environment API de Vite, astro dev ahora puede ejecutar un entorno de runtime personalizado durante el desarrollo. El dev server y el pipeline de build ahora comparten las mismas rutas de código, unificando tu experiencia de desarrollo con producción.

Para los usuarios de Cloudflare, este gap era especialmente doloroso. El dev server se ejecutaba en Node.js, pero producción se ejecutaba en el runtime workerd de Cloudflare. Los bugs solo aparecían después del deploy. Los bindings de Cloudflare — KV, D1, R2, Durable Objects — no estaban disponibles durante el desarrollo en absoluto. Estabas programando a ciegas y esperando que funcionara en producción.

El adaptador @astrojs/cloudflare reconstruido ahora ejecuta workerd en cada etapa: desarrollo, prerendering, y producción. Desarrollas directamente contra las platform APIs de Cloudflare usando cloudflare:workers, con acceso completo a tus bindings localmente. No más capas de simulación, y no más workarounds de Astro.locals.runtime. Este trabajo surgió de nuestra partnership oficial con Cloudflare anunciada el año pasado, con el objetivo de hacer de Cloudflare un runtime first-class de Astro.

Fonts API integrada

Casi todos los sitios web usan fuentes personalizadas, pero hacerlas bien es sorprendentemente complicado. Hay tradeoffs de rendimiento, preocupaciones de privacidad, y una docena de pequeñas decisiones que son fáciles de hacer mal.

Astro 6 añade una Fonts API integrada que se encarga de las partes difíciles por ti. Configuras tus fuentes desde archivos locales o proveedores como Google y Fontsource, y Astro maneja el resto: descarga y caching para self-hosting, generación de fallbacks optimizados, y añadir preload links — manteniendo tu sitio rápido y los datos de tus usuarios privados.

Para empezar, configura un objeto fonts con una o más fuentes que te gustaría usar en tu proyecto:

import { defineConfig, fontProviders } from 'astro/config';

export default defineConfig({
  fonts: [
    {
      name: 'Roboto',
      cssVariable: '--font-roboto',
      provider: fontProviders.fontsource(),
    },
  ],
});

Luego, añade un componente <Font /> y estilos donde lo necesites — un layout global, una sola página, o una sección específica de tu sitio:

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

<Font cssVariable="--font-roboto" preload />
<style is:global>
  body {
    font-family: var(--font-roboto);
  }
</style>

Detrás de escena, Astro descarga los archivos de fuentes, genera fallback fonts optimizadas, y añade las preload hints correctas — así obtienes carga de fuentes con best practices sin configurarlo tú mismo.

Para saber más, consulta la guía de fonts.

Live Content Collections

Las Live Content Collections ahora son estables en Astro 6, trayendo content fetching en tiempo de petición a la content layer unificada de Astro.

Las Content Collections han sido una parte fundamental de Astro desde la 2.0. Pero siempre han requerido un rebuild cuando el contenido cambiaba. Las Live Content Collections obtienen el contenido en tiempo de petición en su lugar, usando las mismas APIs, sin requerir un paso de rebuild. Tu contenido se actualiza al momento de publicarse, sin tocar tu pipeline de build. Eso significa que el contenido de CMS, datos de API, y actualizaciones editoriales se publican instantáneamente.

Usa defineLiveCollection() para definir una live source en src/live.config.ts:

import { defineLiveCollection } from 'astro:content';
import { z } from 'astro/zod';
import { cmsLoader } from './loaders/my-cms';

const updates = defineLiveCollection({
  loader: cmsLoader({ apiKey: process.env.MY_API_KEY }),
  schema: z.object({
    slug: z.string(),
    title: z.string(),
    excerpt: z.string(),
    publishedAt: z.coerce.date(),
  }),
});

export const collections = { updates };

Luego consulta el live content en tu página con manejo de errores integrado:

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

const { entry: update, error } = await getLiveEntry(
  'updates',
  Astro.params.slug,
);

if (error || !update) {
  return Astro.redirect('/404');
}
---

<h1>{update.data.title}</h1>
<p>{update.data.excerpt}</p>
<time>{update.data.publishedAt.toDateString()}</time>

Las Live Content Collections usan las mismas APIs familiares que las build-time collections (getCollection(), getEntry(), schemas, loaders), así que no hay un nuevo modelo mental que aprender. Si tu contenido necesita frescura en tiempo real, define una live collection con un live loader y tu contenido se publica en cada petición. Si no, sigue usando build-time collections para el mejor rendimiento. Ambas pueden coexistir en el mismo proyecto.

Para más sobre live content collections, consulta la guía de content collections.

Content Security Policy

La Content Security Policy API de Astro ahora es estable en Astro 6. Astro es uno de los primeros meta-frameworks de JavaScript en ofrecer configuración CSP integrada tanto para páginas estáticas como dinámicas, en entornos tanto server como serverless.

CSP es engañosamente difícil de implementar en un framework como Astro. Requiere conocer cada script y estilo en una página para que puedan hashearse e incluirse en la política. Para páginas estáticas, eso puede calcularse en build time. Pero para páginas dinámicas, el contenido puede cambiar por petición — lo que significa hashing on the fly e inyectar los headers correctos en runtime. Soportar ambos modos en una sola API unificada es por lo que ningún otro meta-framework ha hecho esto antes.

Empezar es simple. Habilita CSP con un solo flag, y Astro maneja el resto — hasheando automáticamente todos los scripts y estilos en tus páginas y generando los headers CSP apropiados:

import { defineConfig } from 'astro/config';

export default defineConfig({
  security: { csp: true },
  experimental: { csp: true },
});

Eso es todo lo que necesitas para la mayoría de los sitios. Cuando necesitas más control — algoritmos de hashing personalizados, directivas adicionales para scripts o estilos externos — la API de configuración completa está disponible:

import { defineConfig } from 'astro/config';

export default defineConfig({
  security: {
    csp: {
      algorithm: 'SHA-512',
      directives: [
        "default-src 'self'",
        "img-src 'self' https://images.cdn.example.com",
      ],
      styleDirective: { hashes: ['sha384-styleHash'] },
      scriptDirective: { hashes: ['sha384-scriptHash'] },
    },
  },
});

Como parte de esta estabilización, CSP también funciona con las imágenes responsivas de Astro out of the box. Los estilos de imágenes responsivas se calculan en build time y se aplican usando CSS classes y atributos data-*, así que pueden hashearse e incluirse en tu política CSP automáticamente — sin configuración extra necesaria.

Consulta la referencia de configuración de seguridad para todos los detalles.

Paquetes actualizados

Astro 6 incluye actualizaciones importantes de varias dependencias fundamentales:

Vite 7 ahora se usa en Astro y todos los paquetes de @astrojs. Si tu proyecto fija una versión personalizada de Vite, actualízala a v7 o superior antes de actualizar.
Shiki 4 ahora potencia el code highlighting en el componente <Code /> y los bloques de código de Markdown/MDX.
Zod 4 ahora potencia la validación de content schema. Al definir schemas, importa Zod desde astro/zod en lugar de astro:content.

Astro 6 también ahora requiere Node 22 o superior, dejando de soportar Node 18 y Node 20, que han alcanzado o se acercan al end-of-life. Node 22 es más rápido, más seguro, y nos permite eliminar polyfills para versiones más antiguas de Node — resultando en un paquete más pequeño y más mantenible y mejor rendimiento en Astro en general.

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

Experimental: Rust Compiler

Astro 6 incluye un nuevo compiler de Rust experimental — el sucesor de nuestro compiler original basado en Go para .astro.

Lo que empezó como un experimento de IA mientras actualizábamos nuestro compiler de Go para Astro 6 pasó rápidamente de "¿puede funcionar esto?" a "¿por qué no es esto el default?". El nuevo compiler es más rápido, produce diagnostics más fuertes, y en algunos casos es incluso más fiable que nuestro compiler actual de Go. Esperamos hacerlo el default en un futuro lanzamiento major.

Puedes probarlo hoy habilitando el flag rustCompiler e instalando el paquete @astrojs/compiler-rs:

npm install @astrojs/compiler-rs

import { defineConfig } from 'astro/config';

export default defineConfig({
  experimental: {
    rustCompiler: true,
  },
});

Estamos explorando activamente más tooling potenciado por Rust en Astro, con más para compartir pronto.

Lee nuestra documentación de referencia sobre el compiler de Rust para más detalles.

Experimental: Queued Rendering

Astro 6 introduce una nueva estrategia de renderizado experimental, con benchmarks tempranos mostrando hasta 2x más rápido en el renderizado.

Hoy, Astro renderiza componentes recursivamente. Las funciones de renderizado se llaman a sí mismas mientras recorren el árbol de componentes. Queued rendering reemplaza esto con un enfoque de dos pasadas: la primera pasada recorre el árbol y emite una cola ordenada, luego la segunda pasada lo renderiza. El resultado es tanto más rápido como más eficiente en memoria, y planeamos hacerlo la estrategia de renderizado por defecto en Astro v7.

Pruébalo hoy habilitando el flag experimental:

import { defineConfig } from 'astro/config';

export default defineConfig({
  experimental: {
    queuedRendering: {
      enabled: true,
    },
  },
});

Consulta la documentación de queued rendering experimental para más sobre esta característica, incluyendo opciones adicionales como node pooling y content caching.

Experimental: Route Caching

Astro 6 incluye una API experimental de route caching que te da una forma platform-agnostic de cachear respuestas server-rendered usando semánticas de cache estándar web.

Cachear respuestas SSR hoy es más difícil de lo que debería ser. Cada host lo hace diferente, y no hay una forma estándar de controlarlo desde el código de tu aplicación. Route caching te da una sola API platform-agnostic: establece directivas de caching en tus rutas, y Astro maneja el resto sin importar dónde despliegas.

Habilita el route caching configurando un cache provider en tu configuración de Astro. Un cache provider le dice a Astro dónde almacenar las respuestas cacheadas. Astro incluye un provider memoryCache integrado para que empieces:

import { defineConfig } from 'astro/config';
import { memoryCache } from 'astro/config';

export default defineConfig({
  experimental: {
    cache: { provider: memoryCache() },
  },
});

Luego usa Astro.cache (o context.cache, en API routes) para controlar el caching por petición. Puedes establecer la duración del cache, ventanas de stale-while-revalidate, y tags para invalidación dirigida. En este ejemplo, establecemos los cache headers para la respuesta, personalizados a la petición:

---
Astro.cache.set({
  maxAge: 120, // Cache for 2 minutes
  swr: 60, // Serve stale for 1 minute while revalidating
  tags: ['home'], // Tag for targeted invalidation
});
---

<html><body>Cached page</body></html>

Aquí es donde la content layer unificada de Astro realmente brilla. Route caching se integra directamente con live content collections, trazando automáticamente las dependencias entre páginas y content entries. Cuando un content entry cambia, cualquier respuesta cacheada que dependa de él se invalida automáticamente:

import { getEntry } from 'astro:content';
const product = await getEntry('products', Astro.params.slug);

// When the product changes, Astro will invalidate this cached page:
Astro.cache.set(product);

Este lanzamiento inicial incluye un cache provider simple en memoria, que funciona mejor con el adaptador de Node.js. Estaremos añadiendo cache providers para todas las plataformas de despliegue soportadas por Astro en las próximas semanas. También esperamos que haya providers construidos por la comunidad para servicios de CDN, y otros tipos de almacenamiento como Redis. ¡Ponte en contacto en Discord si estás interesado en construir uno!

Para más detalles, consulta la documentación experimental de route caching.

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 .

Agradecimiento especial a todos los que contribuyeron a Astro 6 con código, documentación, revisiones, y testing, incluyendo:

0xRozier, Abdelrahman Abdelfattah, Adam Matthiesen, Adrian, ADTC, Ahmad Yasser, Alasdair McLeay, Alejandro Romano, Alex, Alex Launi, Andreas Deininger, Andrey, Andrey Gurtovoy, andy, Antony Faris, Ariel K, Aron Homberg, Ash Hitchcock, Azat S., Bartosz Kapciak, Brian Dukes, btea, Cameron Pak, Cameron Smith, cid, CyberFlame, Danilo Velasquez Urrutia, Darknab, Deleted user, Deveesh Shetty, Dom Christie, Dominik G., Dream, Drew Powers, Edgar, Edward Brunetiere, ellielok, Eric Grill, Eryk Baran, everdimension, fabon, Felix Schneider, fkatsuhiro, Fred K. Schott, Fredrik Norlin, Gokhan Kurt, Henri Fournier, Hunter Bertoson, Ibim Braide, Jack Platten, Jack Shelton, James Garbutt, James Opstad, Jeffrey Yasskin, jmgala, joel hansson, Johan Rouve, John L. Armstrong IV, John Mortlock, Jonas Geiler, Josh Soref, Julián Colombo, Julian Wolf, Julien Cayzac, Junseong Park, Justin Francos, kato takeshi, Kedar Vartak, Kendell, Kevin Brown, knj, Koos Looijesteijn, Kristijan, KTrain, ktym4a, Lieke, Light, Louis Escher, Luky Setiawan, Mads Erik Forberg, Manuel Meister, Mark Ignacio, Martin Trapp, Matheus Baroni, Matthew Conto, Matthew Justice, Maurici Abad Gutierrez, Mehdi El Fadil, Michael Payne, Michael Stramel, Mike Pagé, MkDev11, Morten Oftedal, nemu, Ntale Swamadu, Ocavue (Jiajin Wen), Olcan EBREM, Oliver Speir, Olivier Dusabimana, Patrick Arlt, Phaneendra, Philippe Serhal, Raanelom, Rafael Yasuhide Sudo, Rahul Dogra, randomguy-2650, Razon Yang, Robin Bühler, Roman, Roman Hauksson-Neill, Roman Kholiavko, sanchezmaldonadojesusadrian14-coder, Sebastian Beltran, Shinya Fujino, Simen Sagholen Førrisdal, Stel Clementine, Steven, Tanishq Manuja, Tee Ming, Timo Behrmann, Tony Narlock, Umut Keltek, Varun Chawla, Victor Berchet, Vladyslav Shevchenko, Volpeon, Willow (GHOST), Xidorn Quan, Yagiz Nizipli, yy, 五月七日千緒, and 翠

Esperamos que disfrutes Astro 6. Si encuentras problemas o quieres compartir feedback, únete a nosotros en Discord, publica en GitHub, o contáctanos en Bluesky, Twitter, y Mastodon.