レンダリングの種類
はじめに
こんにちは! 「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実行後) | 高速 | 強い | クローラー対策 |
Discussion