Next.js › Data Fetching

What is request deduplication in Next.js, and how does it help with data fetching?

Advanced

Answer

Request deduplication automatically combines multiple identical fetch calls made during the same render into a single actual network request, so if several components on the same page happen to request the exact same data, Next.js only fetches it once and shares the result, avoiding unnecessary duplicate work.

// Even if called in multiple components during the same render,
// this fetch is only actually executed once
async function getUser(id) {
  const res = await fetch(`https://api.example.com/users/${id}`);
  return res.json();
}

Real-world example A product page calls a shared getUser function from both the header and the sidebar components, and thanks to request deduplication, only a single network request is actually made even though the function was called twice.

Common follow-ups: Does request deduplication work across different pages or only within a single render?;How does this interact with the fetch cache options like no-store?

Caching;Server Components