🚀

Astro新時代! 再ビルド不要のLive Content Collections

2025/06/13に公開

はじめに

これから説明するのは、astro@5.10.0以降にて提供される予定の機能です。
2025-06-14時点では、astroのセルフビルドが必要になることに注意してください。

公式のRFCやPRで、この機能に関するディスカッションやフィードバックを受け付けているので、気になった方はぜひ
Live Content collections RFC
Add docs for experimental live collections

実際の動作例を見たい場合は、以下のYoutube配信のアーカイブから

Live Content Collectionsとは？

これまでAstroのコンテンツCollectionsは、Markdownやjsonをもとにビルド時に静的なHTMLを生成するのが基本で、これはAstroの代名詞でもあるパフォーマンスに優れる一方、頻繁に更新されるデータを扱うには、都度々々サイトを再ビルドする必要があった。

しかし、Live Content Collectionsは、この常識を根底から覆すことができる。

実行タイミング: ビルド時ではなく、リクエスト時に
データソース: ローカルファイルだけでなく、外部のCMS、API、データベースなども対象に
目的: 常にリアルタイムの情報(在庫、価格、ユーザーデータなど)をサイトに反映可能に

どう使い分けるべきか?

Live Collections

リアルタイム情報: ユーザー固有のデータ、現在の在庫レベル、気象情報など。
頻繁なデータ更新: 数分おきに変わる商品価格やニュース速報など、再ビルドが追いつかないコンテンツ。
動的なフィルタリング: ユーザーの操作に応じて、APIへのクエリを動的に変更したい場合。
CMSのプレビュー機能: 編集者が下書きコンテンツを保存後、即座にプレビューで確認したい場合。

従来(ビルド時)

パフォーマンス最優先: ビルド時にレンダリングすることで、最速の表示速度を実現したい場合。
静的なコンテンツ: ブログ記事、ドキュメント、製品の基本情報など、頻繁には変更されないデータ。
ビルド時の最適化: MDXの処理や画像の最適化を行いたい場合。

基本的な使い方

1. 機能を有効化

まず、astro.config.mjsでexperimentalフラグを有効化。

astro.config.mjs

export default {
  experimental: {
    liveContentCollections: true,
  },
}

2. Live Collectionsを定義

次に、src/live.config.tsをsrc/content.config.tsとは別に作成し、defineLiveCollectionでどのLoaderを使うかを定義。

src/live.config.ts

import { defineLiveCollection } from 'astro:content';
// 例として、自社のECストアから商品データを取得するLoaderを使用
import { storeLoader } from '@mystore/astro-loader'; 

// 'products' Live Collectionsを定義
const products = defineLiveCollection({
  type: 'live', // `live`を指定
  loader: storeLoader({
    apiKey: process.env.STORE_API_KEY,
    endpoint: 'https://api.mystore.com/v1',
  }),
});

export const collections = { products };

3. ページでデータを取得・表示

あとは、Astroコンポーネント内で専用のgetLiveCollection()やgetLiveEntry()関数を使ってデータを取得するだけ。

src/pages/products/[id].astro

---
import { getLiveCollection, getLiveEntry } from 'astro:content';

// 単一の商品データをIDで取得
const { entry: product, error } = await getLiveEntry('products', Astro.params.id);

if (error) {
  return Astro.redirect('/404');
}

const { entries: electronics } = await getLiveCollection('products', { category: 'electronics' });　// フィルタも可能
---

<h1>{product.data.name}</h1>
<p>価格: {product.data.price}円</p>
<p>在庫: {product.data.stock > 0 ? 'あり' : 'なし'}</p>

Live Loaderを作ってみる

Live Collectionsの心臓部となるのがLive Loaderで、これは実際に外部と通信してデータを取得する責務を担う。
従来のContent Loaderと同じく、コミュニティが作ったLoaderを使うこともできるし、自分で作ることも可。

loadCollection(): 複数のエントリを取得
loadEntry(): 単一のエントリを取得

src/lib/my-cms-loader.ts

import type { LiveLoader } from 'astro/loaders';
import { fetchFromCMS } from './cms-client';

interface Article {
  id: string;
  title: string;
  content: string;
  htmlContent: string; // レンダリング用のHTML
}

export function articleLoader(config: { apiKey: string }): LiveLoader<Article> {
  return {
    name: 'article-loader',

    // 複数記事を取得
    loadCollection: async ({ filter }) => {
      try {
        const articles = await fetchFromCMS({ ... });
        return {
          entries: articles.map((article) => ({
            id: article.id,
            data: article,
          })),
        };
      } catch (e) {
        return { error: new Error(${e.message}) };
      }
    },

    // 単一記事を取得
    loadEntry: async ({ filter }) => {
      try {
        const article = await fetchFromCMS({ id: filter.id, ... });
        if (!article) {
          // エントリが見つからない場合はnullやundefinedを返すと、
          // Astroが自動でNotFoundErrorを返す
          return null; 
        }
        return {
          id: article.id,
          data: article,
          // `rendered`プロパティを返すことで<Content />が使用可能
          rendered: {
            html: article.htmlContent,
          },
        };
      } catch (e) {
        return { error: new Error(${e.message}) };
      }
    },
  };
}

`<Content />`でコンテンツをレンダリング

LoaderのloadEntryがrenderedプロパティを返すことで、取得したコンテンツを<Content />でレンダリング。

src/pages/articles/[id].astro

---
import { getLiveEntry, render } from 'astro:content';

const { entry, error } = await getLiveEntry('articles', Astro.params.id);
if (error) {
  return Astro.redirect('/404');
}

// render()でContentコンポーネントを準備
const { Content } = await render(entry);
---

<article>
  <h1>{entry.data.title}</h1>
  <hr />
  <Content />
</article>

そのほか

Zodによるスキーマ定義

従来のCollectionsと同様に、zodを使ってデータのバリデーションや変換が可能。
これもsrc/live.config.tsでschemaを定義。