はじめに
Web開発の中でよく出てくる「MPA」「CSR」「SSR」。
「SSRって結局、一周回って戻ってきたってこと・・？」と疑問に思ったので、
今回、歴史的な背景も含めて整理してみました。
MPA（Multi Page Application）
概要：
- すべてのページがURLで分かれており、ページ遷移で毎回フルリロード
- HTMLはすべてサーバーでレンダリング
例：
- PHP（WordPress, Laravel）、Rails、JSPなど
問題点：
| 項目 |
内容 |
| 表示が遅い |
ページ全体を再読み込みするためUXが悪い |
| 状態が保持できない |
スクロール位置やフォームの入力内容が失われる |
| フロントエンドが非効率 |
jQueryなどでDOMを直接操作、再利用しづらい |
CSR（Client-Side Rendering）＝ReactなどのSPA
概要：
- 最初に最小限のHTMLだけをサーバーから取得
- その後はすべての表示をJavaScript（クライアント）で描画
特徴：
| 項目 |
内容 |
| SPA（Single Page Application） |
URLは変わるが画面遷移はJSで処理し、ページの再読み込みはしない |
| コンポーネント再利用 |
UI部品を分割・再利用しやすい（Reactの強み） |
| 状態管理が可能 |
useState や Reduxなどで状態を扱える |
問題点：
| 項目 |
内容 |
| 初回表示が遅い |
JSがダウンロード・実行されるまで真っ白になる |
| SEOに弱い |
初期HTMLにコンテンツがないので、クローラーに評価されにくい（特に昔は） |
SSR（Server-Side Rendering）＝Next.jsなど
概要：
- 初回だけはサーバー側でレンダリングしてHTMLを返す
- その後はCSRと同じようにクライアント側でレンダリング
特徴：
| 項目 |
内容 |
| 初回表示が速い |
HTMLが最初から出来ているためユーザーにすぐ見せられる |
| SEOに強い |
クローラーにもコンテンツが読まれる |
| クライアントでも状態管理可能 |
Reactと同じようにSPAとして動作する |
なぜCSR（React）が生まれたのか？
昔のMPAには以下の問題がありました：
- ユーザーが操作するたびに画面が白くなる
- 入力フォームの途中でページを移動すると全部消える
- UIが複雑になってきたが、部品化・再利用が難しい
こうした課題を解決するために「フロントエンドをアプリのように作りたい」というニーズが高まり、
すべてをクライアントで描画するSPA（React）が誕生しました。
まとめ：MPA → CSR → SSR の進化はなぜ起きた？
| 世代 |
概要 |
メリット |
デメリット |
| MPA |
すべてサーバーでレンダリング |
SEOに強い、シンプル |
遷移が遅い、UXが悪い |
| CSR |
すべてクライアントでレンダリング（Reactなど） |
UXが良い、部品化しやすい |
初回が遅い、SEOに弱い |
| SSR |
初回だけサーバーで描画（Next.jsなど） |
表示速度とSEOのバランス◎ |
実装がやや複雑になる |
📚 補足：その他のレンダリング方式
| 種類 |
説明 |
| SSG（Static Site Generation） |
ビルド時に静的HTMLを生成（例：Next.jsのgetStaticProps） |
| ISR（Incremental Static Regeneration） |
SSG + 一部のページだけ動的に再生成（Next.js特有） |
✍️ さいごに
ReactやNext.jsのようなモダンフロントエンド技術を学ぶ上で、
MPA → CSR → SSRの流れを理解することはとても重要です。
