前言

很多人剛開始寫 Magento 時，一定遇過這個狀況：

• 改了 .phtml，結果頁面沒變。
• 購物車數量明明加了，頁面還顯示舊的。
• Debug 一整天，最後才發現是「Page Cache」在搞鬼。

Page Cache 是 Magento 效能的靈魂，但同時也是開發者最常踩的坑。今天我們就把它完整拆開來講，從「設計理念」到「實作細節」，再到「開發最佳實務」。

Step 1. Page Cache 為什麼存在？

Magento 是一個「重型」電商系統。每次有人開一個商品頁，系統要做的事情非常多：

• 查詢商品資訊（EAV 結構，查好幾張表）
• 計算價格 / 特價 / 促銷規則
• 渲染 layout / block / phtml
• 插入 CMS 區塊、menu、widget…

👉 如果每次都重跑這一整套，伺服器會累爆。

所以 Magento 設計了 Full Page Cache (FPC)：

• 第一次產生頁面 → 把整個 HTML 存起來。
• 第二次有人進來 → 直接回快取好的 HTML。
• 結果：速度快很多，伺服器壓力小很多。

Step 2. Page Cache 存在哪裡？

Magento 有兩種 FPC backend：

1. File cache（預設）

   • 存在 var/page_cache/ 裡。
   • 安裝完 Magento，沒特別設定的話，就是用這個。

2. Varnish（官方推薦）

   • 一個獨立的快取伺服器。
   • 放在 Nginx/Apache 前面，專門處理 HTTP cache。
   • Magento Production Mode 幾乎都建議搭配 Varnish，因為比 file cache 快很多。

👉 所以「Page Cache」是概念，本體可以是 檔案 或 Varnish。

Step 3. Page Cache 的運作流程

來看一個完整的請求流程：

1. 使用者第一次進入頁面

   • Magento 從 DB 抓資料 → 跑 layout/block → 組合出完整 HTML。
   • 同時把 HTML 存到 cache backend（file / Varnish）。

2. 第二次有人進來

   • 系統先檢查 cache 裡有沒有這個 URL 的 HTML。
   • 如果有 → 直接回傳快取好的 HTML。
   • 如果沒有 → 再跑一次完整流程。

👉 流程圖（簡化）：

Request → 檢查 cache
         ├─ 有 → 回快取
         └─ 沒有 → Magento 組頁面 → 存 cache → 回應

Step 4. Page Cache 跟 Block Cache 的差別

很多人會搞混：

• Page Cache (full_page)

  • 存「整頁 HTML」。
  • 粒度大，命中率高，但容易讓畫面更新不到。

• Block Cache (block_html)

  • 存「某些區塊的 HTML」。
  • 粒度小，通常用在重複出現的元件（例如分類選單）。

👉 簡單說：Page Cache 是大鍋飯，Block Cache 是小菜。

Step 5. 為什麼有時候 Page Cache 會踩坑？

1. 改前端檔案沒生效

因為整個 HTML 被 cache 住，舊畫面直接回給你。

2. 動態內容不更新

例如購物車數量、登入使用者名稱 → 這些如果沒特別處理，就會被一起 cache 起來，導致顯示錯誤。

3. Debug 會很痛苦

有時候你明明改了程式，但因為快取還在，看不到效果，以為程式沒跑。

Step 6. Magento 解法：Hole Punching

Magento 有一個設計叫 Hole Punching（也叫 ESI block, Edge Side Includes）：

• 把頁面分成「可快取」跟「不可快取」區塊。
• 可快取的就走 Page Cache。
• 不可快取的（例如購物車數量、使用者資訊） → 會在最後階段動態補進去。

👉 在 layout XML 裡，你可以這樣設定：

<block class="..." cacheable="false"/>

這樣這個 block 就不會被整頁 cache 住。

Step 7. 開發時的操作

1. 清除 Page Cache

bin/magento cache:clean full_page

👉 清掉快取，讓下一次請求重新生成 HTML。

2. 停用 Page Cache（開發環境）

bin/magento cache:disable full_page

👉 避免開發時被快取干擾。

3. 生產環境：一定要開

因為沒有 Page Cache，網站會慢到爆。建議搭配 Varnish。

Step 8. Cache Tag 與 Granularity

Magento 的 cache 很聰明，每個頁面都會有「cache tag」。
例如：

• 商品頁 → tag 是 CATALOG_PRODUCT_123
• 分類頁 → tag 是 CATALOG_CATEGORY_45

當商品更新時，Magento 只會清除相關 tag 的快取，而不是把所有頁面全清掉。
👉 這樣能確保效能，同時又保證內容正確。

Step 9. 最佳實務

1. 開發環境：disable full_page，避免誤判。
2. 生產環境：一定要開，最好用 Varnish。
3. 清 cache 時有選擇性：改 layout / phtml → 清 full_page；改程式邏輯 → 可能要清多種 cache。
4. 動態區塊：記得設 cacheable="false" 或用 Ajax。
5. Debug：用瀏覽器的 Response Header 看 X-Magento-Cache-Debug，可以知道快取有沒有命中。

結尾

Page Cache 可以一句話總結：
它是 Magento 提升效能的超強武器，但也是開發時最大的坑。

• 它快取整頁 HTML。
• 生產環境必須開，開發環境建議關。
• 遇到動態內容，用 hole punching 或 Ajax 解決。
• Magento 用 cache tags 來做精準清除。

搞懂 Page Cache，你就能少掉一半以上「為什麼畫面沒更新」的困擾～～