Why data fetching differs in Next.js - Performance Evidence

Performance: Why data fetching differs in Next.js

HIGH IMPACT

Data fetching methods in Next.js affect page load speed and interactivity by controlling when and how data is loaded and rendered.

Fetching data for a page that needs SEO and fast initial load

NextJS

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

export default function Page({ data }) {
  return <div>{data.content}</div>;
}

Fetching data on the server sends fully rendered HTML to the browser, improving LCP and SEO.

📈 Performance GainContent is ready on first paint; reduces LCP by 300-700ms compared to client fetching.

Fetching data for a page that needs SEO and fast initial load

NextJS

export default function Page() {
  const [data, setData] = React.useState(null);
  React.useEffect(() => {
    fetch('/api/data').then(res => res.json()).then(setData);
  }, []);
  if (!data) return <p>Loading...</p>;
  return <div>{data.content}</div>;
}

Fetching data on the client delays content rendering until after JavaScript loads and runs, causing slower LCP and poor SEO.

📉 Performance CostBlocks LCP until JS executes; delays content paint by 200-500ms or more depending on network.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Client-side fetching in useEffect	Low (single root node)	Multiple reflows due to delayed content	High paint cost due to late content	[X] Bad
Server-side rendering with getServerSideProps	Low	Single reflow on initial load	Moderate paint cost, faster LCP	[!] OK
Static generation with getStaticProps + revalidate	Low	Single reflow on initial load	Low paint cost, fastest LCP	[OK] Good
Client-side fetching with SWR for user data	Low	No reflows blocking initial paint	Low paint cost, fast INP	[OK] Good

Rendering Pipeline

Next.js data fetching methods affect how and when HTML is generated and sent to the browser, impacting style calculation, layout, and paint.

→HTML Generation

→Network

→Style Calculation

→Layout

→Paint

⚠️ BottleneckHTML Generation and Network latency during server-side or static generation

Core Web Vital Affected

LCP

Data fetching methods in Next.js affect page load speed and interactivity by controlling when and how data is loaded and rendered.

Optimization Tips

1Use getStaticProps with revalidation for cacheable data to improve LCP.

2Avoid client-side fetching for SEO-critical content to prevent delayed paint.

3Use client-side fetching for dynamic user data to keep initial load fast and interactive.

Performance Quiz - 3 Questions

Which Next.js data fetching method generally provides the fastest Largest Contentful Paint for SEO-critical pages?

A Fetching data inside React component render

B getStaticProps with revalidation

C Client-side fetching inside useEffect

D Fetching data with SWR on client

DevTools: Performance

How to check: Record page load in DevTools Performance tab; look for when main content is painted and when data fetching occurs.

What to look for: Check Largest Contentful Paint timing and network requests; early HTML with data means better LCP.