Astro 5.10

Por
Matt Kane

🎥 Esta vez lo estamos haciendo en vivo – y siempre somos responsive a tus necesidades.

Astro 5.10 trae imágenes responsivas para todos, además de colecciones de contenido en vivo experimentales, mejoras de CSP, ¡y más!

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

Live content collections experimentales

Astro 5.10 introduce una nueva característica experimental: live content collections. Esta potente adición te permite obtener contenido en tiempo de ejecución en lugar de en tiempo de compilación, abriendo nuevas posibilidades para contenido dinámico y en tiempo real.

Las content collections en tiempo de compilación son perfectas para contenido que no cambia mucho, o donde tu sitio es rápido y fácil de recompilar cuando cambia. ¿Pero qué pasa con los datos que cambian frecuentemente, o que necesitan personalizarse para el usuario? Las live content collections llenan este vacío permitiéndote obtener datos frescos en cada petición.

Cómo funciona

Las live content collections usan un nuevo tipo de loader que obtiene datos en tiempo de ejecución. A diferencia de los loaders existentes que se ejecutan durante el proceso de compilación, los live loaders se ejecutan cuando los usuarios visitan tus páginas, asegurando que siempre tengas los datos más recientes.

Para el mejor rendimiento deberías seguir usando colecciones en tiempo de compilación cuando sea posible. Pero ahora puedes usar live collections para datos que necesitan estar completamente actualizados, o donde quieres filtrar o personalizar los datos basándote en la entrada del usuario, credenciales, o preferencias.

Para empezar, habilita las live content collections experimentales en tu configuración de Astro:

astro.config.mjs
export default defineConfig({
  experimental: {
    liveContentCollections: true,
  },
});

Crea un archivo src/live.config.ts para definir tus live collections:

src/live.config.ts
import { defineLiveCollection } from 'astro:content';
import { storeLoader } from './loaders/store';


export const products = defineLiveCollection({
  type: 'live',
  loader: storeLoader({
    apiKey: process.env.STORE_API_KEY,
    endpoint: 'https://api.mystore.com/v1',
  }),
});

Obtención de datos en vivo

Usa las nuevas funciones getLiveCollection() y getLiveEntry() para obtener datos en tus componentes:

src/pages/products/[slug].astro
---
import { getLiveEntry } from 'astro:content';


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


if (error) {
  console.error('Failed to load product:', error);
  return Astro.rewrite('/404');
}
---


<h1>{product.data.name}</h1>
<p>
  {
    Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(
      product.data.price,
    )
  }
</p>

Renderizado de contenido en vivo

Los live loaders pueden generar contenido renderizado, como los loaders en tiempo de compilación, haciendo que sea muy fácil mostrar datos dinámicos en tus componentes:

src/pages/products/[slug].astro
---
import { getLiveEntry, render } from 'astro:content';


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


if (error) {
  console.error('Failed to load product:', error);
  return Astro.rewrite('/404');
}


const { Content } = await render(product);
---


<h1>{product.data.name}</h1>


<Content />

Filtrado flexible

Los live loaders soportan opciones de query y filter específicas del loader, permitiéndote llevar la lógica de filtrado al nivel de la API para una obtención de datos más eficiente. Esto significa que puedes solicitar exactamente los datos que necesitas en lugar de obtener todo y filtrar en el lado del cliente.

src/pages/products.astro
---
import { getLiveCollection } from 'astro:content';


const { entries, error } = await getLiveCollection('products', {
  category: 'electronics',
  priceRange: { min: 10, max: 100 },
});
---

Manejo de errores

Las live content collections proporcionan manejo de errores explícito con objetos de resultado que contienen datos o un objeto de error. Esto hace que el comportamiento en tiempo de ejecución sea predecible y te ayuda a manejar fallos con elegancia.

Type safety

