主题
Next.js 原理与运行时
Next.js Draft Mode 如何实现 CMS 预览而不污染正式缓存？
预览要求用户看到未发布内容，同时不能让草稿响应进入公共 CDN、Router Cache 或正式 SEO 页面。
面试官想考什么
- 预览链接如何鉴权？ 考察 token 和权限。
- Draft Mode 为什么会影响缓存？ 考察请求上下文。
- CMS 发布后正式页面如何失效？ 考察 webhook 和 revalidation。
- 预览内容如何避免被搜索引擎收录？ 考察 SEO 风险。
一句话回答
text
Draft Mode 用受保护的预览凭证设置请求级状态，使页面读取草稿数据并绕开公共缓存；预览入口、cookie、CMS webhook、robots/noindex 和退出机制都必须独立治理。面试回答详解
1. 预览链路
text
CMS preview URL + signed token -> preview route
-> verify editor permission -> set draft cookie
-> dynamic draft read -> no-store/private response预览 token 应短期、单用途或可撤销，不能只靠一个可猜的 query 参数。
2. 缓存隔离
预览 cookie 会改变页面输入，预览响应不得进入公共 CDN 或共享 Data Cache。客户端导航也可能复用 Router Cache，进入和退出预览时要刷新相关路由状态。
3. 发布失效
CMS 发布成功后发送签名 webhook，Next.js 验证签名和事件版本，再按内容 id/tag 失效。Webhook 重试必须幂等，不能因为重复事件触发无界刷新。
4. SEO 与安全
草稿页设置 noindex、避免 sitemap/OG 对外暴露，预览域名和正式域名可以分开。编辑者权限、租户范围和内容版本要在服务端校验；不能把草稿全文放到 URL。
5. 退出和观测
提供明确 disable draft route，清 cookie 并重新导航。记录 preview success、权限拒绝、webhook 重复、失效延迟和草稿/正式版本差异。
可直接背诵的 30 秒回答
text
Draft Mode 的核心是用受保护的预览状态让服务端读取草稿，同时让响应保持动态和 private，不能污染 CDN、Data Cache 或 Router Cache。预览入口要验证短期签名 token 和编辑权限，CMS 发布通过签名、幂等 webhook 做按内容失效，并给预览页 noindex 和退出机制。扩展知识
预览与 staging 的区别
- Draft Mode：同一应用内按请求查看草稿。
- Staging 环境：完整隔离的部署和数据环境。
- 高风险内容和权限变更可能需要 staging，不应只依赖 draft cookie。
面试官追问链
追问一：预览 token 放 cookie 还是 URL？
- 考察点：凭证暴露面。
- 回答方向：URL 只用于一次性引导并尽快换成 HttpOnly cookie，避免被 Referer、日志和分享链接传播。
追问二：为什么发布后还看到旧内容？
- 考察点：失效链路。
- 回答方向：检查 CMS webhook、Data/Full Route/Router/CDN 多层缓存和客户端导航，确认失效标签一致。
追问三：预览页能否复用正式域名？
- 考察点：隔离策略。
- 回答方向：可以但风险更高，必须严格 cookie、noindex、缓存和权限隔离；独立预览域名通常更容易治理。