Content Layer Astro

Автор
Fred Schott

Это часть 2 нашей серии о «Будущем Astro», охватывающей три крупных улучшения, запланированных для веб-фреймворка Astro в 2024 году. Этот пост представляет более мощный Content Layer в Astro: новый способ работы с локальными и удалёнными источниками контента.

В Astro 2.0 мы выпустили оригинальный Content Collections API. Content Collections были спроектированы на основе нашего опыта и разочарований при масштабировании крупных Markdown-проектов в современных веб-фреймворках, включая Astro того времени. Наша цель — сделать работу с локальным контентом (Markdown, MDX и т.д.) в Astro проще, чем в любом другом веб-фреймворке.

Content Collections принесли в Astro встроенные возможности управления контентом: схемы контента, валидацию frontmatter и полностью TypeScript-совместимый query API:

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

Контент — важнейший примитив в Astro. Но создавать контентные сайты на Astro должно быть легко, независимо от того, где живёт контент. Мы уже решили это для локального Markdown — а что насчёт крупных проектов, где контент вне репозитория? В удалённом API? В любимой CMS?

Мы начинаем исследовать новый, более мощный Content Layer API для Astro. Новый Content Layer будет строиться на существующей функциональности Content Collections, чтобы работа с контентом в Astro стала проще, чем когда-либо. Давайте разберём, как это работает.

Более мощный движок контента

Одно из текущих ограничений Content Collections — данные хранятся полностью в памяти. Для статических сайтов это работает, но загрузка всех данных в память может разрушить cold-start в serverless SSR-окружениях.

Сейчас мы исследуем LibSQL (SQLite) как новый механизм хранения контента в Astro. Встраивая SQLite в Astro, мы могли бы масштабироваться до миллионов записей в проекте без напряжения. Плюс файловое хранение SQLite резко ускорило бы и разработку, и сборку, позволяя кэшировать контент между сборками.

Для разработчиков прямой доступ к SQL-базе также дал бы более мощный query API для тех, кому он нужен. Мы специально спроектировали getCollection и getEntry как намеренно простые API, и они никуда не денутся. Однако фильтрация и сортировка всегда оставались на пользователе. Внутренняя SQL-база помогла бы преодолеть этот разрыв и предложить более продвинутые встроенные запросы.

Более гибкий источник контента

Выход контента за пределы текущего каталога src/content требует переосмысления определения коллекций в Astro. Вместо жёстко заданного filesystem loader, встроенного в Astro сегодня, мы исследуем новый, более гибкий data loader для 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)
  },
})

С новым API вы можете:

  • Читать файлы из файловой системы (как сегодня)
  • Предоставлять простой массив захардкоженных inline-данных
  • Загружать данные из удалённого API через fetch()
  • Загружать контент из внешней CMS вроде Storyblok

Это также обеспечит композируемость в более широкой экосистеме Astro. Любой может опубликовать loader в npm. Как разработчик Astro, вы сможете использовать экосистему сообщества с подключаемыми и переиспользуемыми content loaders.

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


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

Мы будем исследовать эту историю подключаемой экосистемы параллельно с новым Content Layer API. Мы рады дать пользователям Astro то, что откроет совершенно новые возможности для композируемого контента без ущерба для простоты встроенной поддержки Markdown, которую вы знаете и любите.

Следующие шаги

Следите за экспериментальной поддержкой в Astro позже в этом году. Мы часто запускаем новые функции за экспериментальными флагами до стабилизации — это даёт сообществу время попробовать новые API и оставить обратную связь.

Чтобы узнать больше о предложении Content Layer и оставить раннюю обратную связь, посетите текущее обсуждение в нашем открытом roadmap. Мы будем публиковать обновления там и в нашем Discord по мере начала официальной реализации.