Resumen del año 2024 | Astro en Español

Introducción

Astro es un framework web bien adaptado para sitios orientados a contenido. Su Islands Architecture te permite combinar páginas estáticas con elementos dinámicos, logrando un equilibrio entre rendimiento e interactividad. Además, puedes aprovechar SSR, middleware y endpoints para construir aplicaciones que también se ejecutan del lado del servidor.

Las actualizaciones recientes han hecho especial énfasis en funcionalidades para construir sitios dinámicos, insinuando la evolución de Astro hacia un framework robusto y full-stack. Para una introducción más detallada a Astro, consulta la documentación oficial de ¿Por qué Astro?.

En este artículo, resumiré lo que considero los acontecimientos más significativos en el ecosistema de Astro en 2024. También mencionaré lo que podría venir en 2025, hasta donde tengo conocimiento.

Si te interesa, también he publicado una edición de 2023 (en japonés) de este artículo. Siéntete libre de echarle un vistazo para repasar el progreso de Astro en 2023.

Indicadores de salud del proyecto

Versiones de lanzamiento

A principios de 2024, Astro estaba en v4.0.8, y al momento de escribir este artículo cerca de fin de año, se ha lanzado v5.1.1. Incluyendo versiones beta, hubo un total de 169 lanzamientos en 2024. Eso está casi a la par con el número de lanzamientos en 2023, que fue 175.

En 2023, la versión principal saltó de 1 a 4, dando la impresión de un ritmo rápido de adición de funcionalidades y mejoras. En 2024, la versión principal solo pasó de 4 a 5, y el ritmo de versiones parece haberse relajado ligeramente.

Para quienes tengan curiosidad sobre los detalles de cada lanzamiento, pueden consultar la lista completa de lanzamientos de Astro en GitHub.

Estrellas de GitHub

Según GitHub Star History, las estrellas de GitHub de Astro estaban alrededor de 37,000 a principios de 2024 pero aumentaron a alrededor de 48,000 para fin de año. Aunque es un poco más lento que el aumento de 15,000 de 2023, sigue siendo un salto de más de 10,000 en el año. Es justo decir que el conteo de estrellas de Astro sigue en una tendencia ascendente saludable.

Descargas de NPM

Basado en npm trends, las descargas semanales de Astro fueron 185,902 a principios de 2024, subiendo a 364,201 hasta el 15 de diciembre. Eso es aproximadamente el doble, así que Astro claramente está creciendo a un ritmo constante aquí también.

State of JavaScript

En la categoría de Meta Frameworks de State of JavaScript 2024 publicado en diciembre, Astro ocupó el puesto #1 en:

Interés (la proporción de sentimiento positivo entre los encuestados que han escuchado sobre un elemento)
Retención (la proporción de sentimiento positivo entre los encuestados que han usado un elemento)
Positividad (la proporción de sentimiento positivo entre los encuestados que expresaron un sentimiento)

Además de eso, su Uso (la proporción de encuestados que han usado un elemento) subió del 4º al 2º puesto este año, solo por detrás de Next.js:

Un gráfico que compara el rango posicional anual de 9 frameworks (ej. Next.js, Gatsby, Remix, Nuxt) desde 2018 hasta el presente. (No todos los frameworks tienen datos para todos los años.) De 2023 a 2024, la mayoría de los otros frameworks se mantuvieron estables o cambiaron una posición, mientras que solo Astro mostró un salto significativo hacia arriba en su posición.

Astro también subió al 5º puesto en Conocimiento (la proporción de encuestados que han escuchado sobre o usado un elemento).

En general, cada métrica fue “una mejora respecto al año pasado” o “aún manteniendo el puesto #1”. Basado en la encuesta State of JavaScript, 2024 puede verse como un año clave de progreso para Astro.

Funcionalidades nuevas y actualizadas

Content Layer

Las Content Collections se introdujeron en Astro 2.0 como una forma de manejar de manera type-safe el contenido local escrito en Markdown, etc. En Astro 5.0, se añadió la nueva Content Layer API para expandir cómo se define el contenido, haciéndolo aún más flexible y potente para diversos casos de uso.

Anteriormente, las Content Collections de Astro solo podían manejar contenido como archivos Markdown o MDX ubicados localmente en el directorio reservado src/content:

