Astro v5.10リリース　コンテンツを動的に取得できるライブコンテンツコレクションが追加

コンテンツコレクションを動的に取得できるライブコンテンツコレクションや、レスポンシブ画像の対応などが含まれるAstro 5.10がリリースされました。

ライブコンテンツコレクションの実験的なサポート

Astro v5.10で実験的に追加されたライブコンテンツコレクションでは、ビルド時ではなく実行時にコンテンツをフェッチし、動的でリアルタイムなコンテンツを提供できるようになります。

Astroのこれまでのコンテンツコレクションはビルド時に構築されていたため、動的なコンテンツを扱いたい場合はコンテンツコレクションを利用できませんでした。

ビルド時に構築される従来のコンテンツコレクションは、頻繁に更新されないコンテンツや、短時間でビルドできる軽量なサイトに適しています。

一方で、頻繁にコンテンツが更新される場合や、ユーザーごとにコンテンツをパーソナライズしたい場合にはライブコンテンツコレクションが便利です。

ライブコンテンツコレクションは、実行時にデータを取得する新しいローダーを使用します。

既存のローダーはビルド時に実行されますが、ライブローダーはユーザーがページにアクセスした際に実行されます。

ビルド時に実行されるローダーの方がページの読み込み時のパフォーマンスは優れていますが、動的なコンテンツを扱いたい場合はライブローダーを利用できます。

（実は当サイトは最近、コンテンツの更新に時間がかかることを理由にAstroからNext.jsに移行したのですが、もう少し早くライブコンテンツコレクションがリリースされていれば…）

Astroでライブコンテンツコレクションを利用するには、設定を編集し、コンテンツコレクションを定義します。

1
export default defineConfig({
2
  experimental: {
3
    liveContentCollections: true,
4
  },
5
});

1
import { defineLiveCollection } from 'astro:content';
2
import { storeLoader } from './loaders/store';
3

4
export const products = defineLiveCollection({
5
  type: 'live',
6
  loader: storeLoader({
7
    apiKey: process.env.STORE_API_KEY,
8
    endpoint: 'https://api.mystore.com/v1',
9
  }),
10
});

ライブコンテンツコレクションのデータを取得するには、getLiveCollection()とgetLiveEntry()を使用します。

詳細な実装方法は、 Astroのドキュメント を参照してください。

レスポンシブ画像が安定版に

Astroの<Image>コンポーネントのlayoutプロパティを使用すると、生成される<img>要素にsrcsetとsizesが設定されます。

レスポンシブ画像の設定は、Astroの設定でグローバルに適用するか、画像ごとに適用できます。

グローバルに適用するには、astro.config.mjsでimage.layoutを指定します。

1
export default defineConfig({
2
  image: {
3
    responsiveStyles: true,
4
    layout: 'constrained',
5
  },
6
});

layoutプロパティには、constrained、fixed、full-widthのいずれかを指定できます。

<Image>コンポーネントのlayoutプロパティを指定すると、グローバルな設定を上書きできます。

1
<Image
2
  src="/hero.jpg"
3
  alt="A panoramic view of the mountains"
4
  layout="full-width"
5
/>

また、LCP（Largest Contentful Paint）要素に使用するためのpriorityプロパティも追加されており、このプロパティを指定するとloading="eager"、decoding="sync"、fetchpriority="high"が自動で設定されます。

1
<Image src="/hero.jpg" alt="Hero image" priority />

画像のトリミング方法とは一方法を制御できる、fitプロパティとpositionプロパティも追加されました。

1
<Image
2
  src="/profile.jpg"
3
  alt="Profile photo"
4
  fit="cover"
5
  position="center top"
6
  width={300}
7
  height={300}
8
/>

レスポンシブ画像機能を実験的な段階から利用していた場合は、experimental.responsiveImagesを削除し、image.responsiveStylesをtrueに設定します。

1
export default defineConfig({
2
  experimental: {
3
    responsiveImages: true,
4
  },
5
  image: {
6
    responsiveStyles: true,
7
  },
8
});

そのほかの機能

静的ページでCSPを設定できるようになったほか、Cloudflare Workersのエントリーポイントファイルをカスタマイズできるようになりました。

参考リンク

• Astro 5.10 | Astro

ろぼいん

XMisskeyGitHubQiita

生まれた時から、母国語よりも先にJavaScriptを使っていました。ネットの海のどこにもいなくてどこにでもいます。

Webフロントエンドプログラマーで、テクノロジーに関する話題を追いかけています。動画編集やプログラミングが趣味で、たまにデザインなどもやっています。主にTypeScriptを使用したWebフロントエンド開発を専門とし、便利で実用的なブラウザー拡張機能を作成しています。また、個人ブログを通じて、IT関連のニュースやハウツー、技術的なプログラミング情報を発信しています。