Next.js 13 + appDir + vercel + microcms-js-sdk でAPIのデータが更新されない時の対処法

環境

node 18.15.0
next 13.3.0
appDir使用

事象

• microcmsの更新がページに反映されなかった
• SSGのページが更新されず（一覧ページ）
• SSRのページは更新されていた（詳細ページ）
• API直で叩くと更新されている
• ローカルでは更新されていた
• ビルドはうまくいっている
• logをコードに仕込んでvercelの管理画面からAPIデータを確認した所、APIのデータが古いままのようだ
• revalidateを短く設定してみたが、うまくいかず（何故かエラーになる）

https://beta.nextjs.org/docs/data-fetching/caching

• 恐らく、vercel側でエグいキャッシュが効いている可能性がある。

対処

リクエストURLにキャッシュクリア用のパラメータをつけて強制的に更新させる。
microcms-js-sdkでどうやって、URLをいじるんだ、とgithub見てみたら、
customFetchというオプションを見つけたので、
ここで１分ごとに値が変わるキャッシュクリア用のパラメータをリクエストURLにつける

https://github.com/microcmsio/microcms-js-sdk/blob/main/src/createClient.ts#L57

https://github.com/microcmsio/microcms-js-sdk/blob/main/src/lib/fetch.ts

// microcmsClient.ts

import 'server-only'
import { createClient } from 'microcms-js-sdk'

export const microcmsClient = createClient({
  serviceDomain: 'xxxxxx',
  apiKey: process.env.MICROCMS_API_KEY ?? '',
  customFetch: (input, init) => {
    if (typeof input === 'string') {
      const newInput = new URL(input)
      const time = new Date()
      newInput.searchParams.set('cacheclearparam', `${time.getMinutes()}`)
      return fetch(newInput.href, init)
    }
    return fetch(input, init)
  },
})

これで、無事更新されました。

余談

• 正直、最近のnext.jsは高機能過ぎて、機能を扱うのが結構大変になってきた。
• ちなみに、URLのパラメータを戻すと戻した時のキャッシュが残ってるようで、データも戻ります。