No sería Astro si no estuviera construido con type-safety en mente, así que la API es completamente type-safe, con tipos genéricos asegurando que tus datos y opciones de query estén correctamente tipados:

// Custom loader with typed queries and data
const { entry, error } = await getLiveEntry('products', {
  uuid: Astro.params.uuid, // Filter options are type-checked
});
// `entry` will be typed

Las live content collections son experimentales y estamos buscando activamente feedback de la comunidad. ¡Pruébalas en tus proyectos y cuéntanos cómo te funcionan!

Para más detalles, incluyendo cómo construir live loaders, consulta la documentación experimental de live content collections. Danos tu feedback en el RFC.

Las imágenes responsive ya son estables

¡La característica de imágenes responsive de Astro ya es estable y lista para producción!

Las imágenes responsive generan automáticamente atributos srcset y sizes optimizados, y pueden generar los estilos necesarios para asegurar que tus imágenes carguen rápido y se muestren hermosamente en todos los tamaños de pantalla. Di adiós a los layout shifts y a las imágenes de carga lenta que perjudican tus puntuaciones de Core Web Vitals.

Empezar con imágenes responsive

La propiedad layout define cómo deben redimensionarse tus imágenes responsive y determina el srcset y sizes a generar. Puedes establecer esto globalmente en tu configuración de Astro para aplicar a todas las imágenes por defecto, o a nivel de imagen individual en un componente <Image /> o <Picture />. Para habilitar este comportamiento responsive, configura el estilo responsive global por defecto de Astro que soporta las opciones de layout integradas:

astro.config.mjs
export default defineConfig({
  image: {
    responsiveStyles: true,
    layout: 'constrained',
  },
});

Opciones de layout: Elige entre layouts constrained, fixed, o full-width para controlar cómo se comportan tus imágenes. Establecer este valor en un componente individual sobrescribirá tu layout por defecto. Por ejemplo, puedes añadir el atributo layout para crear una imagen hero a ancho completo mientras mantienes el resto de tus imágenes constrained a su contenedor:

<Image
  src="/hero.jpg"
  alt="A panoramic view of the mountains"
  layout="full-width"
/>

Carga prioritaria: Usa la nueva prop priority para optimizar imágenes críticas que aparecen above the fold:

<Image src="/hero.jpg" alt="Hero image" priority />

Cuando añades priority, Astro establece automáticamente loading="eager", decoding="sync", y fetchpriority="high" para asegurar que la imagen cargue inmediatamente. Usa esto con moderación – idealmente no más de una imagen por página debería tener carga prioritaria. ¡Asegúrate de necesitarlo antes de usarlo! Comprueba si tu elemento Largest Contentful Paint (LCP) es una imagen, y si es así, establece el flag priority en ella para hacerla visible a tus visitantes antes.

Controles de recorte mejorados: Las propiedades fit y position te dan control preciso sobre cómo se recortan y posicionan las imágenes:

<Image
  src="/profile.jpg"
  alt="Profile photo"
  fit="cover"
  position="center top"
  width={300}
  height={300}
/>

Actualizar desde imágenes responsive experimentales

Si estabas usando imágenes responsive experimentales, debes eliminar el flag experimental de tu archivo astro.config.mjs y actualizar cualquier opción de image.experimental con sus versiones estables:

astro.config.mjs
export default defineConfig({
  experimental: {
    responsiveImages: true,
  },
  image: {
    responsiveStyles: true,
  },
});

Para detalles completos, consulta la guía de Images actualizada.

Mejoras a la Content Security Policy experimental

Astro 5.9 incluyó soporte experimental para meta tags de Content Security Policy (CSP), trayendo potentes características de seguridad a tus sitios de Astro. En 5.10, hemos hecho varias mejoras basándonos en feedback de la comunidad. Lo más importante es que ahora soportamos la generación de headers CSP, incluyendo para páginas estáticas.

