🐙

今さら聞けないSSR・CSR・SSG・ISRを整理してみた【レンダリング手法まとめ】

に公開
React
SEO
Web
frontend
tech

はじめに

Webアプリケーションの開発において、「レンダリング手法」の選択は表示速度やSEO、ユーザー体験に直結する重要な要素です。

特に最近では、Next.js をはじめとしたフレームワークの普及により、CSR / SSR / SSG / ISR といった多様なレンダリング方式を使い分ける場面が増えてきました。

本記事では、これら 4 つの主要なレンダリング手法について、自分自身の理解を深める目的も兼ねて、それぞれの特徴や違いを整理してみたいと思います。

なぜレンダリングを理解する必要があるのか？

Webアプリの表示速度やSEO、ユーザー体験は「どこで、いつ、どのように描画するか」に大きく左右されます。
たとえば、初期表示速度を早くしたいのか、SEOを強化したいのかなど、目的によって最適な手法が変わります。
そのため、レンダリング手法の特徴を知っておくことは、正しい技術選定や設計判断を行うためにも重要です。

４つの主要な手法を整理して理解する

1. CSR（Client Side Rendering）

CSRは、ブラウザ側でJavaScriptによって画面を描画する方式です。
初回のリクエストでは、ほとんど何も描画されないHTMLが返され、ブラウザ上でJavaScriptが実行されてから実際の画面が構築されます。

<!-- CSRの初期HTMLのイメージ -->
<html>
  <head>
    <script src="/static/js/bundle.js"></script>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

✅ 長所（メリット）

  • APIから取得したデータを動的に描画できる
  • ページ遷移が早く、SPA（Single Page Application）として快適に動作する

❌ 短所（デメリット）

  • JavaScriptが読み込まれるまで画面が表示されないため、初期表示が遅くなる
  • JavaScriptが無効な環境ではページが機能しない
  • 検索エンジンのクローラーがHTMLの内容を読み取れない場合があり、SEOに弱い

🛠 代表的なフレームワーク・構成

  • React
  • Vue
  • 完全なSPA構成

2. SSR（Server Side Rendering）

SSRは、ユーザーのリクエストに応じてサーバー上でHTMLを生成し、そのまま返す方式です。
初期表示時すでにHTMLが生成されているため、ブラウザ側での描画がすぐに行われます。

// Next.jsの例（getServerSideProps）
export async function getServerSideProps(context) {
  const res = await fetch('https://api.example.com/data')
  const data = await res.json()
  return { props: { data } }
}

✅ 長所（メリット）

  • HTMLが事前に生成されているため、初期表示が非常に早い
  • クローラーにも内容が見えるため、SEOに強い
  • データが都度取得されるため、常に最新の状態でページを表示できる

❌ 短所（デメリット）

  • ユーザーごとにリクエストに応じて毎回HTMLを生成するため、サーバー負荷が高い
  • ボタン操作や入力処理などを可能にするには、クライアント側でJavaScriptを実行する必要がある

🛠 代表的なフレームワーク・構成

  • Next.js の getServerSideProps
  • Nuxt.js の asyncData
  • Express + SSRライブラリ構成

3. SSG（Static Site Generation）

SSGは、ビルド時にあらかじめHTMLを生成しておく方式です。
すべてのページを事前に静的ファイルとして出力しておくことで、リクエストが来たときには即座にそのHTMLを返すことができます。

// Next.jsの例（getStaticProps）
export async function getStaticProps() {
const res = await fetch('https://api.example.com/data
')
const data = await res.json()
return { props: { data } }
}

※ Next.js 13以降の App Router では、getStaticProps は使われず、fetch() を使ったデータ取得と自動SSGが基本になります。

✅ 長所（メリット）

  • HTMLが事前に生成されているため、初期表示がとても早い
  • CDN経由で配信できるため、グローバルでも高速
  • サーバー負荷がなく、コストを抑えられる
  • SEOにも強い（HTMLが最初から存在しているため）

❌ 短所（デメリット）

  • ページの内容を更新したい場合、再ビルドが必要になる
  • 頻繁にデータが変わるページには向いていない
  • ページ数が多いとビルド時間が長くなる

🛠 代表的なフレームワーク・構成

  • Next.js の getStaticProps
  • Nuxt の generate モード
  • Gatsby

4. ISR（Incremental Static Regeneration）

ISRは、SSGのようにビルド時に静的ファイルを生成しつつ、必要に応じてバックグラウンドで再生成を行う方式です。

Next.jsの revalidateオプションを使うことで、一定時間ごとに新しいHTMLを生成し、次回のアクセス時にはその新しいHTMLが使われるようになります。

// App RouterでのISRの例
const res = await fetch('https://api.example.com/data', {
  next: { revalidate: 60 }, // 60秒ごとに再生成
})

✅ 長所（メリット）

  • 表示は高速なまま、データの鮮度も保てる
  • ビルドのために全ページを再生成しなくてよい
  • SEOにも強く、CDN配信も可能

❌ 短所（デメリット）

  • バックグラウンドでの再生成処理により、更新タイミングが制御しづらい
  • 実装がやや複雑 + 仕組みを理解してないとトラブルの原因になりやすい

🛠 代表的なフレームワーク・構成

  • Next.jsの revalidate（App Router/Page Routerの両方）
  • App Routerでは fetch() にオプションとして {next:{revalidate: 秒数}}を指定

💡 補足：CDNとは？

CDN（Content Delivery Network）は、Webサイトの静的ファイルを世界中にあるサーバー（エッジサーバー）にキャッシュし、ユーザーの近くのサーバーから高速に配信する仕組みです。

SSGやISRなどの「静的なページ」と非常に相性が良く、表示速度の向上やサーバー負荷の軽減に大きく貢献します。

各レンダリング手法の比較表

項目 CSR（Client Side） SSR（Server Side） SSG（Static） ISR（Incremental）
初期表示速度 △ 遅め ◎ 速い ◎ 非常に速い ◎ 非常に速い
SEO対策 △ 弱い ◎ 強い ◎ 強い ◎ 強い
データの新鮮さ ◎ 最新 ◎ 最新 △ ビルド時点 ◎ 柔軟に更新可能
サーバー負荷 ◎ 低い △ 高い ◎ ほぼなし ◎ 低め（再生成のみ）
実装の複雑さ ◎ シンプル △ 中程度 △ 中程度 △ やや複雑
向いている用途 管理画面 / SPA 動的ページ / SEOが重要 ブログ / LP / Docs 更新が必要な記事 / プロダクト一覧など

まとめ

本記事では、Webアプリ開発でよく使われる４つのレンダリング手法（CSR / SSR / SSG / ISR）について、それぞれの仕組み・特徴・向いている用途を整理してみました。
それぞれに得意・苦手があるため、目的や要件に応じて適切な手法を選ぶことが、開発の成功につながります。

Discussion