Server component execution model in NextJS - Performance & Optimization

Performance: Server component execution model

HIGH IMPACT

This affects the initial page load speed and server response time by controlling where components run and how much work is done on the server versus the client.

Rendering UI components efficiently in Next.js

NextJS

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

This server component runs on the server, sending ready HTML to the client with minimal JavaScript.

📈 Performance GainReduces client bundle by 20-50kb, improves LCP by sending pre-rendered HTML

Rendering UI components efficiently in Next.js

NextJS

import React from 'react';

export default function Page() {
  const [count, setCount] = React.useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

This client component runs entirely on the client, increasing JavaScript bundle size and delaying initial paint.

📉 Performance CostAdds 20-50kb to client bundle, blocks LCP until hydration completes

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Client component heavy	Many nodes created on client	Multiple reflows during hydration	High paint cost due to JS execution	[X] Bad
Server component heavy	DOM nodes sent as HTML	Single reflow on initial paint	Low paint cost, minimal JS	[OK] Good

Rendering Pipeline

Server components run on the server to generate HTML before sending to the browser, reducing client JavaScript and speeding up initial rendering. Client components hydrate after load for interactivity.

→Server Rendering

→Network Transfer

→Client Hydration

⚠️ BottleneckClient Hydration can be expensive if too many client components are used

Core Web Vital Affected

LCP

This affects the initial page load speed and server response time by controlling where components run and how much work is done on the server versus the client.

Optimization Tips

1Use server components to reduce client JavaScript and speed up initial paint.

2Minimize client components to lower hydration cost and improve responsiveness.

3Pre-render data on the server to send ready HTML and improve LCP.

Performance Quiz - 3 Questions

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

A They increase client interactivity immediately

B They delay HTML delivery to the browser

C They reduce client JavaScript bundle size

D They require more client CPU to render

DevTools: Performance

How to check: Record page load and look for 'Hydration' phase duration and scripting time

What to look for: Short hydration time and low scripting time indicate good server component usage