返回文章列表
程式2026年5月20日 10:22

網頁是怎麼運作的？ 一次搞懂前端與後端

前言

一直以來在跟別人介紹自己的職業的時候，可能都是講：寫程式的、寫網頁的，不會直接說自己是前端或後端，因為常常說了之後，對方還是一頭霧水，不太了解這是什麼。

就跟講自己是工程師，對方可能會以為是寫硬體、韌體、IC 設計那類的，那還是直接講自己是寫網頁的最方便。

因此想要試著將前端、後端以及網頁運作的基本概念，用簡單比喻且盡量不要有大量技術名詞的方式來跟大家做介紹。

網頁運作的基本概念

大家應該都有去咖啡廳的經驗吧？想像一下這個情境：

  • 你走進了一間咖啡廳
  • 向店員點了一杯咖啡
  • 開始製作咖啡
  • 店員把咖啡交給你

網頁的運作，其實可以用這樣的流程來理解。 接下來會用這個情境，一步步的拆解：前端是什麼、後端是什麼，以及它們各自負責的任務。

前端 (Frontend)

我們走進咖啡廳裡，看到的裝潢、燈光、桌椅，櫃台的服務員等，所有你看的到、會接觸到的東西，就是前端的範圍。

以網頁來看，就是版面結構、文字、圖片、按鈕等樣式，以及與網頁的互動。例如點擊按鈕、輸入文字、頁面滑動後觸發的事件等，使用者能直接接觸與操作的部分，都是前端負責處理。

你現在看到這個網頁的右上角有一個太陽的圖示，點擊後會讓網頁變成深色模式，這個就是與網頁的互動。

網頁效能優化、載入順暢度，在前端中是非常重要的一環。 想像當你走進咖啡廳的時候，推開大門卻等了超過 10 秒才進的去，或是點了一杯咖啡，結果等了半小時才送過來。

這樣的體驗是不是就不會想再去這間咖啡廳了呢？

網頁也是一樣，如果沒有持續優化這些細節，確保網頁載入順暢度，使用者就會流失。甚至在網路搜尋引擎上，會因為體驗不佳而降低排名，導致網站流量的降低。

而網頁前端技術通常是使用 HTML、CSS、JavaScript 依照畫面設計稿來實現這些功能。(還記得以前用一堆語法來佈置無名小站的樣式嗎，它就是 CSS)

後端 (Backend)

廚房裡原料的真實庫存量、紀錄會員資料與集點紀錄、餐點的製作過程，後端負責處理這些真實資料與商業機密的部分。

咖啡廳不需要告訴客人製作餐點的原料還有多少，也不能將所有會員資料告訴其他客人。當然，餐點的製作過程、使用的獨家配方，這種商業機密更是不會洩漏出去。

對客人來說，實際會看到的只有：

  • 菜單上提供的餐點，以及有哪些已經售完的標示
  • 自己的會員資料與目前累積的點數
  • 拿到一杯製作完成的咖啡

也就是說，後端處理資料的時候，會判斷「哪些資訊可以提供給這個使用者」，再將必要的資料回傳給前端，由前端呈現在畫面上。

接著，我們再多看看一些細節。

上面提到的原料庫存、會員資料、集點紀錄，這些真實資料不會直接放在前端，而是會存放在一個叫做「資料庫」的地方。

舉個例子： 當 A 會員消費了 100 元，可以獲得 1 點時，後端會先去資料庫查詢這位會員紀錄。

  • 有記錄：把點數加 1，更新資料庫，並把目前的點數資訊回傳給前端
  • 沒有紀錄：在資料庫新增一筆 A 會員的資料，將點數設為 1，並回傳給前端

如果少了資料庫，那麼每次重新整理頁面，這些資料就會全部消失，因此會需要一個地方來長期保存資料。

前端如何與後端溝通

到這裡我們了解到前端發出需求，後端接收需求、處理邏輯，回傳給前端的流程。在前端與後端之間還有一個關鍵的東西，就是「API」。

