Q28: How does Request Memoization work across React Server Component trees?
React automatically extends native fetch() to deduplicate identical GET requests made across different components within the same render tree cycle. If 5 components call fetch('https://api.com/user'), Next.js executes the network call only once and shares the response.
Fetch Deduplication in Subcomponents
// Component A & Component B both execute this simultaneously during render:
const user = await fetch('https://api.com/user').then(r => r.json());
// Request Memoization executes the HTTP call ONCE and shares the promise!💡 Components fetch data independently without triggering duplicate network calls.
Key Takeaways
- Deduplicates identical GET fetch requests within a single server render pass.
- Eliminates the need to fetch data at root layouts and drill props down to children.
Knowledge Check
If three separate Server Components in the same render tree execute fetch('https://api.com/settings'), how many network calls are made to the external API?