Mocking data fetching in NextJS - Performance & Optimization

Performance: Mocking data fetching

MEDIUM IMPACT

Mocking data fetching affects page load speed and interaction responsiveness by simulating network calls without real server delays.

Simulating data fetching during development

NextJS

export async function getServerSideProps() {
  const data = { id: 1, name: 'Mocked Item' };
  return { props: { data } };
}

Returns data immediately without network delay, speeding up page load and interaction.

📈 Performance Gainnon-blocking, zero network delay, faster INP

Simulating data fetching during development

NextJS

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

This makes a real network request on every page load, slowing down development and testing.

📉 Performance Costblocks rendering for 200-500ms per request depending on network

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Real network fetch on each load	Minimal	1 reflow after data arrives	Moderate paint cost due to delayed content	[X] Bad
Mocked data returned immediately	Minimal	1 reflow immediately	Low paint cost with instant content	[OK] Good

Rendering Pipeline

Mocking data fetching bypasses the network request stage, allowing the browser to receive data immediately and proceed with rendering faster.

→Network Request

→JavaScript Execution

→Rendering

⚠️ BottleneckNetwork Request

Core Web Vital Affected

INP

Mocking data fetching affects page load speed and interaction responsiveness by simulating network calls without real server delays.

Optimization Tips

1Use mocked data to avoid network delays during development.

2Switch to real data fetching before production to ensure accuracy.

3Mocked data improves interaction responsiveness by eliminating fetch wait times.

Performance Quiz - 3 Questions

What is the main performance benefit of mocking data fetching in Next.js during development?

A It reduces the bundle size by removing data fetching code.

B It eliminates network latency, speeding up page load and interaction.

C It improves SEO by preloading real data.

D It decreases the number of DOM nodes rendered.

DevTools: Network

How to check: Open DevTools, go to Network tab, reload page, and observe if data fetch requests are made or if data is served instantly.

What to look for: Presence of network requests and their timing; mocked data shows no network delay.