軟體工程師職涯升級計畫啟動！立即預約職涯諮詢、履歷健檢或模擬面試👈，為您的加薪做好準備！
當網站效能成為用戶體驗的關鍵，HTTP Cache（快取） 就是開發者手上的加速利器。
好的快取策略能顯著降低延遲、節省頻寬、提升裝置續航與後端效能。
這篇文章將說明 HTTP Cache 的基本概念與常見用法，並帶你了解如何正確設定快取頭（Cache Headers），讓你的 Web API 更快、更省、更聰明。🚀 為什麼需要 HTTP Cache？
根據 MDN 定義，HTTP 快取是一種「重複使用過去取得的資源」的機制，目的是減少延遲與節省資源。
我們可以將 HTTP Cache 想成是瀏覽器與中繼伺服器的「記憶體」。透過記住已經取得過的資料，下次再遇到同樣的需求時，就不必再請求遠端伺服器，提高效能表現。
📷 實際案例
想像一個有大量圖片的網站，若每次刷新頁面都重新下載圖片，不僅浪費頻寬，也拖慢使用體驗。相反，若設有適當的快取策略，這些圖片就能從快取中直接讀取，即便離線也能顯示。
📸 下圖來自 MDN，顯示了有無快取的網頁載入差異
📚 HTTP 快取的兩種形式
🧍♂️ 私有快取（Private Cache）
這是最常見的快取方式，通常儲存在使用者的瀏覽器中，也稱為 Local Cache。
例如：
- 使用者第一次造訪網站時，瀏覽器會快取圖片、CSS、JS 檔案
- 使用者下次造訪時，這些資源就會從本機載入，而非重新請求伺服器
🧑🤝🧑 共用快取（Shared Cache）
共用快取通常部署在代理伺服器（Proxy Server）或CDN 節點中，可同時為多個使用者服務。
例如公司內部的 Proxy Server 或 Cloudflare 提供的邊緣節點，就能重複使用常見資源，減少整體流量與伺服器負擔。
⚙️ 常見的 Cache-Control 設定
HTTP Cache 主要透過 Response Header 中的 Cache-Control 來控制行為。
雖然快取策略由後端設定，但前端開發者理解這些設定依然至關重要。
⏳ Cache-Control: max-age=<秒數>
設定快取資源的有效時間（單位為秒）：
http
複製編輯Cache-Control: max-age=60
代表這份資源會在 60 秒內視為有效。如果使用者在這段時間內重新整理網頁，瀏覽器就會直接從快取中取用資料，不會發送新的 Request。超過時間，才會重新向伺服器請求。
📉 下圖來自 TechBridge，示意 Cache-Control 流程
🚫 其他常見指令：
這些設定可以組合使用，例如：
http
複製編輯Cache-Control: public, max-age=3600
代表這份資源可以被任意快取（例如 CDN），而且在一小時內有效。
🧭 HTTP 快取判斷流程
當瀏覽器收到一份已快取的資源，它會依據 Cache-Control 的規則，決定是否重新發送請求。
📊 下圖為 Cache 判斷邏輯流程圖：
🔧 延伸閱讀與設定實務
若想深入了解如何配置快取策略，可以參考以下資源：
✅ 小結
在這系列文章中，我們從 Web 前後端分離出發，談到了 API 的設計、安全機制（Proxy）、與效能優化策略（Cache）。
HTTP Cache 是前端開發中提升效能的重要利器，不但能減輕伺服器壓力，也能提升用戶操作流暢度。
