【Astro】コミュニティ製の便利かもしれないツール紹介（Astro Open Graph, @studiocms/cfetch）

Astro 公式ブログではコミュニティ製の便利なツールが紹介されています。

https://astro.build/blog/whats-new-april-2025/#tips--tools

その中から Astro Open Graph（morinokami/astro-og）と @studiocms/cfetch を紹介します。

Astro Open Graph

https://github.com/morinokami/astro-og

Astro の Dev toolbar で Open Graph の見た目を確認できるようにする integration です。
インストールは

npx astro add astro-og

で、インストール中に尋ねられることには全部 Yes で応答すると完了です。

追加後に dev モードで起動すると、Dev toolbar に追加されています。

起動すると下記のように幾つかの SNS での見た目を表示できます。

これだけですが、ローカル環境で確認できるのは便利です。

気になった点

View transitions を有効にしている環境だと画面遷移後に動かなくなるようです。
これは Astro Open Graph に限った話ではなく、Dev toolbar に元から入っている Audit も同じなので、おそらく Dev toolbar 自体の問題ではないかと思われます。
Astro Open Graph が起動しない場合は画面を一度読み込み直すと動くようになります。

@studiocms/cfetch

https://github.com/withstudiocms/cfetch

キャッシュ可能な fetch を追加する integration です。
SSR 専用です。（SSG の場合はビルド時に一度だけ fetch するので本 integration を入れても意味がない。）
インストールは

npx astro add @studiocms/cfetch

で、インストール中に尋ねられることには全部 Yes で応答すると完了です。

試してみます。キャッシュされていることをわかりやすくするために、アクセス時の時刻を返すエンドポイントを作りました。

src/pages/api/test.ts

import type { APIRoute } from "astro";

export const GET: APIRoute = () => {
  return new Response(
    JSON.stringify({
      message: new Date().toISOString(),
    }),
  );
};

そして下記のように cFetch 使用時と普通の fetch の結果を並べて表示してみました。
キャッシュ保存時間は最小設定の 1 分としています。

src/pages.index.astro

---
export const prerender = false;
import { cFetch } from "c:fetch";

const cFetchResponse = await cFetch(
  "http://localhost:4321/api/test/",
  { method: "GET" },
  { lifetime: "1m" },
  "json",
);
const cFetchData = await cFetchResponse.json();

const fetchResponse = await fetch("http://localhost:4321/api/test/", {
  method: "GET",
});
const fetchData = await fetchResponse.json();
---

<span>{JSON.stringify(cFetchData)}</span>
<hr />
<span>{JSON.stringify(fetchData)}</span>

dev モードで起動した結果、確かに cFetch 側は 1 分間は以前の結果を返し続け、普通の fetch は画面を読み込み直すたびに新しい結果を返していました。

気になった点

一体どこでキャッシュデータを管理しているのかが気になりました。
最初はディスク上を探してみたのですが、Next.js の fetch のキャッシュみたいに物理的なファイルとして存在しているわけではなさそうでした。

最終的にソースコードを読んだ結果、どうやら in memory のキャッシュみたいです。

https://github.com/withstudiocms/cfetch/blob/2cab3a3f36e200d733c56f8a29caf4e940155bcb/packages/cfetch/src/wrappers.ts#L31

キャッシュの保存先を変更するような機能は現状なさそうなので、環境によっては意図したとおりに動かせないかもしれません。

以上、便利かもしれないツールの紹介でした。