利用"后装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 的便利性！大张旗鼓地迁移框架固然不错，但这种「脚踏实地的改进」其实才是现场最实用的呢。

那就这样了。