Astro 5.0

Por
Erika
Matt Kane
Matthew Phillips

¡Presentamos Astro 5.0! Con Astro Content Layer para cargar tu contenido desde cualquier fuente, y Server Islands para combinar contenido estático cacheado con contenido dinámico y personalizado. Sigue leyendo para saber más sobre estas potentes nuevas características y más.

¿Qué es Astro? Astro es el framework web para construir sitios web orientados a contenido incluyendo blogs, marketing, y e-commerce. Si necesitas un sitio web que cargue rápido con un gran SEO, entonces Astro es para ti.

Release highlights include:

Visita astro.new para probar Astro 5.0 directamente en tu navegador, o para iniciar un nuevo proyecto usando Astro 5.0, ejecuta el comando create astro para tu gestor de paquetes:

npm create astro@latest

Para actualizar un proyecto existente, usa la herramienta CLI automatizada @astrojs/upgrade. Alternativamente, actualiza manualmente ejecutando el comando de instalación para tu gestor de paquetes.

# Recommended:
npx @astrojs/upgrade


# Manual:
npm install astro
pnpm install astro
yarn add astro

Consulta nuestra guía de actualización para obtener detalles completos y guía de actualización individual para cada cambio de este lanzamiento.

Content Layer

Astro es el mejor framework para sitios orientados a contenido, y con Astro 5.0 lo estamos haciendo aún mejor. El Astro Content Layer es una nueva forma flexible y conectable de gestionar contenido, proporcionando una API unificada y type-safe para definir, cargar y acceder a tu contenido en tu proyecto de Astro, sin importar de dónde provenga.

src/content.config.ts
import { defineCollection, z } from 'astro:content';
import { glob } from 'astro/loaders';
import { notionLoader } from "notion-astro-loader";


const blog = defineCollection({
  // Load data from Markdown files on disk
  loader: glob({ pattern: "**/*.md", base: "./src/data/blog" }),
  schema: z.object({ /* optionally define a schema for type-safe data */  }),
});


const database = defineCollection({
  // Automatically fetch content in one line with a loader
  loader: notionLoader({ /* ... */ })
});


const countries = defineCollection({
  // Load data from anywhere!
  loader: () => fetch('https://api.example.com/countries').then(res => res.json()),
});


export const collections = { blog, database, countries }

Desde Astro 2.0, las content collections te han permitido organizar tu contenido estático en colecciones type-safe, y luego usarlas en cualquier página de tu sitio. Sin embargo, a medida que tu sitio crece, tener tu contenido en archivos Markdown en un repositorio Git puede volverse menos práctico. Podrías querer usar un CMS, tener algunas secciones de tu sitio potenciadas por una REST API, o usar imágenes optimizadas provenientes de un sistema de gestión de assets como Cloudinary. Esto puede convertirse rápidamente en un caos de gestionar, requiriendo varias APIs y estrategias de obtención de datos.

El content layer es la solución a esto, trayendo todo tu contenido a un data store amigable y type-safe, listo para usar en todo tu sitio. Son las content collections que conoces y amas pero con el poder extra de los loaders – funciones conectables que obtienen y transforman datos de cualquier fuente. Con el content layer, puedes:

Cuando compilas tu sitio, Astro carga los datos de todas estas fuentes y cachea las colecciones en un único data store type-safe que puedes usar en tus páginas.

El content layer no solo te permite cargar tu contenido desde más lugares. También trae grandes mejoras al rendimiento de tu sitio actual. En Astro 5, tus content collections ahora compilan hasta 5x más rápido para páginas Markdown en sitios con mucho contenido y hasta 2x más rápido para MDX, mientras que el uso de memoria se reduce un 25-50%.

El content layer es un gran cambio en la forma en que se manejan las content collections, pero nuestra compatibilidad con versiones anteriores integrada significa que la mayoría de las personas no tendrán que hacer ningún cambio a su código existente. Consulta la guía de migración para obtener detalles completos.

Para empezar con colecciones usando el nuevo content layer, consulta la guía de content collections.

Server Islands

Las server islands son una evolución del concepto de islands architecture que Astro ayudó a llevar al mainstream. Las server islands extienden esta misma idea al servidor. Con las server islands, puedes combinar HTML estático de alto rendimiento y componentes dinámicos generados en el servidor en la misma página.

