レンダリングの種類

はじめに

こんにちは！ 「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実行後）	高速	強い	クローラー対策