Next.js 15 Preview Mode 草稿内容与缓存绕过治理实践

核心价值为编辑者展示草稿内容并绕过静态缓存，确保更新可见。与标签/路径再验证协同，发布后切换到生产缓存策略。启用/关闭预览// app/api/preview/route.ts import { draftMode } from 'next/headers' import { NextResponse } from 'next/server' export const runtime = 'edge' export async function GET(req: Request) { const url = new URL(req.url) const on = url.searchParams.get('on') === '1' const res = NextResponse.redirect(new URL('/', req.url)) if (on) draftMode().enable() else draftMode().disable() return res } RSC 页面条件获取// app/posts/[id]/page.tsx import { draftMode } from 'next/headers' export const revalidate = 300 export default async function Page({ params }: { params: { id: string } }) { const draft = draftMode().isEnabled const post = await fetch(`https://api.example.com/posts/${params.id}`, { cache: draft ? 'no-store' : undefined, next: draft ? undefined : { revalidate: 300, tags: ['posts'] }, }).then(r => r.json()) return <article><h1>{post.title}</h1></article> } 治理建议仅对经过权限校验的用户开放预览入口；关闭预览后触发标签或路径再验证。避免在预览模式下写入缓存；确保草稿与正式内容源区分。结论Preview Mode 为编辑体验提供可靠的缓存绕过渠道。与再验证协同可在发布阶段平滑切换至生产策略，保持性能与一致性。