Data fetching in server components in NextJS - Performance & Optimization

Performance: Data fetching in server components

HIGH IMPACT

This affects the initial page load speed by controlling when and how data is fetched and rendered on the server before sending HTML to the browser.

Fetching data for a page in Next.js

NextJS

export default async function Page() {
  const res = await fetch('https://example.com/api/data');
  const data = await res.json();
  return <div>{data.title}</div>;
}

Data is fetched on the server during rendering, so the browser receives fully rendered HTML immediately.

📈 Performance GainImproves LCP by 300-500ms; no client loading state; reduces client JS execution.

Fetching data for a page in Next.js

NextJS

import React from 'react';

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.title}</div>;
}

Data is fetched on the client after initial HTML loads, causing slower LCP and showing loading states.

📉 Performance CostBlocks meaningful content rendering until client JS runs; increases LCP by 300-500ms or more.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Client-side data fetching with useEffect	Minimal initial DOM, then full update	Multiple reflows due to loading state and data render	Higher paint cost due to incremental updates	[X] Bad
Server component data fetching with async/await	Full DOM ready on first paint	Single reflow on initial load	Lower paint cost with complete HTML	[OK] Good

Rendering Pipeline

Server components fetch data during server rendering, producing complete HTML before sending to the browser. This reduces client-side JavaScript work and speeds up the critical rendering path.

→Server Data Fetching

→HTML Generation

→Network Transfer

→Browser Rendering

⚠️ BottleneckServer Data Fetching can delay HTML generation if slow or blocking.

Core Web Vital Affected

LCP

This affects the initial page load speed by controlling when and how data is fetched and rendered on the server before sending HTML to the browser.

Optimization Tips

1Fetch data in server components to deliver fully rendered HTML for faster LCP.

2Avoid client-side data fetching that delays meaningful content rendering.

3Use caching and parallel requests to minimize server fetch delays.

Performance Quiz - 3 Questions

How does fetching data in Next.js server components affect Largest Contentful Paint (LCP)?

A It has no effect on LCP since data fetching is always client-side.

B It delays LCP because data is fetched after client JS loads.

C It improves LCP by sending fully rendered HTML to the browser.

D It worsens LCP by increasing JavaScript bundle size.

DevTools: Performance

How to check: Record a page load and look for Largest Contentful Paint timing; check if main content appears quickly without loading placeholders.

What to look for: A fast LCP time and absence of long loading or blank states indicate good server data fetching performance.