はじめに

Web開発の中でよく出てくる「MPA」「CSR」「SSR」。
「SSRって結局、一周回って戻ってきたってこと・・？」と疑問に思ったので、
今回、歴史的な背景も含めて整理してみました。

MPA（Multi Page Application）

項目	内容
SPA（Single Page Application）	URLは変わるが画面遷移はJSで処理し、ページの再読み込みはしない
コンポーネント再利用	UI部品を分割・再利用しやすい（Reactの強み）
状態管理が可能	`useState` や Reduxなどで状態を扱える

項目	内容
初回表示が遅い	JSがダウンロード・実行されるまで真っ白になる
SEOに弱い	初期HTMLにコンテンツがないので、クローラーに評価されにくい（特に昔は）

項目	内容
初回表示が速い	HTMLが最初から出来ているためユーザーにすぐ見せられる
SEOに強い	クローラーにもコンテンツが読まれる
クライアントでも状態管理可能	Reactと同じようにSPAとして動作する

昔のMPAには以下の問題がありました：

こうした課題を解決するために「フロントエンドをアプリのように作りたい」というニーズが高まり、
すべてをクライアントで描画するSPA（React）が誕生しました。

世代	概要	メリット	デメリット
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の流れを理解することはとても重要です。