Las páginas renderizadas bajo demanda ahora enviarán headers de Response para CSP, en lugar de meta tags. Esto mejora el rendimiento en Chrome, y añade soporte para más directivas, como report-uri y frame-ancestors, que no se soportan en meta tags.

Por defecto, las páginas prerenderizadas seguirán usando meta tags, pero ahora hay soporte core para generar headers para páginas prerenderizadas también a través de adaptadores oficiales. Eventualmente, esto se implementará en todos los adaptadores, pero actualmente solo los adaptadores @astrojs/netlify y @astrojs/vercel lo soportan. Para habilitarlo, asegúrate de haber actualizado a la última versión del adaptador y añade la opción experimentalStaticHeaders a tu configuración del adaptador:

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


export default defineConfig({
  adapter: netlify({
    experimentalStaticHeaders: true,
  }),
  experimental: {
    csp: true,
  },
});

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

Entrypoint personalizable para Cloudflare Workers

Algunas características de Cloudflare Workers, como Durable Objects, Cloudflare Queues, y Cron Triggers requieren un archivo entrypoint personalizado. Como el adaptador @astrojs/cloudflare genera el entrypoint usado para servir un sitio, estas características anteriormente no era posible usarlas con Astro. Este lanzamiento añade soporte para personalizar el archivo entrypoint usado por el adaptador @astrojs/cloudflare, dándote control total sobre tu configuración de Cloudflare Workers.

Para personalizar el entrypoint, añade la opción workerEntryPoint a la configuración de tu adaptador @astrojs/cloudflare en tu archivo astro.config.mjs:

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


export default defineConfig({
  adapter: cloudflare({
    workerEntryPoint: {
      path: 'src/worker.ts',
      namedExports: ['MyDurableObject']
    }
  }),
});

Luego puedes crear un archivo entrypoint personalizado en la ruta especificada, que puede incluir cualquier import o export adicional que necesites para tu configuración de Workers. Este ejemplo configura un archivo entry personalizado que registra un Durable Object y un queue handler:

src/worker.ts
import type { SSRManifest } from 'astro';


import { App } from 'astro/app';
import { handle } from '@astrojs/cloudflare/handler'
import { DurableObject } from 'cloudflare:workers';


class MyDurableObject extends DurableObject<Env> {
  constructor(ctx: DurableObjectState, env: Env) {
    super(ctx, env)
  }
}


export function createExports(manifest: SSRManifest) {
  const app = new App(manifest);
  return {
    default: {
      async fetch(request, env, ctx) {
        // Your bindings must also be defined in your `wrangler.toml`/`wrangler.jsonc` file
        await env.MY_QUEUE.send("log");
        // Make sure you pass the request to Astro's handler
        return handle(manifest, app, request, env, ctx);
      },
      async queue(batch, _env) {
        let messages = JSON.stringify(batch.messages);
        console.log(`consumed from our queue: ${messages}`);
      }
    } satisfies ExportedHandler<Env>,
    MyDurableObject,
  }
}

Para más detalles, consulta la documentación del adaptador de Cloudflare actualizada.

¡Gracias a Alexander Niebuhr que contribuyó esta característica, y hace la mayor parte del trabajo en el adaptador @astrojs/cloudflare!

Correcciones de bugs

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

Comunidad

El core team de Astro es:

Ben Holmes , Caleb Jasik , Chris Swithinbank , Emanuele Stoppa , Erika , Florian Lefebvre , Fred Schott , Fuzzy , HiDeoo , Luiz Ferraz , Matt Kane , Matthew Phillips , Nate Moore , Reuben Tier , Sarah Rainsberger , and Yan Thomas .

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

Alexander Niebuhr, Anshul Gupta, Armand Philippot, benosmac, Han Seung Min - 한승민, Junseong Park, kato takeshi, knj, liruifengv, Martin Haug, Martin Trapp, Nin3, Paul Valladares, Quinn Blenkinsop, Thomas Bonnet, and zaitovalisher