如何在Netlify边缘路由不同权限要求的缓存资源请求？

针对你在Netlify上基于Next.js+无头CMS的付费墙场景，这里给出一套更简洁可控的实现方案：

一、重构页面结构 #

删掉原有的[slug]/content.ts路由，统一用单个文件处理所有文章的权限校验与渲染：

- pages
 | ...
 | - articles
    | - [slug].tsx  # 负责所有文章的权限判断、内容/付费墙渲染
 | ...

这样彻底避免了免费文章访问content路由返回404的问题，也简化了路由逻辑。

二、边缘层提前获取文章权限元数据 #

利用Netlify Edge Functions拦截文章请求，先从无头CMS拉取当前文章的权限配置（免费/需登录/需订阅），并做边缘缓存：

1. 编写Edge Function拦截/articles/*路径的请求
2. 从URL中提取slug，调用CMS API获取文章的accessLevel字段（比如'free'/'logged-in'/'subscribed'）
3. 将该元数据缓存到Netlify边缘节点，缓存时长根据文章更新频率设置（如1小时），避免重复调用CMS

三、边缘层完成权限校验与路由决策 #

在Edge Function中解码JWT并匹配权限，直接决定返回内容还是付费墙：

• 无Cookie（未登录）：
  • 文章为free：放行请求到Next.js页面渲染内容
  • 文章为logged-in/subscribed：直接返回静态付费墙HTML（或让Next.js页面渲染付费墙）
• 有Cookie（已登录）：
  解码JWT获取isLoggedIn和isSubscribed字段：
  • 文章free：放行渲染内容
  • 文章logged-in：用户已登录则放行，否则返回付费墙
  • 文章subscribed：用户已订阅则放行，否则返回付费墙

四、多版本缓存配置 #

利用Netlify的自定义缓存键功能，根据文章slug和用户权限等级生成不同缓存版本：

• 免费文章：缓存键仅包含slug，所有用户共享同一缓存
• 需登录文章：缓存键为${slug}-logged-in，已登录用户看内容缓存，未登录看付费墙缓存
• 需订阅文章：缓存键为${slug}-subscribed，订阅用户看内容缓存，其他用户看付费墙缓存

在Edge Function中设置自定义缓存键的示例代码：

// Edge Function 片段
const userAccessLevel = getAccessLevelFromJwt(cookie); // 自定义函数，返回'free'/'logged-in'/'subscribed'
const cacheKey = `${slug}-${userAccessLevel}`;
response.headers.set('x-nf-cache-key', cacheKey);

五、页面组件的兜底校验 #

虽然边缘层已经做了主要校验，仍需在Next.js页面内做兜底：

• 用getServerSideProps（或结合ISR的getStaticProps）再次校验用户权限与文章权限
• 权限不匹配时，返回付费墙组件的props；权限匹配时返回内容props

六、额外优化点 #

• 把付费墙做成静态组件，在Edge层直接返回，减少Next.js应用的调用次数
• 对于订阅状态变更的用户，可通过设置Cache-Control: no-cache强制刷新缓存

内容的提问来源于stack exchange，提问作者marks