Client component boundaries in NextJS - Performance & Optimization

Performance: Client component boundaries

HIGH IMPACT

This affects how much JavaScript is sent to the browser and how fast the page becomes interactive.

Separating interactive UI parts from static content

NextJS

import React from 'react';
import Counter from './Counter';

export default function Page() {
  return (
    <div>
      <h1>Welcome</h1>
      <Counter />
      <p>Static content here</p>
    </div>
  );
}

// Counter.tsx
'use client';
import React from 'react';
function Counter() {
  const [count, setCount] = React.useState(0);
  return <button onClick={() => setCount(count + 1)}>Count: {count}</button>;
}

export default Counter;

Only the interactive Counter is a client component, so less JS is sent and hydration is faster.

📈 Performance GainSaves 40-80kb in main bundle, reduces hydration time, improves INP

Separating interactive UI parts from static content

NextJS

'use client';

import React from 'react';

export default function Page() {
  // Entire page is a client component
  const [count, setCount] = React.useState(0);
  return (
    <div>
      <h1>Welcome</h1>
      <button onClick={() => setCount(count + 1)}>Count: {count}</button>
      <p>Static content here</p>
    </div>
  );
}

The whole page is a client component, so all JavaScript for interactivity is sent and run even for static parts.

📉 Performance CostAdds 50-100kb to client bundle, delays hydration, blocks interaction until JS loads

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Whole page as client component	High (all nodes hydrated)	Multiple reflows during hydration	High paint cost due to JS execution	[X] Bad
Small isolated client components	Low (only interactive parts hydrated)	Single reflow per component	Lower paint cost, faster interaction	[OK] Good

Rendering Pipeline

Client components require JavaScript to hydrate and become interactive, affecting the hydration and interaction phases.

→JavaScript Parsing

→Hydration

→Interaction

⚠️ BottleneckHydration blocking interaction until JS loads and runs

Core Web Vital Affected

INP

This affects how much JavaScript is sent to the browser and how fast the page becomes interactive.

Optimization Tips

1Only mark components as client if they need interactivity.

2Keep client components as small and focused as possible.

3Use server components for static content to reduce JS sent.

Performance Quiz - 3 Questions

What is the main performance benefit of limiting client components to small interactive parts?

A Increases server rendering time

B Reduces JavaScript bundle size and speeds up hydration

C Improves CSS loading speed

D Reduces image download size

DevTools: Performance

How to check: Record a page load and interaction; look for long hydration tasks and JS parsing times.

What to look for: Long blocking time before first input responsiveness indicates large client components.