- src/content/
  - blog/
    - post-1.md
    - post-2.md

Tu esquema de configuración de contenido podía entonces validar el frontmatter de cada archivo Markdown, proporcionar autocompletado en el editor al manejar datos de contenido obtenidos por la función getCollection, y demás.

Con la nueva Content Layer API introducida en v5.0, puedes mantener los beneficios de validación y autocompletado mientras extiendes las definiciones de tu contenido. Por ejemplo, ahora puedes “cargar” datos de APIs externas como una colección con la nueva propiedad loader:

import { defineCollection, z } from "astro:content";

const countries = defineCollection({
  loader: () => fetch("https://api.example.com/countries").then(res => res.json()),
  schema: z.object({ /* schema definition here */ }),
});

export const collections = { countries };

Bajo esta nueva Content Layer, type (que anteriormente proporcionabas a defineCollection) ahora se considera legacy, y el loader es donde especificas cómo deben cargarse los datos, haciendo posible manejar cualquier tipo de fuente de datos, no solo archivos locales.

En v5, obtienes dos loaders integrados para tu contenido local, glob() y file(), facilitando hacer cosas como:

const blog = defineCollection({
  loader: glob({ pattern: "**/*.md", base: "./src/data/blog" }),
  schema: z.object({ /* schema definition here */ }),
});

Esta colección de blog se comporta de manera similar al antiguo enfoque basado en archivos locales. Mientras tanto, como loader puede ser cualquier función, también puedes obtener datos de APIs externas o bases de datos, o incluso generar contenido al vuelo.

De esta manera, la nueva Content Layer generaliza cómo se maneja el contenido en Astro y también te permite definir y distribuir loaders de datos personalizados libremente, expandiendo significativamente las capacidades de Astro en torno al contenido. La Content Loader API para construir loaders personalizados también viene con funcionalidades útiles como el almacén key-value meta para almacenar metadatos sobre tu contenido y el campo rendered para almacenar la salida renderizada.

Con las Content Collections recién renovadas respaldadas por la Content Layer API, adelante y crea tu propio loader—¡si queda bien, publícalo como un paquete npm y compártelo con la comunidad de Astro en la categoría “Content Loaders” de la biblioteca de integraciones! Por ejemplo, Storyblok, Cloudinary e Hygraph ya han publicado sus propios loaders, así que puedes obtener datos de estos servicios sin tener que escribir tu propio loader desde cero.

Consulta la documentación oficial para saber más sobre Content Collections.

Astro Actions

Astro ya ofrecía endpoints para manejar peticiones HTTP del lado del servidor. Pero en v4.15, se introdujeron Astro Actions para hacer más fácil llamar a servicios del backend con menos boilerplate y de manera más type-safe. Algunos de los beneficios de Astro Actions incluyen:

Validación automática de entrada usando Zod
Generación automática de funciones type-safe que invocan tus actions
Manejo de errores estandarizado a través del tipo ActionError y la función isInputError

Aquí hay un ejemplo de cómo podrías definir una Action en src/actions/index.ts:

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

export const server = {
  // Define an action that takes a name and returns a greeting
  getGreeting: defineAction({
    // The schema for the input sent to this action
    input: z.object({
      name: z.string(),
    }),
    // The server-side handler for this action
    handler: async (input) => {
      return `Hello, ${input.name}!`; // input is validated and can be accessed type-safely
    }
  })
}

Ten en cuenta que no ves código para comprobar Content-Type, realizar validación de entrada, etc. Astro Actions manejan ese boilerplate para que puedas centrarte en la lógica de negocio principal.

Luego, del lado del cliente:

---
---

<button>Get greeting</button>

<script>
// Import the `actions` object that contains the `getGreeting` action
import { actions } from "astro:actions";

const button = document.querySelector("button");
button?.addEventListener("click", async () => {
  // Call the `getGreeting` action
  const { data, error } = await actions.getGreeting({ name: "Actions" });
  // Show the result in an alert if there's no error
  if (!error) alert(data);
})
</script>

Al importar actions desde astro:actions, obtienes una función para llamar a tu action getGreeting. Gracias al esquema que proporcionaste, puedes llamar a getGreeting de forma type-safe. Y por supuesto, puedes pasar el cursor sobre la action en tu editor para ver los tipos de entrada y retorno o hacer cmd+click para saltar a su definición.

