Request memoization in NextJS - Performance & Optimization

Performance: Request memoization

MEDIUM IMPACT

Request memoization improves page load speed by avoiding repeated data fetching and reduces server load and client wait times.

Fetching data multiple times for the same request in Next.js components

NextJS

export async function getServerSideProps(context) {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();
  return { props: { data1: data, data2: data } };
}

Fetch data once and reuse it, reducing network calls and server load.

📈 Performance GainSingle network request; halves data fetching time and server processing.

Fetching data multiple times for the same request in Next.js components

NextJS

export async function getServerSideProps(context) {
  const res1 = await fetch('https://api.example.com/data');
  const data1 = await res1.json();
  const res2 = await fetch('https://api.example.com/data');
  const data2 = await res2.json();
  return { props: { data1, data2 } };
}

Fetching the same data twice causes duplicate network requests, increasing load time and server work.

📉 Performance CostBlocks rendering until both fetches complete; doubles network latency and server processing.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Duplicate fetch calls	Multiple fetch triggers	Multiple reflows due to delayed data	Higher paint cost from repeated updates	[X] Bad
Single fetch with memoization	Single fetch triggers	Single reflow after data arrives	Lower paint cost with stable data	[OK] Good

Rendering Pipeline

Request memoization reduces the number of network requests, which decreases blocking time during the critical rendering path. It minimizes layout recalculations and repaints caused by delayed data arrival.

→Network

→JavaScript Execution

→Layout

→Paint

⚠️ BottleneckNetwork latency and JavaScript execution waiting on fetch responses

Core Web Vital Affected

LCP

Request memoization improves page load speed by avoiding repeated data fetching and reduces server load and client wait times.

Optimization Tips

1Always cache or reuse identical fetch requests to reduce network overhead.

2Avoid multiple fetch calls for the same data within the same render cycle.

3Use memoization to improve Largest Contentful Paint by speeding data availability.

Performance Quiz - 3 Questions

What is the main performance benefit of request memoization in Next.js?

A Increases the number of server requests for better caching

B Reduces duplicate network requests and speeds up page load

C Delays rendering until all requests complete

D Adds extra JavaScript to bundle size

DevTools: Network

How to check: Open DevTools, go to Network tab, reload page, and look for repeated identical requests to the same URL.

What to look for: Multiple identical fetch requests indicate missing memoization; a single request reused is optimal.