この記事は、ラクスパートナーズ AdventCalendar 2025の15日目の記事です。
（個人で25日連続投稿にチャレンジ中のカレンダーになります）
今回は、フロントエンドエンジニアとして働いているとよく聞く、
- SSR
- SSG
- ISR
の3点についてまとめていきたいと思います。
（Next.jsについても勉強中なので、Next.jsにも絡めた説明にしていきたいと思います）
SSRとは
Server Side Rendering（サーバーサイドレンダリング）の略です。文字通り、サーバー側でレンダリング（HTMLの生成）を行う仕組みのことを言います。
具体的には、
- ページ遷移時にサーバー側へリクエストを送る
- リクエストに合わせてデータベースのデータを反映したHTMLファイルをサーバー側で生成する
- 生成したHTMLファイルをブラウザ側にそのまま返す
という処理の流れになっています。
メリット
- サーバー側でHTMLファイルを生成するため、ページの表示速度が速くなる
- 上記の理由からSEOに強い
デメリット
- リクエストのたびにサーバー側でHTMLファイルを生成するため、ユーザーを待たせる時間が長くなる場合もある
SSGとは
Static Site Generation（静的サイトジェネレーション）の略です。
データベースからデータを取得し、データが反映されたHTMLファイルをビルド時に生成しておく仕組みのことを言います。
ビルド時にしかデータを取得しないので、HTMLファイルの内容は次のビルド時までずっと変わりません。
Next.jsの場合は、このSSGを自動で行います。
メリット
- ページの初期表示速度がSSRよりも高速(ビルド時に渡されたHTMLファイルを表示するだけのため)
- 上記の理由からSEOに強い
- 表示内容が頻繁に変わらない、静的なページの表示に適している（例：企業のホームページ）
デメリット
- SSG単体では、頻繁に表示内容が変わるサイトには適さないとされている（後述のISRを併用する場合は話が別）
ISRとは
Incremental Static Regenerationの略です。
一言で言うと、
「リクエストを受けてから一定時間ごとに最新のデータでHTMLの再生成を行う」
という仕組みです。
これだけではわかりづらいと思うので、順を追って説明します。
- 事前にHTMLの再生成にかかる時間を5秒に設定する
- あるタイミングでデータが更新される
- データ更新後、ユーザーAからリクエストを受け取るとキャッシュしていた（データがまだ古い）HTMLファイルを返す
- ユーザーAのリクエストから5秒経過するまでの間に、データベースから最新のデータを取得してHTMファイルの再生成を行う（このHTML生成中の5秒間にリクエストを受け取った場合、キャッシュしていたHTMLファイルを返す）
- ユーザーBのリクエストを受け取ると、先ほど再生成したHTMLファイルを返す
このように、データ更新後にリクエストを受け取ったタイミングで、最新のデータを元にHTMLファイルを再生成するのがISRです。
メリット
- SSGと組み合わせることで、表示速度の速さとデータのリアルタイム性をある程度両立できる
デメリット
- 常に最新のデータがユーザーに表示されるわけではない（HTML生成中はキャッシュしていたHTMLを返すため）
3つの使い分け
プロジェクトにもよると思いますが、
- リアルタイム性重視ならSSR
- ページの表示速度重視ならSSG＋ISR
というイメージだと思います。
また、Next.jsではSSR、SSG、ISRをページごとに適用することもできるため、要件によって柔軟に使い分けていくことが大事だと思います。
以上となります。
「3つとも何となく概念は知っているけど、いざ言語化するとなるとふわっとした説明しかできないなぁ」
と思ったことがきっかけでまとめてみました。
やはり普段から言語化することは大事ですね。
ここまで読んでいただきありがとうございました。
参考
参考にさせていただいた記事です。
ありがとうございました🙇♂️