Fetch in server components in NextJS - Performance & Optimization

Performance: Fetch in server components

MEDIUM IMPACT

Fetching data in server components affects the initial page load speed and server response time.

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

Fetching data on the server allows HTML to be sent with data already included, speeding up initial paint and reducing layout shifts.

📈 Performance GainImproves LCP by sending fully rendered HTML; reduces INP by avoiding client fetch delays.

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

Fetching data on the client delays content rendering until JavaScript runs, causing slower LCP and potential layout shifts.

📉 Performance CostBlocks meaningful paint until JS loads and runs; increases INP due to delayed interactivity.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Client fetch in useEffect	Low initially, then updates DOM	Multiple reflows due to loading state and data update	Higher paint cost due to delayed content	[X] Bad
Server fetch in server component	DOM fully rendered once	Single reflow on initial paint	Lower paint cost with immediate content	[OK] Good

Rendering Pipeline

Server components fetch data during server rendering, so the browser receives fully rendered HTML. This reduces client-side JavaScript work and speeds up the critical rendering path.

→Server Data Fetch

→HTML Generation

→Browser Paint

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

Core Web Vital Affected

LCP

Fetching data in server components affects the initial page load speed and server response time.

Optimization Tips

1Fetch data in server components to send fully rendered HTML to the browser.

2Avoid client-side fetching for initial page data to improve LCP.

3Cache server fetches to reduce server response time and speed up rendering.

Performance Quiz - 3 Questions

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

A It has no effect on LCP.

B It delays LCP because data is fetched on the client.

C It improves LCP by sending fully rendered HTML with data.

D It increases layout shifts during loading.

DevTools: Performance

How to check: Record page load and look for Largest Contentful Paint timing. Check if main content appears early or after JS execution.

What to look for: Early LCP event with server fetch; delayed LCP with client fetch and loading states.