Además, puedes usar la función isInputError para comprobar si error es un error de validación, o lanzar ActionError dentro de tu action handler para establecer códigos de estado HTTP específicos, etc.

Dado su nombre, Astro Actions están influenciadas por las Server Actions (Functions) de React. Ambas intentan resolver problemas similares, pero Astro Actions parece ir un paso más allá con validación lista para usar y manejo de errores estructurado. Puede que no necesites comunicación extensa del lado del servidor en un proyecto de Astro, pero puedes integrar Actions según lo necesites—por ejemplo, añadir una funcionalidad de Like en un artículo de blog.

Consulta la documentación oficial para saber más sobre Astro Actions.

Server Islands

Un nuevo enfoque de renderizado llamado Server Islands se ha introducido en Astro 5.0. La Islands Architecture de Astro siempre ha permitido la hidratación selectiva de ciertas porciones de una página, pero ahora Server Islands extiende ese concepto para permitirte renderizar partes de tu página en el servidor. Abajo está la imagen compartida en el anuncio inicial de Server Islands:

Un diagrama que muestra una página estática con componentes renderizados en el servidor incrustados en ella.

Como se muestra, puedes incrustar contenido renderizado en el servidor en una página estática. Las partes estáticas pueden ser cacheadas por un CDN, mientras que las partes renderizadas en el servidor se obtienen de forma diferida después de la carga inicial de la página, manteniendo una velocidad de carga inicial rápida mientras se aumenta la flexibilidad del contenido. Este enfoque logra un nivel de rendimiento que no era posible con el SSR tradicional.

Para habilitar Server Islands, simplemente añade la directiva server:defer a tus componentes de Astro. Por ejemplo, supón que tienes un componente que obtiene el avatar de un usuario del lado del servidor:

---
import { getUserAvatar } from "../sessions";
const userSession = Astro.cookies.get("session");
const avatarURL = await getUserAvatar(userSession);
---

<img alt="User avatar" src={avatarURL} />

En la página que usa este componente, solo añades la directiva server:defer:

---
import Avatar from "../components/Avatar.astro";
---

<!-- Other content here -->

<Avatar server:defer />

¡Y eso es todo! La página se genera estáticamente, mientras que el componente Avatar se renderiza en el servidor bajo demanda. Además, también puedes especificar contenido fallback para mostrar mientras la server island se está cargando, similar al Suspense de React:

---
import Avatar from "../components/Avatar.astro";
import GenericAvatar from "../components/GenericAvatar.astro";
---

<Avatar server:defer>
  <GenericAvatar slot="fallback" />
</Avatar>

Si te gustaría una explicación más profunda de cómo Server Islands difiere del Prerendering o Renderizado On-demand estándar de Astro, consulta mi artículo (en japonés). Compara los métodos de renderizado de Next.js y las Server Islands de Astro, dándote una comprensión más amplia de las técnicas de renderizado modernas.

Consulta la documentación oficial para saber más sobre Server Islands.

Astro DB

En marzo de 2024, Astro introdujo el paquete @astrojs/db para gestión de bases de datos. En el primer lanzamiento, se pretendía que los entornos de producción se conectaran a un servicio de base de datos gestionado llamado Astro Studio. Actualmente, puedes conectarte a cualquier servidor libSQL. Para más sobre Astro Studio, consulta Proyectos relacionados.

Para usar Astro DB, primero necesitas definir tu esquema de tabla en el archivo db/config.ts:

import { defineTable, column } from "astro:db";

const Author = defineTable({
  columns: {
    id: column.number({ primaryKey: true }),
    name: column.text(),
  }
});

const Comment = defineTable({
  columns: {
    authorId: column.number({ references: () => Author.columns.id }),
    body: column.text(),
  }
});

export default defineDb({
  tables: { Author, Comment },
});

Luego, en db/seed.ts, exporta una función que pueble tu base de datos:

import { db, Comment, Author } from "astro:db";

export default async function() {
  await db.insert(Author).values([
    { id: 1, name: "Kasim" },
    { id: 2, name: "Mina" },
  ]);

  await db.insert(Comment).values([
    { authorId: 1, body: "Hope you like Astro DB!" },
    { authorId: 2, body: "Enjoy!"},
  ])
}

