Server and client component composition in NextJS - Performance & Optimization

Performance: Server and client component composition

HIGH IMPACT

This affects the initial page load speed and interactivity by deciding what renders on the server versus the client.

Building a page with both static content and interactive UI elements

NextJS

import Counter from './CounterClient';

export default function Page() {
  return (
    <div>
      <h1>Welcome to the site</h1>
      <Counter />
    </div>
  );
}

// CounterClient.jsx
'use client';
import React from 'react';
export default function Counter() {
  const [count, setCount] = React.useState(0);
  return <button onClick={() => setCount(count + 1)}>Clicked {count} times</button>;
}

Static content renders on server immediately; interactive part loads separately on client, reducing blocking time.

📈 Performance GainImproves LCP by server rendering static parts; reduces client bundle size; faster interactivity (INP)

Building a page with both static content and interactive UI elements

NextJS

'use client';
import React from 'react';
export default function Page() {
  const [count, setCount] = React.useState(0);
  return (
    <div>
      <h1>Welcome to the site</h1>
      <button onClick={() => setCount(count + 1)}>Clicked {count} times</button>
    </div>
  );
}

The entire component is a client component, so it delays initial HTML rendering and increases JavaScript bundle size.

📉 Performance CostBlocks LCP until JS loads and hydrates; adds 30-50kb to client bundle

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
All client component	High (full DOM built on client)	Multiple reflows during hydration	High paint cost due to delayed HTML	[X] Bad
Server component with client child	Low (static DOM from server)	Single reflow on initial load	Low paint cost, fast HTML paint	[OK] Good

Rendering Pipeline

Server components render HTML on the server, sending ready content to the browser. Client components load JavaScript to enable interactivity after hydration.

→HTML Generation

→JavaScript Parsing

→Hydration

→Paint

⚠️ BottleneckHydration of client components delays interactivity and blocks INP

Core Web Vital Affected

LCP, INP

This affects the initial page load speed and interactivity by deciding what renders on the server versus the client.

Optimization Tips

1Render static content as server components to speed up initial load (LCP).

2Use client components only for interactive parts to minimize hydration cost.

3Split UI into server and client components to balance fast loading and interactivity.

Performance Quiz - 3 Questions

What is the main performance benefit of using server components for static content?

A They reduce JavaScript bundle size and improve initial HTML load speed.

B They allow all interactivity to happen on the server.

C They increase client-side rendering time.

D They delay the first paint until JavaScript loads.

DevTools: Performance

How to check: Record page load and look for 'Hydrate' events and scripting time; check when main content paints and when interactivity is ready.

What to look for: Shorter time to first contentful paint and reduced hydration scripting time indicate good server/client composition.