はじめに
ECサイトを運営していると、「ページの表示が遅い」という指摘と「商品情報が古いまま」という指摘の間で板挟みになることがあります。表示を速くしようと情報を固定すれば更新が遅れ、常に最新を見せようとすれば表示が重くなる。どちらかを立てるとどちらかが犠牲になる関係です。
この記事では、その両立を可能にするNext.js（ネクストジェイエス。Webサイトを作るための土台になる仕組み）の機能「ISR」を、技術者ではない方にも分かるように解説します。読み終わる頃には、ISRが何をしてくれるのか、自分のサイトに向いているのかを判断できるようになるはずです。
ISRとは何か
ひとことで言うと「作り置き＋自動更新」
ISR（Incremental Static Regeneration）は、Next.jsが提供する機能です。日本語では「増分静的再生成」と訳されますが、この訳語を覚える必要はありません。イメージは「ページをあらかじめ作り置きしておき、時間が経ったら自動で作り直す仕組み」。ユーザーには完成品のページを即座に返しながら、裏側では決めた間隔で中身を新しくしていきます。表示の速さと情報の新しさを、1つの仕組みで同時に満たせるのが特長です。
「キャッシュ」という言葉だけ覚えておく
この仕組みの話には「キャッシュ」という言葉が繰り返し出てきます。キャッシュとは、作り置きしたページの置き場所、くらいの理解で十分です。ISRの世界では「キャッシュを返す＝作り置きを渡す」「キャッシュを無効化する＝古い作り置きを捨てる」という意味で使われます。この1語さえ押さえておけば、ISRの解説はぐっと読みやすくなります。逆に言うと、ISRの設計とは「キャッシュをいつまで有効にして、いつ捨てるか」を決めることそのものなんですよね。
なぜECサイトで必要になるのか
ECサイトの商品ページは、在庫や価格が日々変わる一方で、アクセスのたびにゼロから作り直すほどの即時性までは求められません。それでいて商品数は数百〜数千ページに及ぶことも多く、1ページごとの表示速度がユーザーの離脱率や売上に直結します。「そこそこ更新されるページを、大量に、速く届けたい」。ECサイトのこの条件が、ISRの得意分野とちょうど重なるんですよね。
従来の方式との違い
Webページをユーザーに届ける方式は大きく3つあります。順番に見ていくと、ISRの立ち位置が分かりやすくなります。
SSG — 全ページを事前に作り置きする方式
SSG（Static Site Generation）は、サイトの公開前にすべてのページを完成品として作っておく方式です。表示は非常に速いのですが、商品情報を1つ変えるだけでもサイト全体を作り直す必要があります。商品数の多いECサイトではこの作り直しに数十分かかることもあり、更新のたびに待たされるのが難点です。
SSR — アクセスのたびにその場で作る方式
SSR（Server Side Rendering）は、ユーザーがページを開くたびに、サーバーがその場でページを組み立てて返す方式です。常に最新の情報を表示できる反面、毎回組み立ての処理が走るため、表示までに待ち時間が生じます。アクセスが集中すると、サーバーの負担もそのぶん大きくなります。
ISR — 作り置きしつつ、決めた間隔で自動更新する方式
ISRは、この2つの良いところを組み合わせた方式です。ページは作り置きしておき、あらかじめ決めた間隔（revalidateと呼ばれる設定）で自動的に作り直します。ユーザーには作り置きした速いページを返しながら、裏側で新しい情報に入れ替えていく。SSGの速さとSSRの新しさを、両方とも手放さずに済む方式です。
常に最新の情報を返せるが、アクセスのたびに組み立て処理が走り、表示に待ち時間が出る
作り置きしたページを即座に返しつつ、裏側で定期的に作り直す。速さと新しさを両立できる
図を一言でまとめると、「毎回その場で作るのをやめて、作り置きを配りながら裏で更新する」のがISRです。
ISRが向いている場面・向かない場面
向いているのは「そこそこの頻度で更新されるページ」
ISRが効果を発揮するのは、次のようなページです。
- ECサイトの商品ページ: 在庫や価格は更新されるが、秒単位の即時性までは不要
- ブログやお知らせ: 新しい記事は随時増えるが、公開後の変更は少ない
- 企業サイト: 情報は定期的に更新されるが、リアルタイム性は不要
共通しているのは、「更新はあるけれど、1秒を争うわけではない」という性質。世の中のWebページのかなりの部分がここに当てはまります。
向かないのは「常に最新でないと困るページ」
逆に、チャットのやりとりや株価の表示のように、リアルタイムであることが前提の情報には向いていません。作り置きという性質上、どうしても数秒〜数分のずれが生じるためです。実際のECサイトでも、商品ページはISR、カートの中身やログイン後の情報はリアルタイム取得、というように性質に応じて方式を使い分けるのが一般的です。
まとめ
ISRは「高速表示」と「データの鮮度」を両立させる、Next.jsの仕組みです。作り置きの速さを保ったまま、決めた間隔で自動的に中身を新しくできるため、ECサイトのように更新のある大量のページを速く届けたい場面によく合います。
具体的にどれくらい効果があるのか、そして裏側でどう動いているのかは、続きの2記事で解説しています。