Astro en Español 5.14 | Astro en Español

🍂 Astro 5.14 tiene una cosecha abundante de características y mejoras de DX para calentar el corazón, con nuevas herramientas de routing, renderizado async de Svelte, soporte de React 19 actions, ¡y más!

Siéntate con una bebida caliente y especiada y disfruta de esta cosecha de características:

Advertencias de colisión de rutas prerenderizadas
Patrones de ruta en getStaticPaths
Soporte de renderizado async para Svelte
Integración de React 19 Actions
Tipo SvgComponent
Soporte libSQL non-Node.js para Astro DB
Configuración de namespaces de sitemap
Acceso programático a datos de fuentes

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

Advertencias de colisión de rutas prerenderizadas

Astro 5.14 hace más fácil detectar y corregir errores comunes en routing dinámico antes de que causen problemas en producción.

Anteriormente, cuando dos rutas dinámicas como /blog/[slug] y /blog/[...all] intentaban prerenderizar la misma ruta (ej. /blog/post-1 ), Astro renderizaba solo la ruta de mayor prioridad para la ruta conflictiva mientras que la otra se ignoraba silenciosamente. Esto permitía que tu sitio compilara con éxito, aunque podrías haber descubierto que algunas páginas fueron renderizadas por rutas inesperadas.

Ahora, cuando esto ocurre, se mostrará una advertencia explicando qué rutas colisionaron y en qué ruta.

Adicionalmente, un nuevo flag experimental failOnPrerenderConflict puede usarse para fallar la compilación con un error útil cuando ocurre tal colisión. Establece el siguiente flag en tu configuración de Astro para que la “mano amiga de Houston” te obligue a abordar explícitamente cualquier conflicto de routing:

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

Consulta más en la documentación del error experimental de conflicto de prerender.

`routePattern` en `getStaticPaths`

Astro 5.14 hace más fácil trabajar con rutas dinámicas complejas en getStaticPaths().

Una nueva propiedad routePattern ahora está disponible en el contexto de getStaticPaths. Esto proporciona la definición original del segmento dinámico en una ruta de archivo de routing (ej. /[...locale]/[files]/[slug]) desde el contexto de renderizado de Astro que de otra manera no estaría disponible dentro del alcance de getStaticPaths(). Esto puede ser útil para calcular los params y props para cada ruta de página.

Por ejemplo, ahora puedes localizar tus segmentos de ruta y devolver un array de rutas estáticas pasando routePattern a una función helper personalizada getLocalizedData(). El objeto params se establecerá con valores explícitos para cada segmento de ruta (ej. locale, files, y slug). Luego, estos valores se usarán para generar las rutas y pueden usarse en tu plantilla de página vía Astro.params.

---
import { getLocalizedData } from "../../../utils/i18n";
export async function getStaticPaths({ routePattern }) {
  const response = await fetch('...');
  const data = await response.json();
  console.log(routePattern); // [...locale]/[files]/[slug]
  // Call your custom helper with `routePattern` to generate the static paths
  return data.flatMap((file) => getLocalizedData(file, routePattern));
}
const { locale, files, slug } = Astro.params;
---

Para más información sobre este patrón avanzado de routing, consulta la referencia de routing de Astro.

¡Gracias a Robin Bühler por contribuir esta característica!

Soporte de renderizado async para Svelte

Este lanzamiento añade soporte para la característica de renderizado async de Svelte.

Svelte 5.36 añadió soporte experimental para renderizado async, permitiéndote usar await en tus componentes en varios lugares nuevos. Esto ya funcionaba out of the box con componentes renderizados en el cliente, pero los componentes renderizados en el servidor necesitaban ayuda extra. Esta actualización añade soporte para renderizado async en el servidor en componentes Svelte usados en Astro.

Para usar renderizado async, debes habilitarlo en tu configuración de Svelte:

export default {
  compilerOptions: {
    experimental: {
      async: true,
    },
  },
};

Luego puedes usar await en tus componentes Svelte:

<script>
  let data = await fetch('/api/data').then(res => res.json());
</script>
<h1>{data.title}</h1>

Consulta la documentación de Svelte para más información sobre el uso de await en componentes Svelte, incluyendo dentro de bloques $derived y directamente en el markup.

Integración de React 19 Actions

React 19 introdujo useActionState(), un hook que te permite actualizar el state basándose en el resultado de una action de formulario.

Las funciones recién estables getActionState() y withState() integran Astro Actions con useActionState(), haciendo fácil construir formularios con progressive enhancement con React y Astro Actions.

Este ejemplo llama a una action like que acepta un postId y devuelve el número de likes. Pasa esta action a la función withState() para aplicar información de progressive enhancement, y aplícala a useActionState() para rastrear el resultado:

import { actions } from 'astro:actions';
import { withState } from '@astrojs/react/actions';
import { useActionState } from 'react';

export function Like({ postId }: { postId: string }) {
  const [state, action, pending] = useActionState(
    withState(actions.like),
    0, // initial likes
  );

  return (
    <form action={action}>
      <input type="hidden" name="postId" value={postId} />
      <button disabled={pending}>{state} ❤️</button>
    </form>
  );
}

