Next.js 在 Cloudflare Workers 上生成 OG 图：Satori、缓存与 2026 预热实践

前文 Next.js + Cloudflare Workers 上的 OG Image 完全指南：从零到生产 发布之后，有同学毫不留情的指出：

这篇的OG也没有正确显示

当时我不以为然，以为就是一般的网速问题，晚点指不定就更新了。没想到，到最后那里还是个大白板。后来我才知道，原来在功能从零到一之外，还有一大串坑在等着我：

1. next/og 生成的 PNG 体积太大

2. Satori 不支持 WebP

3. 子请求需要占用 CPU 时间

4. 以及「每次抓取都需要即时渲染」会带来延迟

从1分到100分，从能用到好用之间，还有很长一段距离。

如果你像我一样，使用 Next.js + OpenNext，部署在 Cloudflare Workers，可能也会遇到这些问题。所以，我结合前些日子的实践，再发一篇博客，作为前篇的升级优化版。在本文里，会沿用「静态兜底 + 动态 route」骨架，补上 2026 我们实际落地的 R2 持久缓存与发文预热 新实践，帮你少犯我犯过的愚蠢错误：1MB PNG、即时渲染、无预热，分享出去全是大白板……

2026 更新：R2 持久化 + 发布时预热

之前我们只解决了生成问题，换句话说，的确在大部分情况下，我们可以在 Cloudflare worker 上使用 next/og 完成 OG image 的生成。但我们没有关注效率问题，导致在 Workers 上每次请求都跑 Satori + resvg，于是面临三个现实问题：

1. CPU 时间：合成带封面图的卡片时，如果涉及网络请求，很容易顶到 Worker 限额，导致超时，继而间歇性 Unsupported image type，更会让社交媒体的爬虫缓存失败页。

2. 体积：ImageResponse 默认 PNG，带照片的图经常逼近 1MB，但 WhatsApp 等平台有 ~300KB 量级上限，大图直接丢弃。

3. 重复劳动：同一 slug 被 Twitter / Telegram / iMessage / 国内爬虫轮流抓，没有缓存的话，同一张图渲染 N 次，对我们的钱包造成很大压力。

于是，和 AI 讨论后，我们调整了生产路径，引入持久缓存层。因为 URL（slug）有限，所以持久缓存完全没有问题。现在的生产路径：

GET /api/og/post?slug=...
  → 读 R2 `og/post/{slug}.jpg`
      命中：直接返回（Cache-Control 长缓存）
      未命中：Satori 渲染 →（可选）Images binding 转 JPEG@82 → 写入 R2 → 返回
发文成功钩子
  → 对当前 slug 强制 refresh，预热 R2，避免「第一位分享者」撞冷启动

实现要点：

• 键：og/post/{slug}.jpg（与公开 URL 解耦，换域名不废缓存）。

• 转码：PNG 仅作中间态；对外输出 JPEG，体积目标 150–280KB。

  • 注意，这里也不能输出 webp，很多地方不认

• 封面输入：WebP 源图先经 Images/cdn-cgi 转成 Satori 能识别的 PNG data URL，再进入合成环节。

  • 其它转换方案当然也可行，不过由于我们使用了 Cloudflare Worker，那么使用同样由 Cloudflare 提供的转换服务就比较容易

• 刷新：?refresh=1 或内部 purge 钩子覆盖 R2；改标题/换封面后要主动刷，否则社交平台仍可能拿旧副本（平台侧缓存另一回事，至少保证源站是新的）。

• 本地无 R2/Images：回退即时渲染的 PNG，不阻断开发。

不再依赖「只靠 s-maxage 边缘缓存」：边缘缓存需要重复 URL 命中；R2 持久缓存结果之后，发文预热就可以把「第一次命中」从读者侧挪到发布流水线。

然后配合我们自己的确认工具：OG 图片与社交分享预览校验，在正式分享前，先预览一遍效果并且确保缓存已经生成，后面的操作就水到渠成。

常见问题（FAQ）

Workers 上能跑 next/og 吗？

多数场景用 Satori + resvg-wasm（或等价技术栈）可以在 Route Handler 里正常生成图片。

但需注意包体积、资源图片体积、字体加载与 Workers CPU 时间限制。结果建议缓存到 R2/CDN。

OG 图为什么又慢又贵？

如果每次社交媒体分享抓取图片都需要现场渲染，可能会吃满 CPU 时间并产生延迟。至少需要使用边缘缓存，最好 R2 持久化，并在发文时提前预热 slug。

如何验证 OG 标签是否正确？

用 OG 校验工具 或社交平台 debugger 检查 og:image 尺寸、可访问性与缓存头。

延伸阅读

• Next.js + Cloudflare Workers 上的 OG Image 完全指南：从零到生产

• 2026 最佳实践：在 Cloudflare Workers 上部署 Next.js

• 用 Cloudflare R2 上传文件