💬

Next.jsでmicroCMS APIのデータが更新されない

2024/07/20に公開

初めてNext.js環境でmicroCMSを使ったのですが、microCMSでデータを更新してもサイトの方に反映されなかったので、備忘録として残します。
(APIを更新して、実際の表示を確認しながら開発したかったので...)

Next.jsとmicroCMSの接続方法は公式で分かりやすいチュートリアルがあるので省略します。
https://document.microcms.io/tutorial/next/next-app-router-getting-started

対処法

APIを直接叩くとデータは反映されていたので、案の定キャッシュが残っていました。
getする際に、customRequestInitというプロパティがあるので cache: "no-store"を指定してあげると、キャッシュが残らずリアルタイムに更新できるようになりました。

api.ts
import { createClient } from "microcms-js-sdk";

export const client = createClient({
  serviceDomain: process.env.NEXT_PUBLIC_SERVICE_DOMAIN,
  apiKey: process.env.NEXT_PUBLIC_API_KEY,
});

export async function getBlogList() {
  const data = await client.get({
    customRequestInit: {
      cache: "no-store",
    },
    endpoint: "blogs",
  });
  return data;
}

開発中はこの方が都合が良いのですが、実際に運用していく上でデータが頻繁に変わらない場合は、ビルド前に変更する必要があると思います。

Discussion