Astro 5.1

Por
Matt Kane

¡Astro 5.1 ya está disponible! Entregado justo a tiempo para las fiestas, el primer lanzamiento minor de la era de Astro 5 incluye una nueva característica experimental de sessions, caché mejorado para imágenes, y herramientas extra para trabajar con Astro Actions.

Los regalos que trae incluyen:

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: Sessions

Si has construido apps con frameworks como Rails o Laravel, probablemente estés familiarizado con las sessions: una forma simple de rastrear datos por usuario como el estado de inicio de sesión, mensajes flash, o carritos de compra mientras los usuarios navegan tu sitio. Las sessions te permiten almacenar de forma segura datos temporales vinculados a un usuario específico – sin requerir almacenamiento en el cliente. Actualmente, podrías almacenar datos en una cookie o local storage, pero eso puede ser inseguro o engorroso – o tiene límites en la cantidad de datos que puedes almacenar.

Las sessions funcionan almacenando datos en el servidor, y solo enviando un ID de sesión como cookie al cliente. Luego puedes get y set los datos de la sesión en tus páginas y componentes de Astro, endpoints de API, Astro Actions, y middleware. La API y los datos son los mismos para cada uno de ellos.

En componentes y páginas de Astro, puedes acceder al objeto de sesión como Astro.session:

src/components/CartButton.astro
---
export const prerender = false;
const cart = await Astro.session.get('cart');
---


<a href="/cart">🛒 {cart?.length ?? 0} items</a>

Los mismos datos de sesión están disponibles en tus Astro Actions:

src/actions/addToCart.ts
import { defineAction } from "astro:actions";
import { z } from "astro:schema";


export const server = {
  addToCart: defineAction({
    input: z.object({ productId: z.string() }),
    handler: async (input, context) => {
      const cart = await context.session.get("cart");
      cart.push(input.productId);
      await context.session.set("cart", cart);
      return cart;
    },
  }),
};

Las sessions funcionan en páginas que se renderizan bajo demanda, o se combinan perfectamente con server islands, permitiéndote esparcir islands de contenido personalizado en un sitio por lo demás estático.

---
import CartButton from '../components/CartButton.astro';
---
<CartButton server:defer />

Drivers

Las sessions de Astro están potenciadas por drivers de unstorage, que son módulos que Astro usa para almacenar los datos de la sesión. Unstorage soporta decenas de proveedores, dándote un mundo de opciones para almacenar datos de usuarios.

Cuando las sessions se conviertan en una característica estable, los adaptadores oficiales de Astro configurarán automáticamente un driver por defecto. Pero durante esta fase experimental, debes configurar un driver para tu adaptador elegido tú mismo. También puedes usar un driver multiplataforma como Upstash o Redis.

Uso

Para probar las sessions experimentales, añade el flag experimental.sessions a tu astro.config.mjs:

Este ejemplo muestra cómo habilitar el driver de filesystem, que funciona con el adaptador de Node.js:

astro.config.mjs
  {
    adapter: node({ mode: 'standalone' }),
    experimental: {
      session: {
        // Required: the name of the Unstorage driver
        driver: "fs",
      },
    },
  }

Para más información consulta la documentación de sessions para este flag experimental . También apreciaríamos tu feedback sobre la característica. Para más detalles, y para dejar feedback y participar en el desarrollo de la característica, consulta el RFC de Sessions.

Caché de imágenes remotas

Ya conoces y amas el componente integrado <Image /> para mostrar imágenes optimizadas con redimensionado y optimización automáticos. Aunque este componente actualmente transforma tanto imágenes locales como remotas, el caché de imágenes entre compilaciones estaba limitado a imágenes locales.

Ahora, Astro también cacheará imágenes remotas, reduciendo la necesidad de volver a descargar y transformar imágenes en cada compilación. Usa peticiones condicionales con headers If-Modified-Since o If-None-Match para determinar si la imagen sigue siendo fresca, y usará la versión en caché a menos que la imagen fuente haya cambiado.

Esto ahora está habilitado para todos los sitios y funcionará con cualquier host que soporte peticiones condicionales. Consulta la nueva documentación de caché de assets para más detalles.

Agradecimiento especial a @oliverlynch, ¡que contribuyó esta característica!

Helper getActionPath

Usar Astro Actions es tan simple como llamar a actions.like() o actions.addToCart(). Pero a veces necesitas saber la URL de una action para poder hacer una petición fetch() con headers personalizados, o usar una API como navigator.sendBeacon().

Astro 5.1 introduce una nueva función helper, getActionPath() para darte más flexibilidad al llamar a tu action.

¿Necesitas autorizar esos likes? Llama a tu action like pasando el header Authorization y la opción keepalive:

src/components/my-component.astro
<script>
import { actions, getActionPath } from 'astro:actions'


await fetch(getActionPath(actions.like), {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    Authorization: 'Bearer YOUR_TOKEN'
  },
  body: JSON.stringify({ id: 'YOUR_ID' }),
  keepalive: true
})
</script>

Para más información, consulta la nueva documentación de getActionPath().

Correcciones de bugs

Hemos recibido montones de feedback genial desde el lanzamiento de Astro 5, y hemos estado trabajando duro para corregir los problemas que has reportado. Consulta el changelog para todas las correcciones desde Astro 5.0.

Gracias a Florian Lefebvre (@florian-lefebvre), @oliverlynch, Sarah Rainsberger (@sarah11918), Yan (@yanthomasdev), Emanuele Stoppa (@ematipico), y a todos los demás que contribuyeron a este lanzamiento. Gracias también a todos los que han estado usando Astro y compartiendo su feedback. ¡Estamos emocionados de ver qué construís con Astro 5.1!