Next.js 15 RSC 请求级别去重与 fetch 去重实践 Request Memoization-Deduplication

概览在 RSC 中，Next.js 对相同输入的 `fetch` 执行请求级别去重（memoization），同一渲染周期内多处调用将复用结果。配合 `revalidate/tags` 可实现高效与一致的数据获取。多处调用复用// app/posts/[id]/A.tsx

export async function A({ id }: { id: string }) {

const p = await fetch(`https://api.example.com/posts/${id}`, { next: { revalidate: 300, tags: ['posts'] } }).then(r => r.json())

return <p>A:{p.title}</p>

}

// app/posts/[id]/B.tsx

export async function B({ id }: { id: string }) {

const p = await fetch(`https://api.example.com/posts/${id}`, { next: { revalidate: 300, tags: ['posts'] } }).then(r => r.json())

return <p>B:{p.title}</p>

}

// app/posts/[id]/page.tsx

export default async function Page({ params }: { params: { id: string } }) {

return (

<div>

{/* @ts-expect-error RSC */}

<A id={params.id} />

{/* @ts-expect-error RSC */}

<B id={params.id} />

</div>

)

}

动态数据与跳过缓存// 对实时路径使用 no-store，禁用去重并始终拉取最新

export async function Live() {

const live = await fetch('https://api.example.com/live', { cache: 'no-store' }).then(r => r.json())

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

}

治理要点在 RSC 中对相同输入的 fetch 可复用结果；避免在客户端重复拉取。使用 `revalidate/tags` 管理更新频率与失效，保持一致性。对必须实时的数据使用 `no-store`；注意不要误用导致频繁请求。验证与指标Next.js：15.0+；Node.js：20.x多处调用复用稳定；数据一致且更新可控