Use server directive in NextJS - Performance & Optimization

Performance: Use server directive

HIGH IMPACT

This affects the initial page load speed by moving component rendering to the server, reducing client JavaScript and improving Largest Contentful Paint (LCP).

Rendering a component that does not need client interactivity

NextJS

"use server";
export default function MyComponent() {
  return <p>This is static content rendered on the server.</p>;
}

The server directive forces rendering on the server, eliminating client JavaScript and speeding up initial paint.

📈 Performance GainSaves 5-10kb client bundle, reduces LCP by 100-200ms, no hydration needed

Rendering a component that does not need client interactivity

NextJS

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

This component is client-side rendered by default, adding JavaScript to the client bundle even if interactivity is not needed.

📉 Performance CostAdds ~5-10kb to client bundle, blocks rendering until hydration, increases LCP by 100-200ms

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Client Component without server directive	High (due to hydration)	Multiple reflows during hydration	High paint cost due to JS execution	[X] Bad
Server Component with server directive	Low (static HTML)	Single reflow on initial paint	Low paint cost, no JS execution	[OK] Good

Rendering Pipeline

With the server directive, rendering happens entirely on the server. The browser receives fully rendered HTML, skipping hydration and client JavaScript execution for that component.

→Server Rendering

→Network Transfer

→HTML Parsing

→Paint

⚠️ BottleneckClient-side hydration and JavaScript execution

Core Web Vital Affected

LCP

This affects the initial page load speed by moving component rendering to the server, reducing client JavaScript and improving Largest Contentful Paint (LCP).

Optimization Tips

1Use the server directive to render components on the server and reduce client JavaScript.

2Avoid client-side hydration costs by shifting static content rendering to the server.

3Improving server rendering directly benefits Largest Contentful Paint (LCP).

Performance Quiz - 3 Questions

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

A Enables client-side interactivity faster

B Reduces client JavaScript bundle size by rendering on the server

C Increases the number of DOM nodes for better SEO

D Delays rendering until user interaction

DevTools: Performance

How to check: Record a page load and look for scripting time and hydration phases in the flame chart.

What to look for: Long scripting blocks and hydration markers indicate client rendering; absence means server rendering is used.