Cuando inicias el servidor de desarrollo, la base de datos se crea y se pobla automáticamente.

Las consultas a la base de datos se hacen a través del cliente de Drizzle. El cliente db importado desde astro:db se configura automáticamente para conectarse a la base de datos correcta, así que puedes empezar a consultar de inmediato:

---
import { db, Comment } from "astro:db";

const comments = await db.select().from(Comment);
---

<h2>Comments</h2>

{
  comments.map(({ author, body }) => (
    <article>
      <p>Author: {author}</p>
      <p>{body}</p>
    </article>
  ))
}

Con Astro DB, puedes combinar la simplicidad de configuración de Astro con las potentes capacidades de consulta de Drizzle para gestionar bases de datos en tus proyectos de Astro. Aunque parece estar aún en etapas tempranas, Astro DB ya ofrece más que suficiente funcionalidad para características pequeñas que requieran una base de datos. ¡Definitivamente considera probarlo en tu próximo proyecto!

Consulta la documentación oficial para más detalles sobre Astro DB.

astro:env

Astro 5.0 introdujo astro:env, una nueva forma de manejar variables de entorno de manera type-safe. Con astro:env, puedes:

Especificar el contexto de uso (cliente o servidor) para aclarar cómo/dónde pueden usarse las variables
Marcar variables como secretos para que no se expongan a los clientes ni se incrusten en el build del servidor
Especificar si una variable es obligatoria u opcional, y verificar que las variables obligatorias estén configuradas al iniciar el servidor
Definir tipos de variables, eliminando la necesidad de conversiones de tipo manuales en tu aplicación

Defines tu esquema de variables de entorno en tu archivo de configuración de Astro:

import { defineConfig } from "astro/config";

export default defineConfig({
  env: {
    schema: {
      // ...
    }
  }
});

Luego usa el helper envField para definir los campos:

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

export default defineConfig({
  env: {
    schema: {
      API_URL: envField.string({ context: "client", access: "public", optional: true }),
      PORT: envField.number({ context: "server", access: "public", default: 4321 }),
      API_SECRET: envField.string({ context: "server", access: "secret" }),
    }
  }
});

Aquí usamos opciones como context, access y optional para especificar propiedades como el contexto en el que se puede acceder a la variable, si es un secreto y si es opcional. Los tipos de variable se declaran con funciones helper como envField.string o envField.number.

