ISRincremental static regeneration
🐈 WHAT IS ISR?
Incremental Static RegenerationはSSGの拡張版です。
SSGで問題だったデータのリアルタイム性の低さと再ビルドにかかる時間と手間を解決した手法になります。
初めにNext.jsビルド時に静的ファイルを生成し、訪れるユーザーにはそのページを表示します。
そのタイミングで同時にサーバー側で再度APIを叩き、最新のデータを取得し、それを反映させた静的ファイルを再生成します。
差分のみのビルドとなるため短時間で完了し、かつ、運営者側の負担も少ないのが特徴です。
※本デモの操作について
もともと表示していたページがキャッシュされるため、スーパーリロードをするとページが再生成されていることが分かるかと思います。
再生成の頻度(revalidate)は30秒に設定しています。一度再生成してから30秒以上空けないと再生成されません。
🌊 DATA FLOW
- Next.jsが静的ファイルをビルドする
- このタイミングでサーバーは予めAPIを叩いて全情報を取得する
- 全ページ分の静的ページを生成する
- ユーザーがリクエストを送信する
- すでに生成されているページが表示され、同時にサーバー側で現在のデータを取得し、対象のページを再ビルドする
- 次に訪れたユーザーには新しい情報が表示され、再度同時にサーバー側で現在のデータを取得する
👍 GOOD
- 生成済みのHTMLを取得するのでSEOに問題がない
- 遷移が早い
- アクセス時に自動的に変更を検知して再ビルドが走るので、だいたい最新のデータが表示される
👎 BAD
- 厳密には表示されるデータがリアルタイムのものではない
- 更新の頻度を上げるとサーバーに負荷がかかる