你打開一個待辦清單網站，輸入「買牛奶」，按下新增。清單裡就多了一件事。

你按的是自己電腦上的按鈕，網站卻能把資料存起來。中間是誰把內容送出去、誰處理、又存在哪裡？

先看一個會把待辦保存在網站那一端的例子。這篇要建立的是整個網站的分工圖，暫時不需要寫程式。

先分清兩個位置

你眼前的網頁，在你的電腦上顯示；網站那一端，還有提供內容、處理要求的主機 (Host)。 主機也是電腦，只是這裡用它來提供網站服務。

你用瀏覽器 (Browser) 打開網址時，瀏覽器會向網站索取網頁需要的內容。取得內容後，瀏覽器才把文字、按鈕和輸入框畫到螢幕上。這些內容包括描述結構的 HTML、外觀的 CSS，以及控制互動的 JavaScript；後面的章節會逐一拆開。

所以，看見畫面與把一筆新資料存到網站那一端，是兩件事。畫面已經出現後，按下新增，還可以再跟主機來回一次，不必每次都換掉整張網頁。

同一件待辦，走過哪些地方？

本例先讓主機保存成功，再更新你眼前的清單：

瀏覽器送出去的訊息稱為請求 (Request)，主機傳回來的結果稱為回應 (Response)。這裡先把請求理解成「請幫我新增這件事」，把回應理解成「已經存好了」，不急著看訊息格式。

前端、後端、資料庫，各指哪一份工作？

剛才不是只有一個程式在做所有事。

前端 (Frontend) 是直接面對使用者的這一部分。在本例中，它顯示清單、接收你輸入的文字、送出新增要求，再依收到的結果更新畫面。你操作的網頁，是前端的一個具體樣子。

後端 (Backend) 是網站那一端處理要求的程式。本例的後端收到新增要求後，會檢查是否有內容，執行保存，再回覆結果。真實網站還可能檢查你有沒有登入、能不能改這份清單；不能只因為前端送來了文字，就全部照收。

資料庫 (Database) 負責有組織地保存、查找資料。後端把待辦交給它保存；之後要取回清單，也可以透過它讀取。它不負責替你畫按鈕，也不是按一下新增就會自動知道該存什麼，仍需要程式安排讀寫。

清單多了一行，單看畫面還不能判斷資料存在哪裡。 在剛才的練習裡，可以直接看到保存區先新增，畫面才跟著更新；這是為了把平常藏在畫面背後的分工攤開。

那 Infra 又在哪裡？

上面的程式要有地方執行，保存的資料要有空間放，兩端也要能透過網路連接。支撐這些工作的運作環境，稱為基礎設施 (Infrastructure, Infra)。

在本例，先把它理解成：讓網站程式持續執行的主機、保存資料的空間，以及讓人連得進來的網路。練習裡畫出的遠端機器、儲存設備和兩端之間的連線，就是把這些工作畫成容易辨識的物件；機器造型只是示意。把網站準備好、放進環境中開始提供服務，稱為部署 (Deployment)。之後還需要留意它是否正常運作。

Infra 並不是「前端 → 後端 → 資料庫」之後的下一站。 它是讓程式能運作、資料能保存、訊息能來回的支撐。

這是一張分工圖，不是一份購物清單：後端與資料庫可以放在同一台主機，也可以分開；也可以使用別人已經營運好的服務，不必每一部分都自己架設。

有了這張圖，再看網站開發

做這個網站，不只是畫出一個漂亮清單。你還需要決定：

• 操作與畫面：讀者怎麼輸入？送出後顯示什麼？失敗時怎麼告知？
• 處理規則：誰可以新增或修改？收到不合法的內容怎麼辦？
• 資料保存：要存哪些欄位？下次怎麼取回？不同人的清單如何分開？
• 運作環境：程式放在哪裡？怎麼更新上線？出了問題怎麼發現？

前端、後端、資料庫與 Infra，就是用來定位這些工作的幾個重要名稱。後面的網站線會沿著這張圖，逐步拆開畫面、網路、處理程式、保存與上線。

這個例子代表所有網站嗎？

不一定。介紹文章或作品集，可以只提供網頁內容，沒有自己撰寫的後端或資料庫；網頁也可以只在你的瀏覽器內計算，或使用瀏覽器的本機儲存 (Local Storage) 保存資料。

真實網站也可能先在畫面新增，再等主機確認；若保存失敗，還要告知或復原。本例選擇「保存成功後才更新」，是為了看清來回關係，不是所有網站都必須照這個順序呈現。

章內練習只是把各部分畫在同一個畫面中，資料在練習內暫存，沒有真的執行後端或寫入資料庫；重新載入頁面會回到起點。真實的「跨裝置取回待辦」，還需要帳號、授權 (Authorization) 與取回資料等設計，不能只靠畫面上出現成功訊息就成立。

參考：MDN：瀏覽器與伺服器的請求、處理及回應、MDN：網站伺服器的硬體與軟體、MDN：瀏覽器的儲存能力（2026-10-16 查核）。