Cache-Control 是 HTTP/1.1 中的一個重要頭部，用於定義請求和響應的快取策略。

通過設置 Cache-Control 頭部，可以控制瀏覽器和中間代理（如 CDN）如何快取響應。

這對於提高網頁性能、減少伺服器負載有很大的幫助。

Cache-Control 指令

常用指令

1. public
   • 指示響應可以被任何快取存儲，包括瀏覽器和 CDN。
   • 示例：Cache-Control: public
2. private
   • 指示響應只能被單個用戶的瀏覽器快取，不能被中間代理（如 CDN）快取。
   • 示例：Cache-Control: private
3. no-cache
   • 強制每次請求都要向伺服器進行重新驗證（雖然可以存儲，但在使用前必須檢查）。
   • 示例：Cache-Control: no-cache
4. no-store
   • 禁止快取存儲任何版本的響應。每次請求都會下載完整的響應。
   • 示例：Cache-Control: no-store
5. max-age=<seconds>
   • 指示快取可以存儲響應的最長時間（以秒為單位）。在這段時間內，快取可以直接提供響應而不需向伺服器重新驗證。
   • 示例：Cache-Control: max-age=3600（快取 1 小時）
6. s-maxage=<seconds>
   • 與 max-age 類似，但僅適用於共享快取（如 CDN），而不是瀏覽器。
   • 示例：Cache-Control: s-maxage=3600
7. must-revalidate
   • 指示快取在過期後必須重新驗證資源的有效性，而不是提供過期的資源。
   • 示例：Cache-Control: must-revalidate
8. proxy-revalidate
   • 與 must-revalidate 類似，但僅適用於中間代理快取。
   • 示例：Cache-Control: proxy-revalidate
9. stale-while-revalidate=<seconds>
   • 允許在快取資源過期後的一段時間內，仍然使用過期的資源，同時在後台進行重新驗證。
   • 示例：Cache-Control: stale-while-revalidate=60
10. stale-if-error=<seconds>
    • 如果伺服器無法訪問或出錯，允許快取使用過期的資源。
    • 示例：Cache-Control: stale-if-error=86400（1 天）

範例

下面是一個綜合使用 Cache-Control 頭部的例子，適用於伺服器端渲染 (SSR) 的 Next.js 頁面：

export async function getServerSideProps(context) {
  // 設置 Cache-Control 頭部
  context.res.setHeader('Cache-Control', 'public, s-maxage=10, stale-while-revalidate=59');

  // 從 API 或數據庫獲取數據
  const res = await fetch('<https://api.example.com/data>');
  const data = await res.json();

  return {
    props: {
      data,
    },
  };
}

這個例子中，Cache-Control: public, s-maxage=10, stale-while-revalidate=59 的意思是：