前端與後端：差在哪裡？
前端是應用程式在使用者瀏覽器中執行的部分，也就是他們看到並點擊的頁面、按鈕、表單與動畫。後端則是在使用者看不到的伺服器上運作的部分：它負責儲存與讀取資料、套用商業規則、檢查誰有權限做什麼，並與付款和電子郵件等其他服務溝通。兩者透過 API 溝通，再加上資料庫，就組成了一個「全端」應用程式。
用 AI 建置時，為什麼這很重要
當你向 AI 建置工具描述一個應用程式時，不論你是否意識到，你其實同時描述了兩個部分。「客戶可以預約時段」意味著：一個預約表單（前端）、一套規則來判斷哪些時段可用（後端），以及一個儲存預約的地方（資料庫）。
了解這樣的劃分，在三個實際層面上很有幫助：
- 安全性。 前端中的任何內容，使用者都看得到也能修改。規則與機密必須放在後端。
- 除錯。 「按鈕沒有反應」和「按鈕有反應但資料沒有儲存」指向的是不同的部分。說明你看到的是哪一種情況，能幫 AI 更快找到原因。
- 託管與成本。 純前端網站便宜且容易託管。後端必須在某處運行，這會影響你的費用，以及應用程式閒置時的表現。
日常生活中的比喻
把它想像成一家餐廳。
前端是用餐區：菜單、餐桌、裝潢，以及替你點餐的服務生。它是為顧客設計的，顧客可以看到並碰觸所有東西。
後端是廚房和辦公室：廚師烹調、倉庫、收銀機，以及決定誰能享有折扣的經理規則。顧客不會進去，也不應該能進去。
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（用戶端／伺服器） | 用戶端是發出請求的瀏覽器（或應用程式），伺服器則負責回應。 |
| UI | 使用者介面，也就是畫面與控制項。 |
| API | 前端向後端要求資料或動作的約定方式。 |
| Endpoint（端點） | API 上的一個特定網址，例如 /api/bookings。 |
| Full stack（全端） | 前端 + 後端 + 資料庫的組合。參見什麼是全端應用程式。 |
| Static site（靜態網站） | 沒有自己後端的前端，每個人都拿到相同的檔案。 |
| SPA（單頁應用程式） | 在瀏覽器中更新頁面內容，而不是載入新頁面的前端應用程式。 |
| Server-side rendering, SSR（伺服器端渲染） | 伺服器在送出前先建立頁面的 HTML，有助於提升速度與 SEO。 |
| Environment variables（環境變數） | 在執行時提供給後端的設定與機密，並與程式碼分開保存。 |
你的應用程式需要後端嗎？
| 如果你的應用程式… | 需要後端嗎？ |
|---|---|
| 顯示對所有人都相同的資訊 | 不需要 |
| 有只會寄信給你的聯絡表單 | 通常需要一個小型後端，或使用表單服務 |
| 儲存其他人會看到的資料 | 需要 |
| 有登入功能與私人資料 | 需要 |
| 接受付款 | 需要，至少要能建立結帳流程並接收付款 webhook |
| 使用需要機密金鑰的付費 AI 或其他 API | 需要，才能讓金鑰不進入瀏覽器 |
常見錯誤與迷思
- 把機密金鑰放在前端。 任何打開瀏覽器開發人員工具的人都看得到。這是 AI 建置應用程式中最常見、也最嚴重的錯誤。
- 只在前端執行規則。 對非管理員隱藏「刪除」按鈕不是保護；後端必須拒絕該請求。
- 以為後端「只是資料庫」。 資料庫只負責儲存資料。後端決定誰能讀取和修改資料，以及如何進行。
- 以為 JavaScript 就等於前端。 JavaScript 和 TypeScript 透過 Node.js 也能在伺服器上執行。
- 責怪錯誤的那一半。 如果頁面看起來正常但資料有誤，問題通常出在後端或資料庫，而不是設計。
- 過度建置。 作品集不需要自訂後端。加上後端只會增加成本與複雜度。
向你的 AI 建置工具提出的要求
- 「這個應用程式的哪些部分在瀏覽器中執行，哪些在伺服器上執行？」
- 「把所有 API 金鑰移到後端，並從環境變數讀取。」
- 「除了在瀏覽器中驗證，也在伺服器上驗證每一個表單。」
- 「在後端強制執行：只有管理員能刪除預約。」
- 「頁面看起來正常，但資料沒有儲存，請檢查後端日誌中的這個請求。」
- 「這是一個簡單的行銷網站；除非需要，否則只保留前端。」
Mythex 中的前端與後端
新的 Mythex 專案會從 Vite、React、TypeScript 和 Tailwind 的前端開始，當你的應用程式需要後端時，代理程式會加入後端；你也可以要求在同一個專案中，與前端並行運作一個以 Node、Python（FastAPI）、C# 或 Java 撰寫的獨立 API。在預覽中，你可以在網站和 API 伺服器之間切換；發布時會同時部署兩者，並在需要時加入資料庫與檔案儲存空間。說明文件介紹了多服務應用程式，網站託管指南說明上線後兩部分各自運行在哪裡，而應用程式範本則是快速查看全端範例的方式。
常見問題
前端和後端有什麼差別？
前端是應用程式在使用者瀏覽器中執行的部分，也就是他們看到並點擊的頁面、按鈕和表單。後端則在使用者看不到的伺服器上運作，負責儲存資料、套用商業規則、檢查權限，並與其他服務溝通。
每個應用程式都需要後端嗎？
不一定。行銷網站、作品集或簡單的著陸頁可以只有前端。一旦應用程式需要儲存共用資料、讓使用者登入、收款，或使用機密 API 金鑰，就需要某種形式的後端。
HTML 屬於前端還是後端？
在瀏覽器中執行的 HTML、CSS 和 JavaScript 屬於前端。JavaScript 也可以透過 Node.js 在伺服器上執行，此時就是後端程式碼。決定它屬於哪一邊的不是語言，而是程式碼在哪裡執行。
全端是什麼意思？
全端指同時涵蓋前端和後端（通常還包括資料庫）。全端應用程式是同時具備這三個部分的應用程式；全端工程師則同時負責這些部分。