はじめに
今回、研修でReact×Laravelを用いてECサイトを構築しているのですが、そこでCSR, SSRという用語が出てきており、良い感じに例え話ができたため、備忘録として残しておきます。
例え話のため、単語と対応してない部分があるかもしれないので、流れを理解するために活用していただけると幸いです。
覚えておく用語たち
以下の用語はこれからの物語を理解するために必要なため、わからない方は事前に学習しておくと理解が捗ると思います。
- Bladeテンプレートエンジン
- APIエンドポイント
SSR (Server Side Rendering)
1. お客様（ユーザー）がレストラン（ブラウザ）に来店して料理を注文（リクエスト）する
2. 料理人（サーバー）が注文（リクエスト）を受け取る
3. 料理人（サーバー）は必要な材料（データ）を棚（データベース）から取得する
4. 取得した材料（データ）をBlade料理人（Bladeテンプレートエンジン）に渡す
5. Blade料理人（Bladeテンプレートエンジン）が、料理（データ）をレシピ（Bladeテンプレー トの記述）通りに調理（組み合わせて）して完成させる（最終的なHTML文字列を生成）
6. 料理人（サーバー）は、この完成した料理（HTML文字列）をお客様（ブラウザ）へ渡す
7. お客様（ブラウザ）は、出された料理をそのまま食べる（画面に表示する）。ﾌﾝ!!
CSR（Client Side Rendering）
1. お客様（ユーザー）がレストラン（ブラウザ）に来店して料理を注文（リクエスト）する
2. 料理人（サーバー）が注文（リクエスト）を受け取る
3. 料理人（サーバー）はレシピ（JavaScriptファイル群）と材料リストだけが書かれたメモ（ごくシンプルなHTMLファイル）をお客様（ブラウザ）に渡す
この時点では、お客様（ブラウザ）のテーブルにはほとんど何もありません
4. お客様（ブラウザ）は受け取ったマニュアル（JavaScript）を読み始め、メモ（シンプルなHTML）を確認する。
5. 同時に、マニュアルの指示に従って材料の調達部門（APIエンドポイント）に材料（データ）の注文を出す。
6. 材料の調達部門（APIエンドポイント）から、注文した材料（JSON形式のデータ）がお客様（ブラウザ）の元に届く。
7. お客様（ブラウザ）は、作り方マニュアル（JavaScript）と手元に届いた材料（データ）を使って、自分のテーブルの上で実際に料理（HTML要素）を組み立てて完成させる（画面に表示する）。
SSG (Static Site Generation)
1. 料理人（サーバー）が開店前（デプロイ時やコンテンツ更新時）に作り置きした料理（HTML）を棚（CDN/サーバー）に置いておく(麻婆豆腐、回鍋肉、小籠包など)
2. お客様がレストラン（ブラウザ）に来店して注文（リクエスト）する
この時点で、お客様は事前に作られた料理しか選べません。
3. お客様が注文（リクエスト）すると、料理人（サーバー）は棚（CDN/サーバー）に置いてある完成した料理（HTML）を提供する
まとめ
これまでの各レストランの特徴は以下の通りです。
SSR (Server Side Rendering)
- お客様が注文してから、料理人は料理を作り始め完成したら提供する！
CSR（Client Side Rendering）
- お客様が注文したら、料理人はレシピと材料リストだけが書かれたメモを渡して、実際に料理するのはお客様！
SSG (Static Site Generation)
- 開店前に全部作り置き！注文来たらそのまま料理をお客様に出すだけ！
最後に
普通のレストランはSSR形式のところが多いですが、CSR形式のようなレストランがあると楽しそうですね！