When to keep components on server in NextJS - Performance & Optimization

Performance: When to keep components on server

HIGH IMPACT

This affects the page load speed and interaction responsiveness by controlling what renders on the server versus the client.

Rendering a data-heavy component in Next.js

NextJS

export const dynamic = 'force-static';
export default async function DataComponent() {
  const res = await fetch('https://example.com/api/data');
  const data = await res.json();
  return <div>{data.content}</div>;
}

Fetching and rendering on server sends ready HTML to client, reducing JS bundle and speeding up LCP.

📈 Performance GainImproves LCP by 300-500ms; reduces client JS bundle by 50-100kb.

Rendering a data-heavy component in Next.js

NextJS

import React from 'react';

export default function DataComponent() {
  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.content}</div>;
}

Fetching data and rendering on client causes larger JS bundle and delays content display until JS loads and runs.

📉 Performance CostBlocks LCP until JS is downloaded and executed; adds 50-100kb to client bundle.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Client-side data fetching component	High (many nodes created after JS loads)	Multiple reflows during hydration	High paint cost due to delayed content	[X] Bad
Server-rendered component with data	Low (HTML sent ready)	Single reflow on initial paint	Low paint cost, fast content display	[OK] Good

Rendering Pipeline

Server components are rendered to HTML on the server, then sent to the browser. This skips client JS execution for those parts, reducing layout and paint delays.

→HTML Generation

→Network Transfer

→Client JS Execution

→Paint

⚠️ BottleneckClient JS Execution and Hydration

Core Web Vital Affected

LCP

This affects the page load speed and interaction responsiveness by controlling what renders on the server versus the client.

Optimization Tips

1Render data-fetching components on the server to reduce client JS bundle size.

2Use server components to speed up Largest Contentful Paint (LCP).

3Avoid client-side fetching for initial content to prevent delayed rendering.

Performance Quiz - 3 Questions

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

A Faster initial content display by reducing client JS bundle

B More client-side interactivity by loading all JS upfront

C Increased bundle size for better caching

D Longer hydration time for better SEO

DevTools: Performance

How to check: Record page load and look for long JS execution and hydration phases; check when main content appears.

What to look for: Short JS execution time and early content paint indicate good server component usage.