# Duplicate network requests in Next.js

> How to fix duplicate network requests in Next.js — with the exact fix and copy-paste code.

_Category: Performance · Detector `duplicate-requests` · Severity: warning_

When several components each fetch the same endpoint, you pay for the same data multiple times — wasted bandwidth, extra server load, slower time-to-content, and the risk that responses arrive out of order and overwrite each other. It is endemic in AI-built frontends because each component is generated in isolation, so each one fetches what it needs independently instead of sharing.

## The fix for Next.js

In Server Components, wrap the fetcher in React’s `cache()` so repeat calls in one render dedupe; native `fetch` is also automatically memoized per request. That removes duplicate reads without a client cache.

```tsx
import { cache } from 'react'
export const getUser = cache(async (id: string) => {
  const res = await fetch(`/api/users/${id}`)
  return res.json()
}) // called in many components → fetched once per request
```

[Next.js docs](https://nextjs.org/docs/app/deep-dive/caching#request-memoization)

### Steps

1. Adopt a query cache (or a shared in-flight promise map) that dedupes by key
2. Give the same resource the same query key everywhere it’s used
3. Debounce search/autocomplete and cache responses on the server

## How VibeCheck detects it

The `duplicate-requests` detector flags this live in the browser and reports it to the widget's Problems list — and to your coding agent over MCP.

- **Issue string:** `Duplicate GET request`
- **Threshold:** The same method + URL requested 2 or more times within 2 seconds

## FAQ

### Is fetching the same URL twice always a bug?

Not always — polling or intentional revalidation is fine. VibeCheck flags the same method+URL hitting 2+ times within 2 seconds, which almost always means two components fetched independently rather than sharing.

### Does HTTP caching solve this?

`Cache-Control` helps the browser reuse responses, but the requests are still made and can still race. Client-side dedup (a query cache or shared promise) prevents the duplicate calls in the first place.

### Why do my duplicates come in bursts on mount?

Because several components mount together and each kicks off its own fetch. Sharing one query key (or lifting the fetch to a parent/loader) collapses them into a single request.

See the general, framework-agnostic fix: https://vibecheck.wcgw.fun/fix/duplicate-network-requests.md

---

Fix guide from VibeCheck — https://vibecheck.wcgw.fun/fix/duplicate-network-requests. Full site index for LLMs: https://vibecheck.wcgw.fun/llms.txt