En cualquier página web podrías tener contenido que sea:

  • Completamente estático y nunca cambia.
  • Respaldado dinámicamente por una base de datos que cambia con poca frecuencia, pero más a menudo de lo que despliegas.
  • Contenido personalizado, adaptado a usuarios individuales.

Anteriormente, tenías que elegir una estrategia de caché para todos estos tipos de contenido, y si la página es una experiencia con inicio de sesión eso normalmente significa que no hay caché en absoluto. Ahora, con las server islands, obtienes lo mejor de ambos mundos.

Un diagrama mostrando las partes de la página pobladas por la isla desde el servidor.

Las server islands se usan para tu contenido más dinámico: contenido personalizado como el avatar de un usuario, su carrito de compra, y reseñas de productos. Cuando estos componentes se difieren, eres libre de cachear más agresivamente la propia página.

Esto significa que los usuarios, hayan iniciado sesión o no, verán las partes más críticas de la página instantáneamente, ya que se cachean en Edge CDNs. También puedes establecer contenido de fallback personalizado para mostrar brevemente antes de que las server islands dinámicas se carguen.

Cada island se carga independientemente para optimizar la experiencia del visitante. Esto significa que una island más lenta, como una conectada a un backend legacy, no retrasará que el resto del contenido personalizado se vea y se interactúe con él.

Las server islands han estado disponibles para prueba durante los últimos meses. Durante ese tiempo, hemos escuchado vuestro feedback y mejorado las server islands haciendo posible:

  • Establecer headers dentro de la island, permitiéndote personalizar el tiempo de vida de la caché de islands individuales.
  • Usar server islands en plataformas que realizan compresión automática de páginas.
  • Aumentar la privacidad cifrando automáticamente las props de las server islands usando una clave generada en el servidor.

Con Astro 5, estamos repensando lo que significa que un sitio sea “estático”. Las server islands proporcionan una primitiva fundamental para cómo construyes proyectos estáticos en Astro en el futuro, con partes dinámicas solo donde las necesitas.

Para saber más sobre las server islands, consulta la guía de server islands.

Prerendering simplificado

Desde el lanzamiento de Astro 1.0, hace más de 2 años, Astro ha soportado múltiples modos de salida para sitios web: Static, que compila el sitio web una vez en tiempo de compilación a los clásicos archivos .html estáticos, y Server, donde las páginas se renderizan en tiempo de ejecución, permitiéndote construir sitios web altamente dinámicos.

Después de muchas peticiones, en Astro 2.0 hicimos esto más granular creando un tercer modo de salida: Hybrid, que permite mezclar páginas estáticas y renderizadas en el servidor en el mismo sitio web.

A medida que Astro crecía y ganaba características potentes como actions o server islands, que no pueden usarse en un modo de salida puramente estático, nos dimos cuenta de que la matriz de "¿Qué ajustes necesito para usar esta característica?" se volvió grande y cansada de explicar y documentar. También descubrimos que la gente acababa renderizando en el servidor más de lo necesario porque era más fácil que usar los controles granulares, haciendo sus sitios más lentos de lo que necesitaban ser.

En Astro 5.0, estamos contentos de decir que hemos simplificado todo esto: las opciones hybrid y static se han fusionado en la opción por defecto static. Esto ahora te permite renderizar rutas individuales en tiempo de ejecución en el servidor simplemente añadiendo un adaptador, no se requiere ninguna otra configuración.

No temas, si aún quieres los clásicos archivos .html generados estáticamente, seguirás obteniéndolos: ¡Astro sigue siendo estático por defecto! Pero, si resulta que estableces una de tus páginas a prerender = false, Astro ahora cambiará dinámicamente su modo de salida, permitiéndote usar características que requieren server-side rendering sin tener que averiguar qué modo de configuración necesitas.

¿Quieres saber más sobre los nuevos modos de salida? Consulta nuestra documentación actualizada sobre renderizado bajo demanda.

astro:env

Configurar tu aplicación es una parte importante, pero complicada del proceso de desarrollo. Nuevo en Astro 5 es el módulo astro:env, que te da una forma type-safe de definir las variables de entorno que tu aplicación espera y necesita.