También puedes acceder al state almacenado por useActionState() desde tu action handler. Llama a getActionState() con el contexto de la API, y opcionalmente aplica un tipo al resultado:

import { defineAction } from 'astro:actions';
import { z } from 'astro/zod';
import { getActionState } from '@astrojs/react/actions';

export const server = {
  like: defineAction({
    input: z.object({
      postId: z.string(),
    }),
    handler: async ({ postId }, ctx) => {
      const currentLikes = getActionState<number>(ctx);
      // write to database
      return currentLikes + 1;
    },
  }),
};

Si estabas usando previamente la versión experimental de esta característica, necesitarás actualizar tu código para usar los nuevos exports estables:

import { experimental_getActionState, experimental_withState } from '@astrojs/react/actions';
import { getActionState, withState } from '@astrojs/react/actions';

Consulta la guía de integración de React para más información sobre el uso de React 19 con Astro Actions.

Tipo SvgComponent

Astro ahora exporta un tipo SvgComponent integrado para imports de SVG. Cuando importas un archivo SVG en un componente de Astro, se trata como un componente que puedes usar en tu markup. Hasta ahora, obtener el tipo de un componente SVG era un poco incómodo. Ahora puedes importar directamente el SvgComponent desde astro/types en su lugar:

type SvgComponent = typeof import("*.svg")
import type { SvgComponent } from "astro/types"

Consulta la documentación de SVG para más información sobre el uso de SVGs en Astro.

¡Gracias a ADTC por contribuir esta mejora!

Soporte libSQL non-Node.js para Astro DB

Astro DB ahora soporta libSQL al desplegar en Cloudflare y otros entornos non-Node.js.

Este lanzamiento añade un nuevo driver libSQL web que se ejecuta en runtimes basados en web como Cloudflare workerd y Deno. La nueva opción de configuración mode te permite establecer tu tipo de conexión de cliente: node (por defecto) o web.

El modo de driver node de db por defecto se comporta exactamente igual que antes, así que los sitios existentes no necesitan ninguna actualización. Sin embargo, si anteriormente no podías usar Astro DB porque necesitabas un cliente libSQL non-Node.js, ahora puedes instalar y configurar el driver web de libSQL estableciendo mode: 'web' en tu configuración de db:

import db from '@astrojs/db';
import { defineConfig } from 'astro/config';

// https://astro.build/config
export default defineConfig({
  integrations: [db({ mode: 'web' })],
});

Para más información, consulta la documentación de @astrojs/db.

¡Gracias a Adam Matthiesen que contribuyó esta característica y mucho más a la integración de Astro DB!

Configuración de namespaces de sitemap

Por defecto, el estándar de sitemap incluye varios namespaces XML que pueden no ser necesarios para todos los sitios. A partir de Astro 5.14, ahora puedes configurar qué namespaces incluir en tu sitemap XML. Excluir namespaces no usados puede ayudar a crear sitemaps más limpios y enfocados que son más rápidos de analizar para los motores de búsqueda y usan menos ancho de banda. Si tu sitio no tiene contenido de noticias, videos, o múltiples idiomas, puedes excluir esos namespaces para reducir el XML inflado.

La opción namespaces te permite configurar los namespaces news, xhtml, image, y video independientemente. Todos los namespaces están habilitados por defecto para compatibilidad con versiones anteriores y no es necesario ningún cambio en los proyectos existentes. Pero ahora, puedes elegir simplificar tu XML y evitar código innecesario.

Por ejemplo, para excluir el namespace de video de tu sitemap, establece video: false en tu configuración:

import { sitemap } from '@astrojs/sitemap';

export default {
  integrations: [
    sitemap({
      namespaces: {
        video: false,
        // other namespaces remain enabled by default
      },
    }),
  ],
};

El XML generado no incluirá el namespace xmlns:video.

¡Gracias a Julián Colombo por contribuir esta característica!

`getFontData` para acceso programático a fuentes

La Fonts API experimental ahora incluye una forma de acceder a datos de fuentes programáticamente. La función helper getFontData() de astro:assets proporciona acceso a datos de familias de fuentes y URLs de archivos para acceso de bajo nivel.

import { getFontData } from 'astro:assets';

const data = getFontData('--font-roboto');

Por ejemplo, getFontData() puede obtener el buffer de la fuente desde la URL al usar satori para generar imágenes OpenGraph:

import type { APIRoute } from 'astro';
import { getFontData } from 'astro:assets';
import satori from 'satori';

export const GET: APIRoute = (context) => {
  const data = getFontData('--font-roboto');

  const svg = await satori(<div style={{ color: 'black' }}>hello, world</div>, {
    width: 600,
    height: 400,
    fonts: [
      {
        name: 'Roboto',
        data: await fetch(new URL(data[0].src[0].url, context.url.origin)).then(
          (res) => res.arrayBuffer(),
        ),
        weight: 400,
        style: 'normal',
      },
    ],
  });

  // ...
};