前端 vs 後端：分別喺邊度？
前端係 App 喺用戶瀏覽器入面運行嘅部分，即係佢哋見到同撳嘅頁面、按鈕、表格同動畫。後端係喺用戶睇唔到嘅伺服器上運行嘅部分：負責儲存同讀取數據、執行業務規則、檢查邊個有權做乜嘢，同埋同付款、電郵等其他服務溝通。兩者透過 API 溝通，再加上數據庫，就組成一個「full-stack」App。
用 AI 建 App 時點解要識
當你向 AI 建站工具描述一個 App，不論你有冇留意，其實同時描述咗前後兩部分。「客人可以預約時段」意味住一個預約表格（前端）、一套判斷邊啲時段仲有空位嘅規則（後端），以及一個儲存預約嘅地方（數據庫）。
明白呢個分工，喺三方面特別有用：
- 安全。 前端入面嘅嘢，用戶睇得到亦改得到。規則同秘密金鑰必須放喺後端。
- 除錯。 「撳掣冇反應」同「撳掣有反應但嘢冇儲存落嚟」指向唔同部分。講清楚你見到邊種情況，有助 AI 更快搵到原因。
- 託管同成本。 純前端網站簡單又平宜去託管。後端要喺某處運行，會影響你要俾幾多錢，以及 App 閒置時嘅表現。
日常生活比喻
諗吓一間餐廳。
前端好似飯廳：餐牌、枱凳、裝潢，同埋替你落單嘅侍應。佢係為客人而設，客人睇得到亦摸得到。
後端好似廚房同辦公室：廚師煮嘢、貨倉、收銀，以及經理定嘅折扣規則。客人唔會入去，亦唔應該入去。
API 就係兩者之間嘅窗口：落單同出餐都經呢度，格式事先講好。數據庫就好似貨倉同訂單簿。
客人可以改寫自己嘅點餐紙（前端由佢哋控制），但廚房仍然決定煮乜同收幾多錢。所以重要嘅檢查必須放喺後端。
各自負責乜嘢
| 前端 | 後端 | |
|---|---|---|
| 運行喺 | 用戶嘅裝置，喺瀏覽器入面 | 你（或你嘅託管服務）控制嘅伺服器 |
| 主要工作 | 顯示內容、收集輸入、回應撳掣 | 儲存數據、執行規則、強制權限、呼叫其他服務 |
| 用戶睇得到同改得到程式碼嗎？ | 睇得到——程式碼已經下載到佢哋嘅瀏覽器 | 睇唔到 |
| 可唔可以放秘密 API 金鑰？ | 唔可以 | 可以，放喺環境變數入面 |
| 常用技術 | HTML、CSS、JavaScript/TypeScript、React、Vue、Svelte、Tailwind | Node.js、Python（FastAPI、Django）、C#、Java、Go、Ruby |
| 常見問題 | 手機版版面跑位、撳掣冇反應、頁面慢 | 數據冇儲存、顯示錯誤數據、錯誤訊息、安全漏洞 |
有啲框架會令界線變得模糊。例如 Next.js 容許同一個專案同時包含瀏覽器程式碼同伺服器程式碼。概念仍然一樣：問題永遠係呢部分喺邊度運行？
實例：預約一堂瑜伽班
以下係有人預約瑜伽班時，逐步發生嘅過程。
| 步驟 | 位置 | 發生乜嘢 |
|---|---|---|
| 1 | 前端 | 時間表頁面載入，向後端要求今個星期嘅課堂。 |
| 2 | 後端 | 從數據庫讀取課堂同預約紀錄，計算剩餘名額，以 JSON 形式回傳列表。 |
| 3 | 前端 | 顯示每堂課嘅時間、導師同剩餘名額。 |
| 4 | 前端 | 用戶揀一堂課，填寫姓名同電郵。表格會檢查電郵格式是否有效（只係方便用戶，唔係保證）。 |
| 5 | 前端 → 後端 | 透過 API 發送 POST /api/bookings 請求。 |
| 6 | 後端 | 再次驗證輸入，檢查課堂有冇滿，儲存預約，並用秘密金鑰要求電郵服務發送確認信。 |
| 7 | 後端 → 前端 | 回傳「預約成功」或者「抱歉，已經滿座」。 |
| 8 | 前端 | 顯示確認畫面。 |
留意第 4 同第 6 步：輸入被檢查咗兩次。前端檢查即時畀回饋；後端檢查先至真正有效，因為有心人可以完全繞過前端。
常見術語解釋
| 術語 | 意思 |
|---|---|
| Client / server | Client 係發出請求嘅瀏覽器（或 App）；server 負責回應。 |
| UI | 用戶介面，即係畫面同控制項。 |
| API | 前端向後端要求數據或操作嘅協定格式。 |
| Endpoint | API 上一個特定網址，例如 /api/bookings。 |
| Full stack | 前端 + 後端 + 數據庫合起嚟。參閱乜嘢係 full-stack App。 |
| Static site | 冇自己後端嘅前端；所有人睇到嘅都係同一套檔案。 |
| SPA | 單頁應用程式：喺瀏覽器入面更新頁面內容，而唔係載入新頁面。 |
| Server-side rendering (SSR) | 伺服器喺傳送前先生成頁面 HTML，有助提升速度同 SEO。 |
| Environment variables | 喺運行時交俾後端嘅設定同秘密資料，唔放喺程式碼入面。 |
你個 App 需唔需要後端？
| 如果你嘅 App… | 需要後端？ |
|---|---|
| 顯示對所有人都一樣嘅資訊 | 唔需要 |
| 有一個只會電郵畀你嘅聯絡表格 | 通常一個細型後端，或者用表格服務 |
| 儲存其他人會睇到嘅數據 | 需要 |
| 有登入同私人數據 | 需要 |
| 收款 | 需要——至少要建立結帳同接收付款 webhook |
| 使用需要秘密金鑰嘅付費 AI 或其他 API | 需要，確保金鑰唔會流落瀏覽器 |
常見錯誤同誤解
- 將秘密金鑰放喺前端。 任何人打開瀏覽器開發者工具都睇得到。呢個係 AI 建造嘅 App 最常見嘅嚴重錯誤。
- 只喺前端執行規則。 對非管理員隱藏「刪除」掣唔係保護；後端必須拒絕請求。
- 以為後端「只係數據庫」。 數據庫只負責儲存數據。後端決定邊個可以讀取同修改，以及點樣修改。
- 以為 JavaScript 就即係前端。 JavaScript 同 TypeScript 都可以用 Node.js 喺伺服器上運行。
- 怪錯咗一邊。 如果頁面望落冇問題但數據有錯，問題通常出喺後端或數據庫，而唔係設計。
- 過度建造。 作品集唔需要自訂後端。加咗只會增加成本同需要維護嘅部分。
可以問你嘅 AI 建站工具嘅說法
- 「呢個 App 邊啲部分喺瀏覽器運行，邊啲喺伺服器運行？」
- 「將所有 API 金鑰移去後端，並由環境變數讀取。」
- 「每個表格都要喺伺服器驗證，唔止喺瀏覽器。」
- 「喺後端強制執行：只有管理員可以刪除預約。」
- 「頁面望落冇問題但數據冇儲存，請檢查後端紀錄裏嘅呢個請求。」
- 「呢個係簡單嘅宣傳網站，除非我哋需要後端，否則只保留前端。」
Mythex 入面嘅前端同後端
新嘅 Mythex 專案會從 Vite、React、TypeScript 同 Tailwind 前端開始，當你嘅 App 需要後端時，代理會加入後端；你亦可以要求喺同一個專案入面，同前端並行運行一個獨立嘅 API，用 Node、Python（FastAPI）、C# 或 Java 寫。喺預覽入面，你可以喺網站同 API 伺服器之間切換；發布時兩者都會部署，需要時仲會加入數據庫同檔案儲存。文件說明咗多服務 App，網頁託管指南則講解上線後兩部分各自運行喺邊度，而應用程式範本係睇 full-stack 例子嘅快捷方法。
常見問題
前端同後端有咩分別？
前端係 App 喺用戶瀏覽器入面運行嘅部分，即係佢哋見到同撳嘅頁面、按鈕同表格。後端就喺用戶睇唔到嘅伺服器上運行，負責儲存數據、執行業務規則、檢查權限，以及同付款、電郵等其他服務溝通。
每個 App 都需要後端嗎？
唔一定。宣傳網站、作品集或者簡單嘅登陸頁只用前端就可以。一旦 App 需要儲存共用數據、讓用戶登入、收款，或者使用秘密 API 金鑰，就需要某種形式嘅後端。
HTML 屬於前端定後端？
喺瀏覽器運行嘅 HTML、CSS 同 JavaScript 屬於前端。JavaScript 亦可以用 Node.js 喺伺服器上運行，咁就屬於後端程式碼。決定因素唔係語言，而係程式碼喺邊度運行。
Full stack 係咩意思？
Full stack 指同時涵蓋前端同後端（通常仲包括數據庫）。一個 full-stack App 就係三個部分都有；full-stack 開發者則負責全部範疇。