Next.js 15 Conditional GET ETag If-None-Match 实践

核心价值通过 ETag 与 If-None-Match 实现条件 GET，减少重复传输。在 Edge Runtime 下使用 Web Crypto 生成强校验 ETag。与缓存头协同，确保新鲜度与一致性。Route Handler 实现export const runtime = 'edge'

async function strongETag(input: string) {

const data = new TextEncoder().encode(input)

const digest = await crypto.subtle.digest('SHA-256', data)

const bytes = new Uint8Array(digest)

let b64 = ''

for (let i = 0; i < bytes.length; i++) b64 += String.fromCharCode(bytes[i])

const base64 = btoa(b64)

return `"sha256-${base64}"`

}

export async function GET(req: Request) {

const data = { id: 1, title: 'Post', updatedAt: 1732500000 }

const body = JSON.stringify(data)

const etag = await strongETag(body)

const inm = req.headers.get('if-none-match')

if (inm && inm === etag) {

return new Response(null, {

status: 304,

headers: {

ETag: etag,

'Cache-Control': 'public, max-age=0, must-revalidate, s-maxage=300',

},

})

}

return new Response(body, {

headers: {

'Content-Type': 'application/json; charset=utf-8',

ETag: etag,

'Cache-Control': 'public, max-age=0, must-revalidate, s-maxage=300',

},

})

}

要点使用强 ETag 表示响应实体唯一性，匹配后返回 304 并携带相同 ETag。`Cache-Control` 以 `must-revalidate` 指示客户端在过期后与服务器协商一致性，结合 `s-maxage` 优化中间层缓存。与应用协同export default async function Page() {

const res = await fetch('https://example.com/api/posts/1', {

cache: 'force-cache',

next: { revalidate: 60 },

})

const data = await res.json()

return <pre>{JSON.stringify(data, null, 2)}</pre>

}

结论条件 GET 在网络层减少冗余传输，与 Next.js 缓存与再验证策略协作，可在高并发与动态更新场景中有效降低成本并保持一致性。