React 应用的边缘缓存策略

Cache-Control 响应标头控制 Cloudflare（以及其他 CDN）缓存 SSR 响应的时长。关键指令包括：max-age（浏览器缓存时长）、s-maxage（CDN/共享缓存时长）以及 stale-while-revalidate（在后台重新验证时提供过期内容）。

s-maxage 由共享缓存（CDN）遵循，而 max-age 用于浏览器缓存。对于 SSR 页面，通常应设置 s-maxage=60（CDN 缓存 60 秒）和 max-age=0（浏览器始终重新验证），这样所有用户都能从边缘缓存获得相对新鲜的内容。

在 Cache-Control 标头中添加 stale-while-revalidate=30，会告知 Cloudflare 在后台获取新版本的同时立即提供缓存页面。用户始终能获得快速响应；内容的最大过期时长为 s-maxage 加上 stale-while-revalidate 秒数。

个性化内容（基于用户会话或区域设置）不得从共享缓存提供给错误的用户。Vary: Cookie 标头会告知 Cloudflare 将每个不同的 Cookie 值视为独立的缓存条目，从而避免将某个用户的数据提供给其他用户。

一种常见模式是在决定是否使用缓存之前，先在 Worker 中检查会话 Cookie。如果存在会话 Cookie，就完全绕过缓存并渲染个性化响应。如果不存在会话 Cookie，该页面就是公开页面，可以从缓存提供。

Cloudflare KV 是一种全球分布式键值存储，可以将数据存放在靠近用户的位置。您可以将渲染后的 HTML 缓存到 KV 中——将渲染后的页面作为值并设置 TTL，后续请求就能在边缘从 KV 读取，而不必再次使用 React 进行渲染。

KV 读取速度很快，因为数据会复制到处理请求的边缘节点；典型读取延迟低于 5 毫秒。然而，KV 写入采用最终一致性：某个区域中的写入会在 60 秒内传播到全球所有边缘节点，这意味着部分用户可能会暂时看到过期数据。

Cloudflare R2 是一种兼容 S3 且不收取出口费用的对象存储服务。它适合存储无法放入 KV 的大型资源，例如 WASM 模块、预渲染的 OG 图片和大型 JSON 数据集。Worker 通过绑定访问 R2，方式与访问 KV 相同。

Cloudflare Enterprise 支持缓存标签：您可以使用 Cache-Tag: product-42 为响应添加标签；当产品 42 发生变化时，调用 Cloudflare 的 API，清除所有带有 product-42 标签的响应。这样无需清除整个缓存，就能实现精准的缓存失效。

部署新版 Worker 后，现有的缓存 HTML 可能仍引用旧的 JS 包文件名。一种稳健的策略是将部署版本加入缓存键，或者使用带版本的包文件名（通过 Vite 的内容哈希生成），这样旧 HTML 始终会引用有效且已缓存的 JS 文件。

在 KV 中缓存 SSR HTML 的 Worker 遵循以下模式：根据 URL（以及可选的区域设置）计算缓存键，检查 KV 是否命中，命中时立即返回缓存的 HTML。未命中时，使用 React 进行渲染，将结果以 TTL 存入 KV，然后返回刚刚渲染的 HTML。

Cloudflare KV 对写入采用哪种一致性模型？

React 应用的边缘缓存结合了多种策略：使用 Cache-Control s-maxage 缓存公开页面，使用 Vary: Cookie 防止个性化响应被共享，使用 KV 缓存边缘的渲染 HTML，以及使用缓存标签实现精细失效。KV 的最终一致性模型意味着写入传播最多需要 60 秒，因此请据此设计 TTL 和失效策略。