Server component database queries in NextJS - Performance & Optimization

Performance: Server component database queries

HIGH IMPACT

This affects the page load speed by controlling when and how data is fetched from the database during server rendering.

Fetching data for a page in Next.js using server components

NextJS

import { fetchData } from '@/lib/db';

export default async function Page() {
  const data = await fetchData();
  return <div>{data.title}</div>;
}

Data is fetched on the server during rendering, so the HTML sent to the client is complete and ready to display.

📈 Performance GainImproves LCP by eliminating client fetch; reduces INP by avoiding loading states; fewer network requests.

Fetching data for a page in Next.js using server components

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>;
}

Fetching data on the client causes extra network requests and delays rendering the main content.

📉 Performance CostBlocks LCP until client fetch completes; adds extra network request; increases INP due to loading state.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Client-side fetch in React useEffect	Adds extra DOM nodes for loading state	Triggers multiple reflows during loading and data update	Higher paint cost due to incremental updates	[X] Bad
Server component async data fetch	Minimal DOM nodes, fully rendered HTML	Single reflow on initial load	Lower paint cost with ready content	[OK] Good

Rendering Pipeline

Server components fetch data during server rendering, producing fully rendered HTML before sending to the browser. This reduces client-side JavaScript execution and network requests.

→Server Data Fetch

→HTML Generation

→Network Transfer

→Client Rendering

⚠️ BottleneckServer Data Fetch can delay HTML generation if queries are slow.

Core Web Vital Affected

LCP

This affects the page load speed by controlling when and how data is fetched from the database during server rendering.

Optimization Tips

1Fetch data in server components to reduce client-side JavaScript and network requests.

2Optimize and cache database queries to speed up server rendering.

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

Performance Quiz - 3 Questions

What is the main performance benefit of fetching data in Next.js server components?

A It increases interactivity by fetching data after page load.

B It delays rendering until all client scripts load.

C It reduces client-side JavaScript and network requests, improving LCP.

D It forces the browser to reflow multiple times.

DevTools: Performance

How to check: Record page load and look for network requests timing and main thread activity; check if main content is rendered quickly without loading states.

What to look for: Short time to first meaningful paint and minimal client-side JavaScript execution indicate good server component data fetching.