💬
Next.jsでmicroCMS APIのデータが更新されない
初めてNext.js環境でmicroCMSを使ったのですが、microCMSでデータを更新してもサイトの方に反映されなかったので、備忘録として残します。
(APIを更新して、実際の表示を確認しながら開発したかったので...)
Next.jsとmicroCMSの接続方法は公式で分かりやすいチュートリアルがあるので省略します。
対処法
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