microcmsio/microcms-js-sdk

APIのキャッシュ？がクリア出来ない

Closed this issue · 4 comments

underground0930 commented

事象

  • microcmsで記事を更新、vercelにデプロイしたが、新記事が反映されず。
  • SSGでAPIから取得してきたデータが古いことがconsoleで確認された。
  • vercelの管理画面で古い旨を確認。
  • とりあえず、limitを3→6にして、再度push デブロイで更新されました。

要望

  • APIのキャッシュ？をクリア出来るオプションはありますか？常に最新のデータを取ってくるなど。

コード

// libs
import { microcmsClient } from '@/libs/microcmsClient'

// type
import { MicroCMSResponse, WorkIndex } from '@/types/microcms'

export async function fetchTopList() {

  const works: WorkIndex[] = await microcmsClient
    .get<MicroCMSResponse<WorkIndex[]>>({
      endpoint: 'works',
      queries: {
        limit: 3,
        fields: 'id,title,slug,date,publishedAt2,category,technology,slider',
      },
    })
    .then((result) => result.contents)
    .catch(() => [])

  console.log(works) // ここでデータが古いことを確認
  return {
    works,
  }
}
dc7290 commented

@underground0930

使用しているフレームワークはNext.jsのver.13でしょうか？？
appディレクトリを使用している場合は、以下の要素が関係していそうです。
https://beta.nextjs.org/docs/data-fetching/caching

revalidateを使わないケースでは無期限にキャッシュされるため再デプロイするまでキャッシュが効いていた可能性があります。

underground0930 commented

@dc7290

ご回答ありがとうございます。

使用しているフレームワークはNext.jsのver.13でしょうか？？

はい、おっしゃる通りです。Next.js13 + appDir の環境でした。

"next": "^13.3.0",

最近、nextのマイナーアップデートを行ったのですが、そこから更新されなくなりました
ローカルでは数回リロードで更新されるのですが、vercel環境では、全く更新されませんでした。
(revalidateを設定してみたのですが、何故かエラーが発生してしまい、まだ不安定なのかもしれません)

完全に、next + vercel 側の設定の問題のようでした。
お手数おかけしました。

microcms-js-sdkにありがたいことに、
customFetchのオプションがあったので、
そちらで、１分ごとにキャッシュクリア用のパラメータを更新するようにした所
SSGでデータが反映されるようになりました。

しかも、相当強力なキャッシュらしく
パラメータを元に戻すと、データもパラメータをつける前に戻ります。。

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)
  },
})

ありがとうございました。

dc7290 commented

ありがとうございます！

その方法ですと、CMSを使っているページにrevalidate = 60 をつける方がいいかもしれないです！
ややハック的と言いますか、Next.jsのReactServerComponentsの仕様によっては機能しなくなる可能性も考えられます。

見落としていましたが、SSGをしたいということなのでCMSのデータ更新によるWebサイトの更新はmicroCMSのwebhook経由での再デプロイをするのはどうでしょうか？
https://blog.microcms.io/webhook-cloudflare-vercel/

もしデプロイまでに時間がかかるのが気になるようでしたら、先ほどの revalidate = 60 をおすすめします！

underground0930 commented

@dc7290

色々アドバイスありがとうございます！！

ややハック的と言いますか、
もしデプロイまでに時間がかかるのが気になるようでしたら、先ほどの revalidate = 60 をおすすめします！

ですよね。。
今は、暫定的に更新させちゃってますが、
やはり公式に則った方法に修正しようと思います。

見落としていましたが、SSGをしたいということなのでCMSのデータ更新によるWebサイトの更新はmicroCMSのwebhook>経由での再デプロイをするのはどうでしょうか？
https://blog.microcms.io/webhook-cloudflare-vercel/

ありがとうございますー！
こちらも試してみます。

  • 👍1