Astro en Español 4.8 | Astro en Español

¡Astro 4.8 ya está disponible! Este lanzamiento incluye soporte experimental para Astro actions y request rewriting, mejoras de rendimiento, y más.

Los aspectos destacados completos del lanzamiento incluyen:

Experimental: Astro Actions
Experimental: Request Rewriting
Mejoras de rendimiento
Capacidad de definir múltiples rutas con el mismo entrypoint

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

Experimental: Astro Actions

Este lanzamiento incluye la primera vista previa de una característica muy esperada: ¡Astro actions! Las Actions facilitan definir y llamar funciones de backend con total type-safety desde tu código cliente.

Para usar esta característica, añade una salida de compilación server y habilita la opción experimental.actions en tu configuración de Astro:

import { defineConfig } from "astro/config";

export default defineConfig({
  output: "hybrid", // or 'server'
  experimental: {
    actions: true,
  },
});

Luego, define actions en un archivo src/actions/index.ts usando defineAction(). Puedes definir actions que acepten peticiones JSON o de formularios, y la función handler será llamada con tu entrada type-safe.

Además, no más casting de resultados de formData.get(). Astro analizará automáticamente las peticiones de formularios a objetos usando tu Zod schema. Aquí hay un ejemplo de una action de registro de newsletter:

import { defineAction, z } from "astro:actions";

export const server = {
  newsletter: defineAction({
    accept: "form",
    input: z.object({
      email: z.string().email(),
      receivePromo: z.boolean(),
    }),
    handler: async ({ email, receivePromo }) => {
      // call a mailing service, or store to a database
      return { success: true };
    },
  }),
};

Puedes llamar a las actions desde cualquier componente cliente usando el objeto actions de astro:actions. Puedes pasar un objeto type-safe cuando uses JSON, o un objeto FormData cuando uses accept: 'form'. También puedes añadir getActionProps() para progressive enhancement:

import { actions, getActionProps } from "astro:actions";

export function Newsletter() {
  return (
    <form
      method="POST"
      onSubmit={async (e) => {
        e.preventDefault();
        const formData = new FormData(e.target as HTMLFormElement);
        const result = await actions.newsletter(formData);
      }}
    >
      <input {...getActionProps(actions.newsletter)} />
      <label htmlFor="email">Email</label>
      <input name="email" type="email" id="email" />

      <label htmlFor="receivePromo">Receive promotional emails</label>
      <input name="receivePromo" type="checkbox" id="receivePromo" checked />

      <button type="submit">Sign Up</button>
    </form>
  );
}

Para más información sobre Astro actions, visita la documentación experimental de actions.

Experimental: Request Rewriting

Astro 4.8 introduce soporte experimental para request rewriting. Rewriting es una característica de enrutado que te permite mostrar el contenido de una página diferente desde la URL actual. Esto puede ser útil para personalizar el contenido basándose en la ubicación del usuario, dispositivo, u otras condiciones sin necesidad de múltiples URLs diferentes. Esta característica a veces también se llama “rerouting” en otros frameworks.

Para habilitar esta característica, configura la opción experimental.rewriting en tu configuración de Astro:

import { defineConfig } from "astro/config";

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

Desde tus páginas y endpoints, puedes entonces acceder a un método rewrite() en el objeto global o context de Astro:

---
if (!Astro.props.allowed) {
  return Astro.rewrite("/")
}
---

export function GET(ctx) {
  if (!ctx.locals.allowed) {
    return ctx.rewrite("/");
  }
}

Esta característica también puede usarse dentro de middlewares, pasando un parámetro al método next() con el mismo tipo que el método rewrite.

export function onRequest(ctx, next) {
  if (!ctx.cookies.get("allowed")) {
    return next("/");
  }
  return next();
}

Para más información sobre rewriting, visita la documentación experimental de rewriting.

Mejoras de rendimiento

¡Gracias al reciente trabajo duro de @bluwy tanto en el ecosistema JavaScript como en el propio Astro, Astro es más rápido que nunca! Este lanzamiento incluye una serie de mejoras de rendimiento, reduciendo los tiempos de compilación y renderizado en general.

En nuestros propios benchmarks, hemos observado que los tiempos de compilación mejoran hasta un 20% en casos específicos. No se necesitan cambios para aprovechar estas mejoras—¡solo actualiza a Astro 4.8 y disfruta de compilaciones más rápidas!

Capacidad de definir múltiples rutas con el mismo entrypoint

Los autores de integraciones de Astro descubrieron que intentar inyectar múltiples rutas con el mismo entrypoint usando la función injectRoute resultaría en un comportamiento no intencionado en tiempo de compilación donde la última ruta inyectada sobrescribiría las anteriores.

Este problema ha existido desde la introducción de la función injectRoute, hace casi dos años (en Astro 1.0), pero gracias a una contribución de @goulvenclech, ¡ahora está finalmente corregido en Astro 4.8!

Con nuestra próspera comunidad de desarrolladores y tantas integraciones nuevas construyéndose todo el tiempo, es importante para nosotros que Astro sea una gran plataforma para la que construir y estamos contentos de que esto allane el camino para aún más integraciones en el futuro!

Corrección de Bugs

Como ya sabes, ¡Astro 4.8 incluye más correcciones de bugs y mejoras menores que no han podido entrar en este post! Consulta las notas del lanzamiento completas para saber más.