ISR(Incremental Static Regeneration)とは？
ユーザーアクセスを起点として動的に静的コンテンツを更新してくれます。
「Stale while revalidation」と言うコンセプトがベースになっています。Staleは「古い」と言う意味になります。
ISRの仕組み
動的なコンテンツを含むページも静的なページとしてCDNキャッシュすることが可能になります。リクエスト時にページのキャッシュを作成して次のアクセスでキャッシュされた古いデータを返します。
注意点
キャッシュしたHTMLをファイルシステムに書き込む仕様になっています。なので、Lambdaはファイルシステムの書き込みへは未対応ですし、Frgateはキャッシュが分散してしまいCDNにキャッシュを乗せるのが難しいのでこの機能を楽に使おうと思ったらデプロイ先はVercel一択になります。
ISRの前提
ある程度ユーザーからアクセスがあるサイトであることが前提条件になっています。なぜならサイトデータの更新がユーザーアクセスが起点となっているので、アクセスがなさすぎると古すぎるデータが表示される可能性がある(例えば、1年ぶりのアクセスなら1年前の情報。（最初の1回のアクセスは必ず古い情報が表示されて更新されないため。）普通はそんな古い情報は見せたくないと思います。)ためです。それなりのアクセスがあることがISR導入の前提となっています。
revalidate
Next.jsにおけるHTML再生成のインターバルの時間です。例えば、5秒などと設定した場合は5秒ごとにHTMLが再生成されることになります。
例えば、ユーザーAがサイトにアクセスした際に、DBが新しい情報になっていた場合は再生成が行われますが、5秒の間はいろんなユーザーから何度アクセスがあろうが再生成が行われません。そうすることによってサーバー負荷を低減させることができます。
実装方法
実装は非常に簡単です。そんなに覚えることもないです。
getStaticPropsの戻り値の第二引数にrevalidateでインターバルの時間を指定します。
|
1 2 3 4 5 6 7 8 |
export async function getStaticProps() { const staticfilterdTasks = await getAllTasksData(); return { props: { staticfilterdTasks }, revalidate: 3, }; } |
getStaticProps
これ単体だと長期間キャッシュされる静的ページを出力するという意味になります。（SSG）
revalidateを組み合わせることでその静的ページをキャッシュするという挙動になります。
この記事へのコメントはありません。