フロントサーバ — 画面を組み立てて返す係

レストランのホール係を思い浮かべてください。注文を受け、料理（データ）は厨房（バックエンド）に頼み、盛り付けてテーブルに運ぶ——お客さんが接するのはこの人です。

フロントサーバは、見た目（HTML・CSS・JS ※1） を組み立てて返します。中身のデータは自分では作らず、バックエンドに頼みます。

登場人物メモ:

• ※1 HTML・CSS・JS — HTML（骨組み）・CSS（見た目の装飾）・JS（動き）。この3つで画面ができる
• ※2 静的ファイル — 画像・CSS・JSなど、誰に対しても同じもの

1. ブラウザから「このページください」を受け取る
2. 画面の器（HTML）を用意する
3. 中身のデータが要るなら、バックエンドに頼む（API）
4. 受け取ったデータを画面にはめ込み、組み立てて返す
5. ブラウザがそれを描画 → あなたが見る

• 静的配信 — 誰に見せても同じもの（画像・CSS・JS）は、そのまま配る。速い
• 動的（SSR） — 人によって違う画面（ログイン後など）は、その場で組み立てて返す

「トップページの見た目」は静的、「マイページ」は動的、と混ざっているのが普通です。

「フロントだけで全部やればいいのでは？」と思うかもしれません。でも、それだと困ることが3つあります。

1. 手元は改ざんできる — ブラウザはあなたのPCの中。中身は見えるし、書き換えられます。もし「支払い済みか」をフロントで判断したら、誰でも書き換えて「済み」にできてしまう。だから大事な判断はサーバ（バック）でやる
2. みんなで同じデータを見たい — 在庫や残高は、全員が同じ正しい値を見る必要がある。各自の手元で持つとバラバラになる。だからDBという「1つの正しい置き場」に集める
3. 秘密が置けない — DBの鍵やAPIキーは、中身が見えるフロントには置けない。だから秘密に触れるのはサーバ側だけ

つまりフロントは「顔」に徹し、判断とデータは信じられない場所（手元）ではなく、守られた場所（バック）で扱う。これがフロントとバックを分ける理由です。

• 見た目は出るが中身が空 — バックエンドやDBが応答していない（顔はあるが料理が来ない）
• レイアウトが崩れる — CSSやJSが読み込めていない
• 真っ白 — JSのエラーで描画が止まった