Topics

您好，我是 Otsuka，Liberlogic 的 CTO。

即使你讓我對這篇文章做些什麼…

所以，我想留下一些關於「在現有網站上部分實施內容管理系統」的技術說明。

過去，標準做法是使用 PHP 將邏輯“注入 HTML”，但現在，透過使用 Cloudflare Pages Functions，您可以創建一個更聰明、對 SEO 更友善的結構，並且可以被 Google 正確索引。

這次，我將分享如何透過使用 Cloudflare Pages Functions 應用「後處理 SSR」將微型 CMS 整合到使用 Eleventy 建置的靜態網站中。

此配置的關鍵點

在這個專案中，我們使用 Eleventy + Nunjucks 來建立前端。與 Astro 將函數封裝在專案內部不同，dist/我們採用了一種方法，將動態內容稍後插入靜態 HTML 輸出中。

它操作起來出乎意料地簡單方便。

1. 我只想在預覽環境中套用基本驗證。

需求是：「我們希望在預覽環境中加入身份驗證，但希望最大限度地減少生產環境中不必要的 worker 的執行成本。」 因此，我們對預建處理進行了一些調整。僅在生產建造期間_middleware.js這個過程包括將其刪除。

在生產環境中，不需要身份驗證，從而在安全性和便利性之間取得平衡，同時最大限度地減少不必要的執行成本。

2. 使用快取 API 快取 microCMS 回應。

使用 SSR（伺服器端渲染）時，最大的問題之一是每次請求都需要進行 API 調用，導致負載和延遲。

那是 Cloudflare 的Cache API我們決定採用這種方法在邊緣端快取響應。緩存的生存時間（TTL）設定為相對較短的5到10分鐘。

我們在保持產品新鮮度的同時，確保其卓越的性能。

3. 使用鍵值對進行快取清除（重新驗證）

儘管 TTL 很短，但更新不能立即反映出來，這給維運團隊帶來了一些壓力。Cloudflare KV我們將其用作控制重新驗證過程的儲存庫。

其原理很簡單。

• 當使用microCMS更新文章時，會觸發webhook。
• 屆時KV值將更新。
• Pages Functions 使用 KV 值作為觸發器來決定是否使快取失效。

這種設計兼具兩者的優點：「借助快取實現極快的更新速度，以及即時更新」。

概括

我喜歡這種「利用現有靜態網站的優勢，同時僅使用 Edge 修改必要部分」的方法，因為它提供了高度的操作靈活性。

利用 Cloudflare 的強大功能，重現舊版 PHP 的易用性！雖然酷炫的框架遷移固然不錯，但這種「腳踏實地的改進」在實際應用上才是最有用的。

那麼。