What can run in server components in NextJS - Performance & Optimization

Performance: What can run in server components

HIGH IMPACT

This affects the initial page load speed and server response time by offloading work from the client to the server.

Rendering data-heavy UI with server-side logic

NextJS

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

Data fetching and rendering happen on the server, sending ready HTML to the client.

📈 Performance GainImproves LCP by delivering pre-rendered content, reduces client JS bundle size.

Rendering data-heavy UI with server-side logic

NextJS

'use client'
import { useState, useEffect } from 'react';

export default function Page() {
  const [data, setData] = useState([]);
  useEffect(() => {
    fetch('/api/data').then(res => res.json()).then(setData);
  }, []);
  return <ClientComponent data={data} />;
}

function ClientComponent({ data }) {
  return <div>{data.map(item => <p key={item.id}>{item.name}</p>)}</div>;
}

Fetching data and rendering on the client increases bundle size and delays content rendering until JS loads.

📉 Performance CostBlocks LCP until client JS loads and runs, increasing time to interactive.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Client-side data fetching and rendering	Many DOM nodes created on client	Multiple reflows during hydration	High paint cost due to delayed content	[X] Bad
Server component rendering with data fetching	DOM nodes sent pre-built	Single reflow on initial paint	Low paint cost with immediate content	[OK] Good

Rendering Pipeline

Server components run on the server, generating HTML before sending it to the browser, reducing client-side JavaScript work.

→Server Rendering

→Network Transfer

→Browser Parsing

→Paint

⚠️ BottleneckServer Rendering time can increase if server components do heavy work.

Core Web Vital Affected

LCP

This affects the initial page load speed and server response time by offloading work from the client to the server.

Optimization Tips

1Run data fetching and rendering in server components to reduce client bundle size.

2Avoid heavy CPU tasks in server components to keep server response fast.

3Use server components to improve Largest Contentful Paint by sending ready HTML.

Performance Quiz - 3 Questions

What is a main performance benefit of running components on the server in Next.js?

A Reduces client JavaScript bundle size and speeds up initial content display

B Increases client interactivity by running more code in the browser

C Delays content rendering until all client scripts load

D Requires more client CPU to render components

DevTools: Performance

How to check: Record a page load and look for time to first contentful paint and scripting time.

What to look for: Shorter scripting time and faster contentful paint indicate good server component usage.