使用「後安裝 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. 只想在預覽環境加上基本認證

需求是「預覽環境要加認證，但正式環境想盡量減少不必要的 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 般的便利性！雖然大規模框架遷移也不錯，但像這樣「腳踏實地的改進」其實在實務現場最派得上用場。

好的，那就這樣吧。