相信你可能在某些地方有聽過 API 這個名詞，它是用來讓不同的服務、程式之間能夠溝通的橋樑。API 定義好需求、回應的格式與規則，前後端就必須遵照這些規則來進行溝通，才能夠確保溝通順利。

可以把 API 想像成服務生加上點餐單的組合。

  1. 客人開始點餐 (前端)
  2. 將需求告訴服務生 (API)
  3. 服務生把點餐單交給廚房 (後端)
  4. 廚房依照需求製作餐點 (後端)
  5. 廚房將做好的餐點交給服務生 (API)
  6. 服務生將餐點交給客人 (前端)

如果少了 API，就會像是你走進了咖啡廳，直接叫廚房的人幫你炒一盤炒飯一樣。

簡單來說，看的到的東西都是前端，看不到的東西就是後端？

不完全是對的。如果更深入的理解的話，前端、後端其實還有涵蓋很大的範圍。前端可以處理使用者看不到的東西，而後端也可以產生使用者看到的畫面。

由於本篇是網頁運作的基本介紹，如果繼續深入下去就會冒出更多的技術名詞，因此不會往更深的部分探討。

如果單純以看的到的就是前端、看不到的就是後端來區分，會出現一些邏輯瑕疵而造成誤導。對初學者來說，較安全的理解方式是：

前端是負責畫面的展示及互動，後端是負責真實資料的存取與處理。

UI/UX

怎麼前端後端講完了，突然冒出了一個新名詞！？

前面有稍微提到，前端的畫面會依據設計稿來呈現，而設計稿就是由 UI/UX 設計師所設計的，可以想像成一張咖啡廳的藍圖。

而 UI 與 UX 分別負責不同的事情。

UI 使用者介面 (User Interface)

UI 負責視覺與美感。例如咖啡廳的菜單設計、餐具樣式、裝潢風格等。網頁上就是版面的排版、字體與顏色選擇、按鈕樣式等，UI 決定了網站的視覺效果。

UX 使用者體驗 (User Experience)

UX 負責互動與感受。例如咖啡廳的空間配置、點餐流程、整體氛圍。網頁上就是操作產品時，流程自然、互動順暢、符合使用者預期。

簡單來說，UI 決定看起來怎麼樣，UX 決定用起來怎麼樣。

UI/UX 的逆向設計

優秀 UI/UX 可以讓使用者有舒適的體驗，但有些產品反而會利用 UI/UX 來設計陷阱，來操作你的行為。

日常中有沒有遇過一種情況，在使用訂閱制服務的產品時，當你想要解除訂閱時，卻發現解除訂閱的按鈕藏得非常隱密，或者是在解除訂閱的流程中，需要填寫一堆資料、好幾次的確認步驟(甚至在最後的確認，頁面上的確認跟取消的按鈕互換位置)。

總有一股他好像不想讓我解除訂閱的感覺。

這個就是 UI/UX 的一種設計：「暗黑模式 Dark Pattern」。

各種的煩躁流程、反人性化與反使用習慣的設計，運用各種手段刻意設計出極差的 UI/UX 流程。為的就是拉長操作流程，讓使用者感到煩躁而放棄解除訂閱，藉此達到他們的商業利益。

結語

現在你已經有了網頁的基本概念，之後打開一個網頁你就會知道： 看到的畫面是由「前端」來呈現，背後的資料與邏輯是由「後端」來負責。

就像走進一間咖啡廳，你看的到店面與感受的到服務，而讓整間咖啡廳運作的是後方的廚房與整套流程。

以後網站出現問題，你就可以開始分辨了，是畫面壞了、還是後端資料沒有正確的回傳。如果你是已經開始用 AI 來開發小工具或產品，這些基本概念也能幫助你更精準的描述需求，讓 AI 更理解你想做的事情。

如果對網頁開發產生了一些興趣，也可以試著將本篇的一些關鍵字餵給 AI 來解釋，簡單嘗試製作一個自己的網站。