Lanzamiento de la Beta de Astro 5.0

Por
Erika

¡La primera beta de Astro 5.0 ya está disponible! Este lanzamiento incluye el ahora estable Astro Content Layer, nuestra última iteración en la gestión de contenido en proyectos de Astro, y server islands, una nueva forma de mezclar contenido estático y personalizado en tu sitio para lo mejor de ambos mundos.

Sigue leyendo para saber más sobre las nuevas características y mejoras en la beta de Astro 5.0!

Este lanzamiento incluye los siguientes aspectos destacados:

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, especificando el tag beta.

# Recommended:
npx @astrojs/upgrade beta


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

Para iniciar un nuevo proyecto usando la beta 5.0, ejecuta el comando create astro para tu gestor de paquetes:

npm create astro@latest -- --ref next

Consulta la Guía de Actualización en la documentación de la v5.0 beta para obtener detalles completos y guía de actualización individual para cada cambio de este lanzamiento.

Estable: Content Layer

Astro 5.0 introduce el Astro Content Layer, una nueva forma de gestionar contenido en tu proyecto de Astro. El content layer es una forma flexible y extensible de interactuar con contenido, proporcionando una API unificada y type-safe para acceder y definir tu contenido en tu proyecto de Astro—sin importar de dónde provenga—gracias a los potentes loaders.

A medida que tu sitio web crece, tener tu contenido en archivos Markdown acogedores en un repositorio Git puede volverse cada vez menos práctico. Podrías querer usar un CMS. Quizás algunas secciones de tu sitio web estén potenciadas por una REST API en algún lugar, o tengas 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 una variedad de APIs y estrategias de obtención de datos diferentes.

El content layer está potenciado por loaders, que son funciones conectables que obtienen y transforman datos de cualquier fuente a un formato unificado y type-safe que puedes usar en tu proyecto de Astro de modo que accedes a tus datos desde cualquier lugar con total confianza en su forma y tipo.

src/content/config.ts
import { defineCollection } from "astro:content";
import { notionLoader } from "notion-astro-loader";


const database = defineCollection({
  // Automatically fetch content from Notion in one line
  // using the 'notion-astro-loader' npm package!
  loader: notionLoader({ /* ... */ })
  // optionally, define a schema for the content or let the loader infer it
  // schema: z.object({ /* ... */ })
});


export const collections = {
  database,
}

Esto solo está rascando la superficie de las posibilidades que el content layer desbloquea para tu proyecto. Estate atento esta semana para más información sobre esta característica, y consulta nuestra guía sobre las nuevas content collections en la documentación de la v5.0 beta para aprender cómo empezar.

Estable: Server Islands

Las server islands son una nueva primitiva que llega a Astro 5 permitiéndote diferir el renderizado de contenido dinámico hasta después de la carga inicial de la página. Esto te permite servir páginas estáticas con contenido personalizado inyectado más tarde, proporcionando lo mejor de ambos mundos: páginas estáticas rápidas cacheadas en CDN, con contenido personalizado y dinámico.

Las server islands se construyen sobre la islands architecture existente en Astro. Definir una server island es tan simple como definir una client island, pero usando la directiva server:defer en su lugar:

<UserButton server:defer />

Esto le dice a Astro que omita el renderizado de este componente en la respuesta inicial y “difiera” su renderizado para más tarde. Esto te permite cachear la página estática detrás de un CDN con algún contenido placeholder inicial. Cuando el HTML dinámico se ha cargado, un pequeño script inline reemplaza la server island en la página con el resultado HTML del renderizado diferido.

Esta característica es notablemente útil para sitios web orientados a contenido que mezclan contenido dinámico y estático en la página. Por ejemplo, para un sitio de e-commerce, podrías diferir el renderizado de las recomendaciones de productos hasta después de la carga inicial de la página, proporcionando un tiempo de carga inicial más rápido mientras se sigue entregando contenido personalizado.

Para más detalles sobre el uso de esta característica, visita la documentación de server islands en la documentación de la 5.0 beta.

Modos de salida static y hybrid fusionados

En Astro 5, ahora es más fácil que nunca crear un sitio web con páginas estáticas, cacheadas y performantes y páginas dinámicas renderizadas bajo demanda. El nuevo modo output: 'static' de Astro, el valor por defecto, 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.

Esto es idéntico a nuestro anterior modo hybrid: por defecto, cada página se genera estáticamente hasta que optas por no prerenderizar:

---
export const prerender = false; // Render at request time
---

Si la mayoría de tus páginas deben renderizarse bajo demanda, puedes seguir estableciendo output: 'server' en tu configuración de Astro para usar server rendering por defecto:

import { defineConfig } from 'astro/config';


export default defineConfig({
  output: 'server'
});

Una vez que estés listo para desplegar tu sitio a producción, Astro generará automáticamente la salida adecuada para cada página basándose en la constante prerender y la configuración output. Un adaptador sigue siendo necesario para servir las páginas renderizadas bajo demanda, tanto en modo static como server, que puedes añadir a tu proyecto usando astro add, como antes.

Para más información sobre prerendering y server-side rendering en Astro, consulta nuestra documentación sobre modos de renderizado en la documentación de la 5.0 beta.

Estable: astro:env

¡Las variables de entorno son difíciles hoy en día! A medida que tu proyecto crece, es fácil perder el rastro de qué variables son obligatorias, cuáles son opcionales, y/o cuáles son sensibles. Astro 5.0 introduce una nueva forma de gestionar variables de entorno con astro:env, un módulo integrado que proporciona una forma type-safe de definir y acceder a variables de entorno.

Primero define tus variables de entorno en tu configuración de Astro, usando una sintaxis de schema familiar:

import { defineConfig, envField } from "astro/config"


export default defineConfig({
  env: {
    schema: {
      CLIENT_API_URL: envField.string({ context: "client", access: "public" }),
      SERVER_API_URL: envField.string({ context: "server", access: "public" }),
      API_SECRET: envField.string({ context: "server", access: "secret" }),
    }
  }
})

Luego, accede a tus variables de entorno en tu proyecto de Astro usando el módulo astro:env:

---
import { SERVER_API_URL, API_SECRET, PORT } from "astro:env/server";


const data = await fetch(`${SERVER_API_URL}/api`, {
  headers: {
    Authorization: `Bearer ${API_SECRET}`
  }
})
---


<script>
  import { CLIENT_API_URL } from "astro:env/client";
  const clientData = await fetch(CLIENT_API_URL);
</script>

Para más información sobre el manejo de variables de entorno en Astro, consulta nuestra guía sobre variables de entorno type-safe en la documentación de la 5.0 beta.

¡Y más!

Estos son solo algunos de los cambios en esta beta de Astro 5.0. Consulta las notas del lanzamiento completas y visita el sitio de documentación de la 5.0 beta para saber más.

Gracias a todos los que contribuyeron a este lanzamiento, ¡y no podemos esperar a ver qué construís con la beta de Astro 5.0!