"Next.js 15 HTTP 缓存高级策略与 fetch 协同实践：stale-while-revalidate/stale-if-error/ETag"

HTTP 缓存高级策略与 Next.js fetch 协同概述使用 HTTP 指令与 ETag 设计可用性优先的缓存：允许过期内容短期可用并在后台再验证，错误时回退，配合 Next.js fetch 避免重复请求。响应头示例import { NextResponse } from 'next/server' export async function GET() { const data = await list() const res = NextResponse.json(data) res.headers.set('Cache-Control', 'public, max-age=60, stale-while-revalidate=300, stale-if-error=600') res.headers.set('ETag', hash(data)) return res } 客户端再验证与 ETagexport async function fetchWithETag(url: string, etag?: string) { const res = await fetch(url, { headers: etag ? { 'If-None-Match': etag } : {} }) if (res.status === 304) return { fromCache: true } return { data: await res.json(), etag: res.headers.get('ETag') } } Next.js fetch 协同// RSC 中避免重复：背景再验证 const data = await fetch('https://api.example.com/list', { next: { revalidate: 300 } }).then(r => r.json()) 回退策略失败时使用 `stale-if-error` 提供旧内容；记录错误并降级展示。技术参数与验证LCP 保持；错误期间页面可用；再验证成功率高；重复请求降低。---发布信息：已发布 · 技术验证 · 阅读 34 分钟 · CC BY-SA 4.0