Next.jsのOn-demand Revalidationの簡単な説明

公式のドキュメントを含め全体的にわかりづらい記事が多かったので、なるべくわかりやすく簡単に解説を書こうと思います。

On-demand Revalidation 　とは

getStaticProps を使用した際に api の call によって revalidate を行えるようになったよ、ということです。

ISR について

ISR とは

Vercel のサーバーに static な page を生成して、クライアント側に渡す手法です。

ISR のメリット

getServerSideProps を使用した場合、ページへのアクセス時にサーバー側で api 周りの処理が発生するため、描画に少し時間がかかってしまします。

対して、getStaticProps を使用した ISR であればサーバー側で api 周りの処理が発生しないため、描画がかなり早くなります。

またクライアント側で api の call を行わずに済むため、画面の描画が早いものの、結局ローディングが表示されてしまう、みたいなことも避けられます。

ISR のデメリット

たとえばブログ記事に対して ISR を行った後に記事の修正を行った場合、static な page を再生成する必要があります。

On-demand でない Revalidation だと

ある一定の時間が経過した後に static な page を破棄して再生成を行う、といった手段によって更新が行われていました。

また revalidation を行わないケースであれば、クライアント側で再度 api の call を行うといった感じでした。

この場合は revalidation が発生しないため、古い static な page がサーバーに残り続けてしまい、あまり効率的ではありませんでした。

実装方法

/api 以下の適当な api handler において、以下の関数を呼び出したら OK です。

export default async function handler(req, res) {
  ...
  await res.unstable_revalidate('/hoge')
  ...
}

unstable_revalidate の引数に対応する page において revalidate が走るみたいです。

めっちゃ簡単ですね。

ということで On-demand Revalidation の解説でした。

まだよくわかってないこともあるので、もう少ししっかり調べてみないとですね。