將既有網站以「後加式 SSR」部分導入 CMS（Cloudflare Pages Functions + microCMS 應用筆記）

大家好，我是 Liberogic 的 CTO 大塚。

要我再寫一篇文章嗎……說真的，有點不知道該寫什麼好。

因此，這次想留下一些關於「既有網站部分 CMS 化」的技術筆記。

過去的常見做法是使用 PHP，「在 HTML 中注入邏輯」；但現在只要利用 Cloudflare Pages 的 Functions，就能以更俐落的方式建置出既考量 SEO、也能讓 Google 正確建立索引的架構。

本次將介紹如何在以 Eleventy 建置的靜態網站上，透過 Cloudflare Pages Functions 加入「後加式 SSR」，並整合 microCMS。

本次架構的重點

這次專案中，我們使用 Eleventy + Nunjucks 建置前端。與 Astro 那種將 Functions 內含於專案內的做法不同，我們採用的方式是：對輸出到 dist/ 的靜態 HTML，之後再動態插入內容。

實際用起來比想像中順手，相當方便呢。

1. 僅在預覽環境中啟用 Basic 認證

需求是「預覽環境要加上驗證，但正式環境不需要，希望盡量減少不必要的 Worker 執行（成本）」。 因此，我們在建置前處理上稍加變通，採用的做法是：只在正式環境建置時，刪除 _middleware.js。

正式環境不會經過認證處理，因此能抑制多餘的執行成本，同時兼顧安全性與便利性。

2. 使用 Cache API 快取 microCMS 的回應

採用 SSR（伺服器端渲染）時，難免會擔心「每次請求都要呼叫 API 所帶來的負載與延遲」。

為此，我們利用 Cloudflare 的 Cache API，在邊緣快取回應內容。快取 TTL 設定得較短，約為 5 至 10 分鐘。

在維持內容新鮮度的同時，也確保了良好的效能。

3. 使用 KV 進行快取清除（revalidate）

即使 TTL 很短，「內容更新後無法立即反映」對營運端來說仍是一種壓力。因此我們將 Cloudflare KV 作為 revalidate 的控制儲存空間加以運用。

機制非常單純。

• 在 microCMS 更新文章時會觸發 Webhook
• 並在此時更新 KV 的值
• Pages Functions 會以 KV 的值為觸發條件，判斷是否要清除快取

如此一來，就能兼顧「平時透過快取快速回應，更新時即時反映」的優點。

總結

這種「保留既有靜態網站的優點，只在必要之處於邊緣節點加工」的做法，營運上的彈性很高，我十分喜歡。

用現今 Cloudflare 的效能，重現以前 PHP 那種簡單輕鬆的開發方式！ 大規模更換框架固然不錯，但這種「踏實的改善」，其實在實務現場最有幫助。

那麼就先這樣。