はじめに
先日個人開発をしていたときにCSR（クライアントサイドレンダリング）とSSR（サーバーサイドレンダリング）が理解できていないことに気づきました。
この記事ではCSR（クライアントサイドレンダリング）とSSR（サーバーサイドレンダリング）の違いについて調べた内容をまとめます。
対象読者
この記事では、
- CSR と SSR の違いをざっくり知りたい
- Next.js での書き方や使い分けを知りたい
- 初心者でもわかるように教えてほしい
という方に向けて書いています。
CSRとSSRの違いをざっくり比較
| 比較ポイント | CSR（クライアントサイドレンダリング） | SSR（サーバーサイドレンダリング） |
|---|---|---|
| HTMLを作る場所 | ユーザーのブラウザ（パソコン）でJavaScriptが実行されてから | サーバーがアクセスごとにHTMLを作って送る |
| 初回表示速度 | JSを読み込むまで白い画面（遅く感じることがある） | サーバーが作ったHTMLをすぐ表示できる（速い） |
| SEO（検索エンジン対策） | 弱い（クローラーがJSを動かさないと中身が見えない） | 強い（HTMLが最初から完成しているため読みやすい） |
| 状態管理（ReactのuseStateなど） | 使いやすい。インタラクティブな操作が可能。 | ページ表示後はクライアント側で使える。 |
| データ取得 | ユーザーのブラウザからAPIなどを呼ぶ必要がある | サーバーがAPIやDBから直接データを取ってくる |
| サーバー負荷 | 軽い。サーバーは最小限のファイルやAPIだけ提供 | 重い。毎回HTMLを作るため計算や通信が多いことも |
| 向いている用途 | ダッシュボードやチャットなど、ユーザー操作が多い画面 | ブログ記事、商品一覧、検索結果などSEOが必要なページ |
わかりやすいイメージ
- CSR：「お店に行ってから材料を集めて料理を作るイメージ」
- SSR：「あらかじめ作った料理をお店で出すイメージ」
まとめ
| CSR | SSR |
|---|---|
| ブラウザでレンダリングされるので動的操作が得意 | サーバーでHTMLを作り、速い初期表示ができる |
| SEOは弱いので検索順位が大事なページには不向き | SEOに強く、検索エンジンに内容を見せやすい |
| ログイン後の画面や管理画面などに向く | ブログや商品ページなど、多くの人が見るページに向く |
読んでいただきありがとうございました。
質問やフィードバックがあればコメントでお待ちしています。
参考リンク
- Next.js公式ドキュメント - Rendering
- React Docs - Client and Server Components
- 【Next.js】RSCとは？CSR/SSR/SSG/ISRの違いまとめ
- Avoiding Hydration Mismatches with useSyncExternalStore
- next.jsでSSRの問題が起きたときにはdynamicとssr:falseでお手頃SSR回避出来る