El Content Layer de Astro

Esta es la Parte 2 de nuestra serie sobre "El Futuro de Astro", cubriendo tres grandes avances que tenemos planeados para el framework web Astro en 2024. Esta publicación introduce un Content Layer más potente para Astro: una nueva forma de trabajar con tus fuentes de contenido locales y remotas.

En Astro 2.0, lanzamos la API de Content Collections original. Content Collections fue diseñada en base a nuestras propias experiencias y frustraciones al intentar escalar proyectos grandes de Markdown en frameworks web modernos, incluyendo Astro en ese momento. Nuestro objetivo era hacer que trabajar con contenido local (Markdown, MDX, etc.) en Astro fuera más fácil que en cualquier otro framework web.

Content Collections trajo características integradas de gestión de contenido a Astro como esquemas de contenido, validación de frontmatter y una API de consulta completamente habilitada para TypeScript:

import { getCollection, getEntry } from 'astro:content';

// Get all entries from a collection.
// Requires the name of the collection as an argument.
// Example: retrieve `src/content/blog/**`
const allBlogPosts = await getCollection('blog');

// Get a single entry from a collection via the request URL.
// Requires the name of the collection and an entry ID slug.
// Example: retrieve `src/content/blog/future-of-astro-content-layer.mdx`
const blogPostEntry = await getEntry('blog', Astro.params.slug);

El contenido es una primitiva esencial en Astro. Pero construir sitios web impulsados por contenido con Astro debería ser fácil sin importar dónde viva tu contenido. Ya resolvimos esto para Markdown local, ahora ¿qué hay de los proyectos más grandes donde el contenido vive fuera de tu repo? ¿En una API remota? ¿En tu CMS favorito?

Estamos comenzando a explorar una nueva API de Content Layer más potente para Astro. El nuevo Content Layer se construirá sobre nuestra funcionalidad existente de Content Collections para que trabajar con tu contenido en Astro sea más fácil que nunca. Vamos a profundizar en cómo funciona.

Un Motor de Contenido Más Potente

Una de las limitaciones actuales de Content Collections es que nuestra estructura de datos actual se almacena completamente en memoria. Esto funciona suficientemente bien para sitios estáticos, pero cargar todos esos datos en memoria puede causar estragos en los tiempos de inicio en frío en entornos serverless de SSR.

Actualmente estamos explorando LibSQL (SQLite) como un nuevo mecanismo de almacenamiento subyacente para el contenido en Astro. Al integrar SQLite dentro de Astro, podríamos escalar hasta millones de entradas de contenido en un proyecto sin esfuerzo. Además, el almacenamiento de archivos de SQLite aceleraría drásticamente tanto el rendimiento de desarrollo como el de build al permitirnos cachear el contenido entre builds.

Para los desarrolladores, el acceso directo a una base de datos SQL también introduciría una API de consulta más potente para quienes la necesiten. Diseñamos específicamente nuestras propias APIs getCollection y getEntry para ser intencionalmente simples, y estas APIs no van a desaparecer. Sin embargo, esto siempre ha dejado la responsabilidad de filtrar y ordenar al usuario. Una base de datos SQL interna nos ayudaría a cerrar esa brecha y ofrecer consultas integradas más avanzadas a cualquiera que las necesite.

Una Fuente de Contenido Más Flexible

Sacar el contenido del directorio actual src/content requiere repensar cómo definimos las colecciones en Astro. En lugar de un cargador de sistema de archivos codificado de forma rígida como el que está integrado en Astro hoy, estamos explorando un nuevo cargador de datos más flexible para la API defineCollection().

defineCollection({
  name: 'my-portfolio',
  data: (db: DB, watcher: FileSystemWatcher) => {
    // 1. fetch your data
    // 2. insert it into the database
    // 3. optional: handle content updates during development
    //    (a file change, CMS websocket notification)
  },
})

Con esta nueva API, puedes:

• Leer archivos del sistema de archivos (como ya hacemos hoy)
• Proporcionar un simple array de datos codificados directamente, en línea
• Cargar datos desde una API remota usando fetch()
• Cargar contenido desde un CMS externo como Storyblok

Esto también habilitará la composabilidad en el ecosistema más amplio de desarrolladores de Astro. Cualquiera puede publicar un cargador en npm. Como desarrollador de Astro, eso significa que podrás aprovechar un ecosistema comunitario lleno de cargadores de contenido conectables y reutilizables.

// Example: An (imagined) Instagram profile loader for Astro
import instagram from 'some-instagram-astro-content-loader';

defineCollection({
  name: 'my-portfolio',
  data: instagram({ /* ... */ }),
})

Estaremos explorando esta historia de ecosistema conectable en paralelo con la nueva API de Content Layer. Estamos emocionados de dar a los usuarios de Astro algo que desbloqueará oportunidades completamente nuevas para contenido componible sin sacrificar la facilidad de nuestro soporte integrado de Markdown actual que conoces y amas.

Próximos Pasos

Estate atento al soporte experimental que llegará a Astro más tarde este año. A menudo lanzamos nuevas características detrás de flags experimentales antes de que sean estables, lo que le da a nuestra comunidad de desarrolladores mucho tiempo para probar nuevas APIs y dejar comentarios.

Para aprender más sobre la propuesta de Content Layer y dejar comentarios tempranos, puedes visitar la discusión en curso en nuestro repositorio de roadmap abierto. Continuaremos publicando actualizaciones allí y en nuestro Discord a medida que comencemos a trabajar en la implementación oficial.