先認識兩個角色：用戶端與伺服器
上一課把後端的地圖攤開了，這一課從第一站看起：前端和後端到底怎麼分工。每一個你用過的網站、App，背後都是兩種角色在合作：發需求的叫用戶端（Client），提供服務的叫伺服器（Server）。先把這兩個角色和中間那條界線搞清楚，後面整堂課都會很直覺。
用戶端
Client發出需求的那一方在哪裡你自己的裝置上。手機裡的 YouTube App、瀏覽器裡開著的網頁，都是用戶端。
做什麼你每按一下，它就替你發出一個請求。
你可以操作嗎？可以。跑在你裝置上的東西，你看得到、也改得到。
伺服器
Server提供服務的那一方在哪裡遠方機房裡，一整排全年運轉的電腦。
做什麼收到請求後查資料、做判斷，把結果送回去。
你可以操作嗎？不行。程式、資料、密碼都收在裡面，使用者看不到也碰不到。
你每天都在做的事：打開 YouTube
手機上的 YouTube App 和瀏覽器裡的 YouTube 網頁，是同一個角色的兩種樣子：都是用戶端，連的也是同一台伺服器。點一支影片，就是用戶端發出「我要看這支」的需求，Google 資料中心收到後把影片串流回來，還順便算好接下來要推薦什麼。按下面的播放鍵，看兩台裝置的請求怎麼匯進同一台伺服器。
youtube.com/watch
YouTube搜尋
0:16 / 3:24
經典科幻短片《Tears of Steel》：機器人大戰
科幻放映室
128 萬位訂閱者
9:41
YouTube
0:16 / 3:24
科幻短片：機器人大戰
科幻放映室 · 890 萬次觀看
火箭回收是怎麼辦到的？
太空紀實
從太空看地球的 24 小時
宇宙日誌
韋伯望遠鏡拍到了什麼
星空頻道
首頁Shorts訂閱你
Google 資料中心串流中
機櫃 1
機櫃 2
機櫃 3
機櫃 4
算力差距：誰的機器跑得動？
知道誰發需求、誰提供服務之後，還有一個關鍵差別：誰「算得動」。用你天天在用的例子，跑 AI 模型，最好懂：點下面三顆按鈕（小／中／大模型），把同一個模型丟給你的筆電（用戶端）和機房裡的一整櫃（伺服器）跑，看誰吐得動、吐多快。
Client一台 MacBook Pro
48 GB 記憶體 · 546 GB/s · 一個人用
Client 和 Server 差在哪？
等待模型載入…
模型占用記憶體5 / 48 GB
一個人的生成速度50 tok/s
Server機房裡的一整櫃
72 GPU · 13.5 TB 記憶體 · 同時 0 個請求（示意）
GB200 NVL72
72 GPU · 13.5 TB · ~120 kW
Client 和 Server 差在哪？
等待模型載入…
模型占用記憶體5 / 13,500 GB
一整櫃的總生成速度秒答
→ 筆電跑得動：50 tok/s，一次服務一個人
這個尺寸筆電跑得很順，答案幾乎即時吐出來。你手邊的裝置就是一個能用的 Client。
前端的資料，其實攤在使用者面前
還有一個非後端不可的理由，叫「不要相信前端」：算錢、算折扣、判斷有沒有權限這種商業邏輯（business logic），只要放在使用者裝置上跑，就全看得到、也改得到。下面是一個電影訂票網站，右邊就是畫出它的前端程式碼，跑在你自己的瀏覽器裡。把程式碼裡的單價改小，看左邊金額怎麼跟著變，再按結帳送出，看伺服器怎麼回應：真正算錢、拍板的是後端，前端送什麼都當作可能被動過手腳。
vibe-cinema.example/checkout
保護級IMAX
星際效應
Interstellar
科幻 · 冒險·2h 49m 8.7
威秀影城 · 信義今晚 19:30第 8 廳（IMAX）座位G7G8
全票 × 2NT$ 320
應付總額NT$ 640
checkout.js · 跑在你的瀏覽器前端
// 這支程式就跑在你的瀏覽器裡，你看得到也改得到
const price = // 單價，← 改這個
const qty = 2 // 張數
showTotal(price * qty) // → 640
前端後端
重點回顧
這一課把「為什麼不能只有前端」講完了。之後做東西、跟 AI 提需求時，帶走這三個重點：
- 1前端發需求、後端提供服務你用的每個網站都是這兩個角色在合作：用戶端跑在你的裝置上、替你發需求；伺服器在遠方機房提供服務、保管資料。
- 2又大又重的事交給後端資料量大、算力吃重、要跨裝置共用的（跑大模型、存正本資料），你的裝置扛不動也留不住，得靠後端那一整櫃機器。
- 3前端不可信，把關收在後端跑在使用者手上的東西全看得到、也改得到，連價格都能改。所以金額、折扣、權限這種最終裁決一定要收在後端重算、重驗，前端送什麼都當作可能被動過手腳。
換你分：這件事歸前端還是後端？
比對使用者輸入的密碼正不正確
打字當下就即時跳出「Email 格式不對」
決定首頁要推薦哪些影片給這個使用者
點常見問題的標題，把底下的答案展開或收合