Usando astro:env puedes:

  • Configurar si tus variables se usarán en el client o server, para ayudar a segmentar diferentes usos.
  • Designate variables as secrets, such as API keys that you do not want to be exposed in the client nor inlined into the server build (which can be viewed by anyone with access to the build output).
  • Especificar si una variable es required o solo una mejora opcional, permitiéndote detectar errores antes de que el servidor esté completamente arrancado.
  • Definir el type de la variable, como string, number, boolean, o enum, evitando la necesidad de hacer cast en tu aplicación.

Construimos astro:env para proporcionar más control y estructura sobre las variables de entorno y para darte type-safety. Una vez que hayas definido tus variables puedes simplemente importarlas y usarlas en cualquier módulo.

import { STRIPE_API_KEY } from 'astro:env/server';

Para más información sobre cómo usar astro:env, consulta nuestra guía sobre variables de entorno type-safe.

Vite 6

Astro 5 es uno de los primeros frameworks en incluir Vite 6, lanzado hace apenas una semana. (No te preocupes: hemos estado trabajando con versiones beta por lo que probablemente no necesitarás cambiar ningún código al actualizar a Astro 5.)

Lo destacado de Vite 6 es una nueva Environment API, un refactor interno que permite crear nuevos entornos para alinear más estrechamente la experiencia de desarrollo con cómo se ejecuta tu código en producción. Los autores de integraciones pueden empezar a usar esta nueva API hoy; en el futuro, esperamos encontrar formas de usarla en el core, como proporcionar mejor compatibilidad de desarrollo para usuarios de Cloudflare o proporcionar Edge runtimes para probar localmente.

Para saber más sobre Vite 6, consulta su anuncio oficial de lanzamiento.

Características experimentales

Las siguientes son nuevas características experimentales que hemos estado cocinando durante los últimos meses. Están disponibles ahora para vista previa habilitando un flag experimental y se volverán estables en un futuro lanzamiento minor de Astro 5.x.

astro.config.mjs
import { defineConfig } from "astro/config";


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

Experimental: Soporte de recorte de imágenes

Astro ahora soporta el recorte de imágenes cuando se usa su servicio de imágenes Sharp por defecto para el procesamiento de imágenes.

Usando las nuevas props fit y position, ahora puedes crear imágenes que coinciden perfectamente con su contenedor, ahorrando bytes preciosos.

---
import logo from "../logo.png";
---


<Image src={logo} fit="cover" width={200} height={200} />

Para más información sobre esta característica, lee nuestra referencia sobre soporte experimental de imágenes responsive.

Experimental: Layouts de imágenes responsive

Las imágenes son difíciles: hay muchas densidades de pantalla, muchos tamaños de pantalla… muchas muchas cosas. Puede ser un desafío lograr que las imágenes se vean bien en todos los dispositivos, sin mencionar las obvias implicaciones de rendimiento de servir una imagen 4K a pantallas pequeñas.

La característica de imagen experimental más nueva de Astro soporta establecer layouts de imágenes responsive predefinidos. Estos generarán automáticamente los valores adecuados de srcset y sizes para que tus imágenes se vean bien y rindan bien en todos los dispositivos.

---
import { Image } from "astro:assets"
import rocket from "./rocket.jpg"
---


<Image src={rocket} width={800} height={600} layout="responsive" />

Para más información sobre esta característica, visita nuestra referencia sobre soporte experimental de imágenes responsive.

Experimental: Componente SVG

¿Alguna vez deseaste que fuera más fácil usar SVGs en Astro? ¡Nosotros también! ¿Y qué es más Astro que los componentes?

Con el flag SVG experimental de Astro 5, puedes importar archivos .svg y usarlos como cualquier otro componente de Astro. Puedes pasar props como width, height, fill, stroke, y cualquier otro atributo aceptado por el elemento nativo <svg> para que se apliquen automáticamente:

---
import Logo from '../assets/logo.svg'
---


<!-- Pass width and height to override default size -->
<Logo width={100} height={100} fill="blue" />

Para más información sobre los componentes SVG y cómo usarlos, visita nuestra referencia sobre componentes SVG.

Correcciones de bugs y más mejoras

Además de todas estas maravillosas características, este lanzamiento incluye muchas características menores y correcciones de bugs. Consulta las notas del lanzamiento para saber más.

Gracias a todos los contribuidores que ayudaron a hacer posible este lanzamiento:

¡Esperamos que disfrutes Astro 5.0! Si tienes alguna pregunta o feedback, no dudes en contactarnos en Bluesky, Twitter, Mastodon o Discord.