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 的易用性！虽然炫酷的框架迁移固然不错，但这种“脚踏实地的改进”在实际应用中才是最有用的。

那么。