SSR / SSG / ISR

一言でいうと

Webページを「いつ HTML を作るか」で分類した3種類のレンダリング方式のこと。

詳しい意味

SSR / SSG / ISR は、Webページの HTML を「いつ・どこで作るか」で分類するレンダリング方式です。 - **SSR（Server-Side Rendering）**: リクエストが来た時にサーバー側で都度 HTML を生成する。最新データを必ず反映でき、SEO に強い。応答時間とサーバー負荷がデメリット。 - **SSG（Static Site Generation）**: ビルド時に全ページの HTML を作って静的ファイルとして配信する。表示が爆速・コストが安い。データ更新時に再ビルドが必要。 - **ISR（Incremental Static Regeneration）**: SSG をベースに、特定のページだけ一定間隔で裏側で再生成する Next.js の中間方式。SSG の速さと SSR の鮮度を両取りする発想。 Next.js などの現代フレームワークは、ページ単位で方式を選べるのが特徴。「商品一覧 = ISR、ランディング = SSG、ユーザー個別画面 = SSR」と使い分けるのが定番です。

何に使うか

ECサイトやメディアでSEOを最重視するとき → SSR / SSG。ブログやドキュメントサイト → SSG。商品在庫など準リアルタイム更新が必要 → ISR。

どんな時に出るか

「このページはSSRでいこう」「ISRのrevalidate間隔は10分」「SSGで配信コスト削減」といった場面で登場します。

具体例

• ランディングページは SSG、ユーザーダッシュボードは SSR、商品ページは ISR で revalidate 600秒。
• Next.js の App Router で、ページごとに SSR / SSG / ISR を選んでパフォーマンスを最適化した。

別名・略称

関連語

間違えやすい語

初心者向けメモ

レストランの料理に例えると、SSRは「注文後に毎回作る」（最新だが時間がかかる）、SSGは「事前に大量に作り置き」（速いが古い可能性）、ISRは「作り置きをしつつ、定期的に作り直す」（中間）という違いです。

この説明に改善点はありますか？

提案は管理者が確認した後に反映されます