[Astro 6] Live Collections: Datos dinámicos en Runtime
Hasta ahora, conectar Astro a un CMS implicaba un trade-off doloroso: o perdías el tipado hermoso del Content Layer, o tenías que esperar un redeploy de 3 minutos cada vez que tu equipo de marketing corregía una coma. Con Astro 6 y las Live Collections, eso por fin se terminó. Te muestro cómo consultar colecciones tipadas de forma dinámica en runtime.
El secreto está en extender el nuevo Content Layer usando Loaders que consulten tu API en tiempo de ejecución, combinando la velocidad de Astro con la resolución ultra-estricta del nuevo Zod v4.
src/content/config.ts
import { defineCollection } from 'astro:content';
import { z } from 'astro:schema';
// Configuramos la colección para consultar el CMS en vivo
const liveProducts = defineCollection({
loader: async () => {
// Esto se ejecuta dinámicamente si estás en modo SSR
const res = await fetch('<https://api.tu-cms.com/v1/productos>');
const data = await res.json();
return data.map(item => ({ ...item, id: item.slug }));
},
// Aprovechamos Zod v4 para tipado ultra estricto
schema: z.object({
id: z.string(),
nombre: z.string().min(3),
stock: z.number().int().nonnegative(),
draft: z.boolean().default(false)
}).strict()
});
export const collections = { productos: liveProducts };
En tu componente o página Astro, en lugar de pre-construir el output, ahora podés traer los datos actualizados directo en el request:
src/pages/productos.astro
---
import { getCollection } from 'astro:content';
// Estos datos están actualizados en cada petición al server
const productos = await getCollection('productos', ({ data }) => {
return data.draft !== true;
});
---
<ul>
{productos.map(prod => (
<li>{prod.data.nombre} - Stock: {prod.data.stock}</li>
))}
</ul>Live Collections vs SSG Tradicional
Ganás
- Actualización instantánea de contenido
- Typing de extremo a extremo (Zod 4)
- Sinergia limpia con Server Islands
Cedés
- Aumenta el TTFB si la API externa es lenta
- Requiere un servidor activo (Serverless/Edge)