📘

レンダリングの種類

2025/03/13に公開

はじめに

こんにちは! 「ITトレンド」というメディアの開発をしている Taiki です!

Web開発では「レンダリング」ってよく聞くけど、SSR・CSR・SSG・ISR って何が違うの? って思ったことありませんか?
実際、自分も最初は「どの方式を選べばいいの?」と迷ったので、
それぞれのレンダリングの特徴やメリット・デメリットを自分なりに整理してまとめました!
参考になれば嬉しいです!🙌

レンダリングの種類一覧

レンダリングにはいくつかの種類があり、用途や目的によって使い分けられる。
大きく分けると 5種類

レンダリング方式 レンダリングのタイミング 実行場所 特徴
CSR(クライアントサイドレンダリング) ユーザーのブラウザ上で実行 ブラウザ 最初のHTMLは空、JSで後からデータ取得
SSR(サーバーサイドレンダリング) リクエスト時にHTMLを生成 サーバー サーバーでHTMLを作り、ユーザーに送る
SSG(静的サイト生成) ビルド時にHTMLを生成 ビルド環境 事前にHTMLを作成し、静的ファイルとして提供
ISR(増分静的再生成) SSG + 一定時間ごとに更新 ビルド環境 & サーバー SSG の弱点(古いデータ)を解決
プリレンダリング(事前レンダリング) ビルド時にJS実行後のHTMLを保存 ビルド環境 クローラー向けに完全なHTMLを用意

CSR

特徴:

初回は空のHTMLを返す
JavaScriptが後からAPIを呼び出し、DOMを更新
シングルページアプリ(SPA)でよく使われる
ページ遷移がスムーズ(JSで制御するため)
SEOに弱い(クローラーが空のHTMLを取得してしまう)

問題点:

初回表示が遅い
JavaScriptをオフにすると何も見えない

最初は <div id="app"></div> だけが表示され、JavaScript が動いた後に更新される

SSR

特徴:

リクエストが来たタイミングでHTMLを生成
サーバー上でレンダリング
SEOに強い(クローラーが完全なHTMLを取得できる)
初回表示が速い(すでにHTMLができている)
ユーザーごとに異なるデータを簡単に表示できる(ログイン状態など)

問題点:

サーバー負荷が高くなる(リクエストごとにHTMLを生成するため)

ユーザーがページを開いた瞬間に、サーバーでデータを取得してHTMLを作成 → ブラウザに送信!

SSG

特徴:

ビルド時にHTMLを作成し、サーバーに保存
クライアントからのリクエスト時には、すでに用意されたHTMLを返す
SSRと違い、毎回レンダリングせずに済むため超高速
サーバー負荷が低い
SEOに強い(HTMLが事前に用意されているため)
ブログやドキュメントサイト向き

問題点:

リアルタイムのデータには不向き
データが変わるたびにビルドし直す必要がある

ビルド時に HTML を作成 → ユーザーがページを開いたときには、すでにHTMLがあるので高速!

ISR

特徴:

SSGの拡張版
一定時間ごとにHTMLを再生成する
動的データにもある程度対応できる
Next.js で revalidate を使うと実現できる

問題点:

即時のデータ更新はできない(数秒~数分の遅れがある)

SSGと同じく事前生成するが、一定時間ごとに更新されるのでデータの鮮度を保てる!

プリレンダリング(事前レンダリング)

特徴:

ビルド時に JavaScript を実行した後の HTML を保存
通常の SSG では JavaScript の実行結果は含まれないが、プリレンダリングなら含められる
クローラー向けに完全なHTMLを用意する
静的ページに近いが、動的要素を持てる

問題点:

ビルド時間が長くなる
動的データが多すぎると管理が難しい

クローラーが JavaScript を実行できなくても、あらかじめ実行後の HTML を返せる!

まとめ

レンダリング方式 どこで処理する? 速さ SEO 使われるケース
CSR クライアント 遅い 弱い SPA、管理画面
SSR サーバー 速い 強い 動的データが多いサイト
SSG ビルド時 最速 強い ブログ、静的サイト
ISR ビルド時 + 定期更新 高速 強い ECサイト、ニュース
プリレンダリング ビルド時(JS実行後) 高速 強い クローラー対策
株式会社イノベーション Tech Blog

Discussion