On-Demand ISR に対応させてみる。

Next.jsのv12.1でオンデマンドISRが追加されました。これは、revalidate関数を使用することで、ページごとに手動で再検証できるようになる機能です。

Next.jsの公式ブログにある通り、ISRのデメリットは、revalidateで設定した時間を経過しなければ再検証が行われない点でした。

https://nextjs.org/docs/basic-features/data-fetching/incremental-static-regeneration#on-demand-revalidation

ですが、Next.jsのv12.1で追加されたオンデマンドISRを使用すれば上記の問題を解消できます。今回は、microCMSというツールを使って、CMS内で更新されたコンテンツがISRによる再検証を待たずに、オンデマンドISRによって再検証できるようにできるか試してみます。

大まかな手順

参考

https://nextjs.org/blog/next-12-1

Next.js 側

ページを再検証する関数の作成

unstable_revalidate()の引数にオンデマンドISRを使用するpathを渡します。

今回は("/projects")を渡します。

• 条件分入れる
• ローカルで環境変数入れる
• 検証：ローカルに対してPostマンする
  • リクエストヘッダーに
    • 何も指定しないでPOSTリクエスト
      • Unauthorized
    • x-microcms-signature入れてvalue適当でPOSTリクエスト
      • Unauthorized
    • x-microcms-signature入れて正しいvalueでPOSTリクエスト
      • 200
• 本番で試す
• vercelで環境設定する
• 検証：本番に対してPostマンする
  • リクエストヘッダーに
    • 何も指定しないでPOSTリクエスト
      • Unauthorized
    • x-microcms-signature入れてvalue適当でPOSTリクエスト
      • Unauthorized
    • x-microcms-signature入れて正しいvalueでPOSTリクエスト
      • 200
        • もし、UnauthorizedならVercelに対して再度Biluldすればいいかも。（おそらく環境変数が反映されていない？）

microCMS の設定