這邊我們直接上圖

這是我們今天要說明的主題,Web應用程式的架構,這個圖片中說明了這是一個標準的客戶端-伺服器的一個架構
在深入了解流程之前，我們先來認識一下這張圖中的幾個核心角色。

首先，認識我們的核心角色
一、客戶端 (Client-side)

Browser (瀏覽器)：這就是使用者操作的介面，例如 Chrome, Firefox, Safari。我們可以直接將它看成 Web 的前端，負責呈現內容並與使用者互動。

二、伺服器端 (Server-side)

這可以看成是 Web 的後端，由多個組件分工合作，共同處理來自客戶端的請求。

Web Server (網站伺服器)：接收客戶端請求的「第一線人員」，負責處理 HTTP 請求。常見的有 Nginx、Apache。

當請求是靜態檔案（如圖片、CSS），且不需要經過複雜運算時，網站伺服器會直接從**檔案儲存(Files)**中讀取這個檔案並回傳。這就像您去餐廳跟服務生要一杯水一樣，簡單又快速。但如果請求需要經過運算（如查詢訂單），它就會將請求交給「Web 應用程式」處理。

Web Application (Web 應用程式)：網站的「大腦」，負責處理商業邏輯、資料運算，並動態生成網頁內容。通常由 Python (Django/Flask), PHP (Laravel), Java (Spring) 等語言編寫。

Database (資料庫)：儲存網站結構化資料的地方，例如使用者資料、商品資訊、文章內容等。

Files (檔案儲存)：儲存靜態資源的地方，如圖片、CSS 樣式檔、JavaScript 腳本等。

接下來我們來解說一下這一個請求的完整旅程：七個步驟全解析

第一階段：請求動態網頁內容

① HTTP GET Request (HTTP GET 請求)

發生了什麼：當我們在瀏覽器的網址列輸入一個網址（例如 https://example.com/products）並按下 Enter，瀏覽器會向該網址對應的 Web 伺服器發送一個 HTTP GET 請求。

目的：告訴伺服器：「欸那個你可以給我 example.com 伺服器上的 /products 這個頁面的東西嗎。」

② Request data (轉發請求資料)

發生了什麼：Web 伺服器收到請求後，判斷 /products 這個頁面需要動態生成，於是將請求及相關資料（如 URL、Cookies）轉發給後端的 Web 應用程式來處理。

目的：將專業的問題交給「大腦」處理。Web 伺服器像是一個總機，把需要動腦的電話轉給了對應的部門。

③ Data (從資料庫取資料)

發生了什麼：Web 應用程式理解到需要顯示商品列表，因此向資料庫發出查詢指令（例如 SQL 查詢 SELECT * FROM products;）來獲取商品資料。

目的：獲取生成網頁所需的原始資料。

④ HTML (生成動態 HTML)

發生了什麼：資料庫將查詢結果回傳給 Web 應用程式。應用程式拿著這些資料，套用在一個 HTML 模板上，動態地生成一個包含所有商品資訊的完整 HTML 文件。

目的：將原始資料和網頁模板結合，客製化出使用者當下請求的專屬網頁。

⑤ HTML (將生成的 HTML 回傳)

發生了什麼：Web 應用程式將生成好的 HTML 文件回傳給 Web 伺服器。

目的：「大腦」處理完畢，將結果交還給「第一線人員」，準備回覆給客戶。

⑥ HTTP Response & Rendering (HTTP 回應與渲染)

發生了什麼：Web 伺服器將 HTML 文件打包成一個 HTTP 回應傳送回使用者的瀏覽器。瀏覽器收到後，開始解析與渲染，將程式碼轉換成使用者看得見的視覺化網頁。

目的：將最終的網頁內容呈現給使用者。

第二階段：請求靜態資源

⑦ Static resources (請求靜態資源)

發生了什麼：瀏覽器在解析 HTML 時，發現裡面還引用了 CSS 樣式檔、JavaScript 腳本、圖片等。

接著：瀏覽器會為每一個它需要的靜態檔案，再次向 Web 伺服器發送新的 HTTP GET 請求。Web 伺服器收到後，直接從檔案系統 (Files) 中讀取這些檔案並回傳。

目的：獲取所有必要的輔助檔案，以便將網頁完整、正確地顯示出來。

所以我們可以用最簡單的方式看Web架構:

客戶端 (前端) 主要負責呈現內容，解析並渲染 HTML、CSS、JavaScript。

伺服器端 (後端) 主要負責處理使用者的請求，不管是提供靜態檔案還是動態生成內容。

明日預告
今天我們了解了整體的架構，明天我們將會更深入地探討客戶端與伺服器溝通的語言——HTTP Request/Response 的方法，以及重要的回應標頭 (Headers)。