はじめに
いい加減、レンダリング方式の違いを理解しようと思います。
代表的なレンダリング方式
- CSR (Client Side Rendering)
- SSR (Server Side Rendering)
- SSG (Static Site Generation)
- ISR (Incremental Static Regeneration)
- ハイブリッドレンダリング
CSR（Client Side Rendering)
- JavaScriptを使用して、ユーザーのブラウザで動的にページを生成する
- 初回実行時に最小のHTMLと大量のJavaScriptを送信
- HTMLは最小限であり、JavaScriptでページの更新を行うので、SEOには不向き
- 実行する処理が多いほどユーザー側の負荷が増えるので、そういった場合は向いていない
- 利用者の端末に表示時間が依存する
- SPAに使用されることが多い
- 初回読み込み時にすべてのデータを取得するので、表示まで時間がかかる
SSR (Server Side Rendering)
- サーバー側で処理して生成したHTMLをクライアントに返却する
- サーバー側でリクエスト毎にHTMLを生成するため、サーバーの処理不可が高くなる
- 初回表示が速い
- クライアント側の端末に表示時間が依存しない
- SEOで有利
SSG (Static Site Generation)
- CSRやSSRと異なり、クライアントからのリクエストより前にHTMLを生成しておく
- HTMLを生成する処理が発生しないのでページの表示が速い
- CSNにキャッシュしておくことで、より高速に表示できる
- ビルド時にHTMLを作成するだけなので、サーバー負荷が低い
- SEOに優れている
- 情報の更新を反映できない
ISR (Incremental Static Regeneration)
- SSRとSSGを組み合わせた手法
- 一定期間が経過した後に再ビルドすることでページを再生成
- サーバーへの負荷を下げつつ、動的にコンテンツの更新ができる
- 常に最新というわけではない
ハイブリッドレンダリング
- ページ単位でCSR、SSR、ISRを併用
- 今だとこれが主流？
どのようにレンダリング方式の場合分けができている？
フレームワークがルーティングごと、ページごとに「どうHTMLを生成するか」を制御することでレンダリング方式の切り替えを行うことができる
例) Next.jsの場合
| レンダリング方式 | コード上の指定方法 |
|---|---|
| SSR | getServerSideProps() |
| SSG |
getStaticProps()（＋getStaticPaths()） |
| ISR |
getStaticProps() に revalidate オプション |
| CSR | ページ側で useEffect()
|
どういう場合に使い分けるのがよいのか？
| レンダリング方式 | 初回表示速度 | 主な使いどころ |
|---|---|---|
| CSR（Client Side） | 遅め | SPA / 管理画面 / ダッシュボード |
| SSR（Server Side） | 普通 | 商品詳細 / ブログ / 認証ページ |
| SSG（Static Site） | 爆速 | ブログ / コーポレートサイト |
| ISR（Incremental） | 速い（キャッシュ） | 商品一覧 / ニュース / ハイブリッド |