Luego puedes importar y usar estas variables desde astro:env/*:

---
import { API_URL } from "astro:env/client";
import { PORT } from "astro:env/server";
import { API_SECRET } from "astro:env/server";
---

Aunque parece una funcionalidad pequeña, las variables de entorno suelen ser una fuente de dolores de cabeza en el desarrollo de aplicaciones, así que tener un enfoque integrado y type-safe es bastante útil.

Consulta la documentación oficial para configurar variables de entorno type-safe.

Reescritura de peticiones

Astro 4.13 introdujo la Reescritura de peticiones, una funcionalidad que te permite servir una ruta diferente sin redirigir al cliente a una nueva página. Esto significa que la URL del navegador permanece igual, mientras el servidor redirige la petición a una ruta diferente detrás de escena, devolviendo el resultado como si fuera la respuesta a la petición original. Esta funcionalidad es particularmente útil para escenarios donde quieres mostrar el mismo contenido en múltiples rutas sin mantener diferentes archivos fuente.

Puedes usar reescrituras llamando a la función Astro.rewrite en tus componentes de Astro:

---
return Astro.rewrite("/login")
---

O en un archivo de middleware:

import type { APIContext } from "astro";

export function GET({ rewrite }: APIContext) {
  return rewrite("/login");
}

Para más detalles sobre la reescritura de peticiones, consulta la documentación oficial:

Container API

La Container API, que estaba en la Etapa 2 del Project Roadmap de Astro en 2023, ha sido implementada en Astro 4.9 como funcionalidad experimental. Esta funcionalidad te permite renderizar componentes de Astro de forma independiente al contexto de la aplicación, de manera similar a los varios métodos ofrecidos por react-dom/server en React. Si te interesa saber más sobre el contexto de la Container API, consulta mi artículo del año pasado para más detalles.

Para usar la Container API, primero necesitas crear un contenedor (el entorno en el que se renderizará el componente) y llamar a métodos como renderToString o renderToResponse:

---
import { experimental_AstroContainer } from "astro/container";
import Card from "../src/components/Card.astro";

const container = await experimental_AstroContainer.create();
const result = await container.renderToString(Card);
---

result contendrá el HTML renderizado del componente Card, que puedes usar para pruebas, como comprobar si contiene una cadena específica esperada. Para una referencia sobre cómo escribir pruebas con la Container API, consulta el proyecto de ejemplo oficial que demuestra cómo usar la Container API con Vitest.

Además de renderToString, también hay un método renderToResponse, y puedes pasar props o datos de slot mediante varias opciones. Para más detalles sobre la Container API, consulta la documentación oficial.

En Astro Together, hubo una demo de Matthew Phillips mostrando cómo usar la Container API para incrustar componentes de Astro (¡con islands!) en un proyecto PHP, lo cual fue bastante impresionante. ¡Asegúrate de verlo también!

Astro Studio

Astro Studio se lanzó como el primer servicio gestionado de Astro a principios de 2024, pero lamentablemente anunció su cierre en septiembre. El artículo explica que Astro Studio pretendía:

Proporcionar a todos los desarrolladores de Astro una solución de almacenamiento de datos SQL asequible y de alto rendimiento, fácil de usar e integrada perfectamente con Astro
Construir un modelo de negocio sostenible para apoyar el desarrollo continuo y el crecimiento de Astro

Lamentablemente, el segundo punto no tuvo tanto éxito como se esperaba, lo que llevó a la decisión de cerrar Astro Studio.

En cuanto al calendario de cierre, es el siguiente:

Las invitaciones a Astro Studio permanecerán cerradas.
Los usuarios existentes ya no podrán crear nuevas bases de datos después del 1 de octubre de 2024.
Las bases de datos existentes ya no serán accesibles después del 1 de marzo de 2025.
Cualquier base de datos restante será eliminada el 1 de marzo de 2025 o poco después.

Si estás usando Astro Studio, asegúrate de planificar tu migración a otro servicio de base de datos con anticipación.

Mientras tanto, Astro DB seguirá disponible para su uso en tus proyectos de Astro. En v4.15, Astro DB introdujo soporte para conectarse a cualquier servidor libSQL, así que puedes autoalojar un servidor libSQL o usar un servicio gestionado como Turso para seguir usando Astro DB.

Astro Storefront

Astro Storefront es un proyecto de sitio e-commerce que demuestra muchas de las funcionalidades más recientes de Astro mencionadas arriba, incluyendo Actions y astro:env. Representa el estado actual de las capacidades de Astro y es una excelente referencia para construir tus propios proyectos de Astro. El código fuente de Storefront está disponible públicamente en GitHub, y el mismo código se usa en producción para la Astro Swag Shop, donde puedes comprar mercancía de Astro.

Astro empezó como un generador de sitios estáticos, pero en los últimos años ha expandido activamente su funcionalidad del lado del servidor, siendo ahora capaz de construir sitios con contenido dinámico como sitios e-commerce sin sacrificar la UX. Astro Storefront ejemplifica esta tendencia, y en marzo de 2024, también se publicó una guía de e-commerce para ayudarte a construir tu propio sitio e-commerce con Astro.

El README del proyecto Astro Storefront cubre decisiones de diseño y más, así que combinado con el código en sí, es una excelente forma de aprender técnicas prácticas de desarrollo con Astro. ¡Si estás planeando un proyecto serio de Astro, definitivamente échale un vistazo!

Astro Ecosystem CI

Ecosystem CI es un mecanismo para preservar la calidad general de un ecosistema de software. Se originó en la comunidad de Vite, liderado principalmente por dominikg:

El ecosistema de Vite es enorme, con nuevas bibliotecas y herramientas apareciendo constantemente. El lado negativo es que cualquier cambio disruptivo inesperado en Vite puede tener un efecto dominó masivo. Ecosystem CI ayuda a minimizar ese riesgo verificando continuamente los paquetes principales del ecosistema cada vez que Vite cambia, asegurando que las cosas no se rompan inesperadamente—o si lo hacen, que se puedan arreglar rápidamente en colaboración con los mantenedores de los paquetes.

Ecosystem CI se ha extendido más allá de Vite a otros proyectos como:

Vue: vuejs/ecosystem-ci
Svelte: sveltejs/svelte-ecosystem-ci
Nuxt: nuxt/ecosystem-ci
Nx: nrwl/nx-ecosystem-ci
Vitest: vitest-dev/vitest-ecosystem-ci
Rspack: rspack-contrib/rspack-ecosystem-ci, rspack-contrib/rsbuild-ecosystem-ci
Biome: biomejs/ecosystem-ci
Oxc: oxc-project/oxlint-ecosystem-ci

Y ahora Astro se ha unido a esta tendencia con su propia implementación de Ecosystem CI, disponible en withastro/astro-ecosystem-ci.

Puedes ver los resultados de las comprobaciones de CI en https://github.com/withastro/astro-ecosystem-ci/actions. Cada workflow tiene jobs para paquetes del ecosistema (ej. Starlight) y prueban el build, ejecución, etc., para asegurar compatibilidad con el paquete withastro/astro.

Ecosystem CI está más o menos dirigido a desarrolladores de paquetes, así que si simplemente estás usando Astro, no es algo de lo que debas preocuparte. Dicho esto, si un paquete del ecosistema se rompe de repente, Ecosystem CI podría ofrecer información útil sobre lo que está pasando. Incluso si no estás directamente involucrado en el desarrollo open-source, entender el concepto de Ecosystem CI puede ayudarte a mantener la estabilidad entre paquetes desarrollados internamente, como los usados en los sistemas de tu empresa.

Starlight

Starlight es un tema de documentación lanzado en 2023, que ya ha pasado su primer aniversario. Su versión a principios de 2024 era v0.15.2, y ahora está en v0.30.3, reflejando el ritmo constante de actualizaciones. Por ejemplo, v0.21.0 introdujo el componente <FileTree> para mostrar árboles de directorios y el componente <Steps> para mostrar secuencias de pasos, y v0.27.0 añadió soporte para renderizado del lado del servidor.

La adopción de Starlight se disparó el año pasado con proyectos conocidos como Biome y Knip, y continúa viendo más uso en 2024. Algunos ejemplos incluyen:

Documentación de Cloudflare
jscodeshift (un toolkit de codemods de Meta)
Style Dictionary (un sistema de build de design tokens de Amazon)
vlt /vōlt/ (un nuevo gestor de paquetes de isaacs, etc.)

La interfaz de Starlight tiene soporte multilingüe, haciéndola ideal para sitios de documentación en cualquier idioma. Si necesitas construir un sitio de documentación, definitivamente considera Starlight como candidato.

Clack y Bombshell

En junio de 2024, Nate Moore, cocreador de Astro, anunció que dejaría el equipo principal:

Después de 3 años increíbles con Astro, ¡estoy listo para mi próximo reto! Construir @astrodotbuild desde cero con este equipo ha sido una de las experiencias más gratificantes de mi vida. 🙏

Empresas de devtools—¿tienen una CLI que necesita algo de amor? ¡Hablemos, DMs abiertos! Me encantaría ayudar.
— Nate Moore (@n_moore) June 4, 2024

Mencionó que ahora se centraría en Clack, un framework para construir herramientas CLI interactivas. Luego en octubre, reveló Bombshell que alojará sus proyectos en adelante, incluyendo Clack:

— bombshell (@bombshell_dev) October 24, 2024

Clack proporciona componentes CLI como entradas de texto, multi-selecciones, spinners y más, permitiéndote construir fácilmente apps CLI interactivas. Puedes ver una demo en https://www.clack.cc/ para hacerte una idea de sus capacidades:

La documentación aún está en desarrollo, pero Clack ya es usado por proyectos destacados, incluyendo:

Descubre más sobre Bombshell y Clack en el sitio web de Bombshell, y únete a su servidor de Discord si te gustaría involucrarte.

Otros temas

Astro Together

El 28 de mayo de 2024, el primer meetup presencial de Astro, Astro Together, se celebró en Montreal, Canadá. Hay un artículo de blog con un resumen y fotos del evento.

Las charlas del evento están disponibles en una lista de reproducción en YouTube. El orden es: Fred K. Schott sobre el estado actual y futuro de Astro, Ben Holmes demostrando Astro Actions, Matthew Phillips explicando qué cambió en Astro 4.10, y Sarah Rainsberger hablando sobre docs, Starlight y la comunidad de Astro.

Reproducir
Reproducir
Reproducir
Reproducir
Reproducir
Reproducir

También se publicaron varios artículos de blog en torno a este evento:

Bluesky

Astro ahora tiene su propia cuenta de Bluesky. Bluesky proporciona una funcionalidad llamada Starter Packs, que agrupa múltiples cuentas relacionadas bajo un mismo tema para que puedas seguirlos a todos a la vez. Astro tiene su Starter Pack oficial, facilitando seguir a la gente relacionada con Astro. ¡Siéntete libre de echarle un vistazo!

Netlify como socio oficial de despliegue

Netlify se ha convertido en el socio oficial de despliegue de Astro. Esto significa que Netlify ahora contribuye con $12,500 al mes para apoyar el desarrollo de Astro. Al momento del anuncio, también se mencionó que Netlify estaba ayudando con el desarrollo de Server Islands. Netlify es una opción popular para desplegar proyectos de Astro, así que es genial verles apoyar el desarrollo de Astro.

Netlify también usa Astro para su sitio de plataforma para desarrolladores, que es otro gran ejemplo de Astro en acción.

Google IDX como socio oficial de editor en línea

Google IDX es ahora el socio oficial de editor en línea de Astro.

Project IDX (Google IDX) es un entorno de desarrollo en línea similar a StackBlitz. Como lo proporciona Google, puede integrarse con Gemini y Google Cloud. David East, que lidera el DevRel de este proyecto, tiene vínculos con Astro que se remontan a sus días en Firebase, incluyendo un proyecto del año pasado para reconstruir el blog de Firebase con Astro.

A través de esta colaboración, Google IDX está patrocinando $10,000 cada mes para apoyar el desarrollo de Astro.

Biome v1.6.0

Biome—un formateador y linter para JavaScript, JSON, CSS y más—añadió soporte parcial para Astro en su versión v1.6. v1.6 también introdujo soporte parcial para Vue y Svelte. Para Astro, de momento solo se soporta la parte del script dentro de los code fences (---). Consulta la página de soporte de lenguajes de Biome para más detalles.

Astro Storefront también usa Biome, así que puedes verlo como un ejemplo real.

Clerk Astro SDK

Clerk, una plataforma y biblioteca de componentes para autenticación de usuarios, publicó un SDK para Astro en julio de 2024.

Aún no lo he usado, pero según el anuncio, proporciona componentes de Astro para inicio de sesión, más una función clerkMiddleware para comprobaciones de autenticación en middleware, y más. Lucia es otra biblioteca de autenticación conocida utilizable con Astro, pero Clerk es más una solución end-to-end. Tener múltiples opciones de autenticación es bueno para el ecosistema.

Consulta la documentación del SDK de Clerk para Astro si te interesa añadir autenticación y autorización a tu proyecto de Astro.

TutorialKit

TutorialKit es una herramienta para crear tutoriales desarrollada por StackBlitz que usa Astro por debajo, aprovechando la WebContainer API. Te permite crear tutoriales completamente interactivos que se ejecutan enteramente en el navegador. Echa un vistazo a la demo de TutorialKit para ver qué puede hacer.

Puedes saber más sobre TutorialKit en su documentación oficial. Es una excelente herramienta para crear tutoriales, así que si estás planeando escribir uno, ¡definitivamente pruébalo!

IKEA, Porsche

Astro es ahora usado por muchos sitios web, incluyendo nombres importantes como IKEA y Porsche:

El sitio de IKEA hace un uso efectivo de View Transitions, haciendo que la navegación sea bastante divertida. Mientras tanto, el sitio de Porsche ejecuta Vue sobre Astro, haciendo buen uso de Islands Architecture.

Estos son solo dos de muchos ejemplos, y estoy seguro de que hay muchos más sitios fantásticos de Astro que no conozco. Si conoces otros sitios notables de Astro, ¡compártelos con la comunidad de Astro añadiéndolos a Companies & Websites Using Astro!

Mirando hacia 2025

Astro tiene un Project Roadmap público donde se discuten los planes de desarrollo futuro. El roadmap hace seguimiento de las propuestas en cuatro etapas:

Así que si quieres ver lo que viene en Astro, revisa lo que está en las etapas 2 y 3.

Puedes ver las propuestas específicas en el proyecto “Public Roadmap”. Al momento de escribir, las siguientes cinco propuestas están en la Etapa 3:

Echemos un vistazo a algunas de estas propuestas a continuación.

Sesiones

Las sesiones son un mecanismo para almacenar temporalmente datos específicos del usuario, como el estado de inicio de sesión o los carritos de compra. Hasta ahora, tenías que manejar cookies o almacenamiento local directamente. La nueva propuesta te permitiría manejar sesiones de forma nativa en Astro. Los datos se almacenan del lado del servidor, y solo el ID de sesión se envía al cliente como cookie, lo que debería ayudar con la seguridad.

Las sesiones ya se han introducido experimentalmente en Astro 5.1. Para trabajar con sesiones, usarás los métodos get y set del objeto Astro.session. Las sesiones están disponibles en muchos contextos, incluyendo páginas, componentes, endpoints, actions o middleware. Aquí hay un ejemplo del artículo que demuestra cómo recuperar y actualizar datos del carrito en una sesión:

---
export const prerender = false;
const cart = await Astro.session.get("cart");
---

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

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;
    },
  }),
};

Como las sesiones siguen siendo experimentales, debes especificar explícitamente dónde almacenar esos datos usando la configuración driver. Por ejemplo, así se especifica el driver del sistema de archivos al desplegar en un entorno Node.js:

{
  adapter: node({ mode: "standalone" }),
  experimental: {
    session: {
      driver: "fs",
    },
  },
}

Qué driver está disponible depende de tu entorno de producción. Por ejemplo, también puedes usar drivers para Cloudflare KV o Redis. Consulta la documentación de unstorage (que Astro Sessions usa internamente) para una lista completa de drivers.

Cuando las sesiones salgan del estado experimental, el plan es que los propios adaptadores elijan el driver correcto automáticamente, así que no necesitarás configurar esto manualmente en el futuro. Si encuentras algún problema o tienes sugerencias de mejora después de probarlo, asegúrate de compartir tu feedback en el PR de la propuesta.

Imágenes responsivas

Aunque las imágenes son un factor crucial para la experiencia del usuario y por tanto indispensables en el desarrollo web, manejarlas puede ser bastante desafiante. Los desarrolladores tienen que considerar cosas como tamaño de pantalla, resolución y formatos de imagen, etc. para asegurar que las imágenes se muestren correctamente en varios dispositivos. El componente existente <Image> ofrece una gama de opciones para lidiar con estas complejidades, pero aún requiere una buena cantidad de esfuerzo por parte del desarrollador.

Esta propuesta pretende introducir una propiedad layout que automatizaría la generación de srcset y sizes, permitiendo a los desarrolladores seguir fácilmente las mejores prácticas de imágenes.

Ya está disponible como funcionalidad experimental en Astro 5.0, y puedes consultar la documentación experimental de imágenes responsivas para más detalles.

Fuentes

Las fuentes son fundamentales para el diseño web, pero Astro actualmente no proporciona un enfoque integrado para manejarlas. La guía oficial de fuentes puede ayudarte a empezar, pero aún deja muchas decisiones como dónde alojar las fuentes, cómo cargarlas, etc., al desarrollador. Esta propuesta pretende incorporar las mejores prácticas de fuentes en Astro, facilitando el trabajo con fuentes en tus proyectos.

Los detalles de implementación aún se están discutiendo, pero puedes encontrar el RFC de Astro Fonts con ejemplos de cómo podría ser la configuración.

Reflexiones finales

Con esto concluyo mi visión personal de las nuevas funcionalidades y eventos que tuvieron lugar en el ecosistema de Astro este año. En 2024, vimos más mejoras enfocadas en aplicaciones, como Actions y Server Islands, aunque no es claro si esta dirección continuará. Las próximas funcionalidades experimentales en torno a imágenes, fuentes e iconos pueden indicar un mayor compromiso con la experiencia del desarrollador en tareas esenciales pero a menudo difíciles para gestionar sitios orientados a contenido. Estoy deseando ver qué se les ocurre a continuación.

Espero que este artículo te haya inspirado a explorar nuevas funcionalidades de Astro y a experimentar con lo que es posible. ¡Muchas gracias por leer hasta aquí!