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.

Practice

1. Which statement best describes a server component in Next.js?

easy

A. It runs in the browser and handles user interactions.

B. It is used only for styling components.

C. It renders on the server and cannot use browser-only APIs.

D. It requires client-side JavaScript to render.

Solution

1. Step 1: Understand server component behavior

   Server components render on the server and do not have access to browser APIs like window or document.

2. Step 2: Compare with client components

   Client components run in the browser and handle user interactions, unlike server components.

3. Final Answer:

   It renders on the server and cannot use browser-only APIs. -> Option C

4. Quick Check:

   Server component = renders on server [OK]

Hint: Server components run on server, no browser APIs [OK]

Common Mistakes:

• Confusing server components with client components
• Thinking server components handle user events
• Assuming server components require client JS

2. Which of the following is the correct way to mark a React component as a client component in Next.js?

easy

A. Use export default client() instead of export default.

B. Wrap the component with <ClientComponent> tag.

C. Import the component from next/client package.

D. Add the directive "use client" at the top of the file.

Solution

1. Step 1: Recall client component syntax

   In Next.js, to mark a component as client-side, you add the directive "use client" at the very top of the file.

2. Step 2: Evaluate other options

   Wrapping with a tag or importing from next/client is not valid syntax. Exporting with client() is not a Next.js pattern.

3. Final Answer:

   Add the directive "use client" at the top of the file. -> Option D

4. Quick Check:

   Client component = "use client" directive [OK]

Hint: Look for "use client" at file top to mark client component [OK]

Common Mistakes:

• Trying to wrap components with special tags
• Importing from non-existent packages
• Misusing export syntax for client components

3. Given the following code, what will be rendered on the page?

/* ServerComponent.jsx */
export default function ServerComponent() {
  return (
    

      
Server
      
    
  );
}

/* ClientComponent.jsx */
"use client";
export default function ClientComponent() {
  return Click me;
}

medium

A. Error: ClientComponent cannot be used inside ServerComponent

B. ServerClick me

C. Server

D. Click me

Solution

1. Step 1: Understand component composition

   The ServerComponent renders on the server and includes ClientComponent inside its JSX.

2. Step 2: Client component renders on client

   ClientComponent marked with "use client" runs in the browser and renders a button.

3. Final Answer:

   <div><h1>Server</h1><button>Click me</button></div> -> Option B

4. Quick Check:

   Server + Client components compose to render combined output [OK]

Hint: Server can include client components; client renders interactive parts [OK]

Common Mistakes:

• Thinking client components cannot be nested inside server components
• Expecting only server content to render
• Confusing error with valid composition

4. What is the main issue with this code snippet?

"use client";
export default function ServerComponent() {
  return 
Server content
;
}

medium

A. There is no issue; this code works fine.

B. Client components cannot be named ServerComponent.

C. The component is marked as client but named ServerComponent, causing confusion.

D. Server components cannot have "use client" directive; this causes a runtime error.

Solution

1. Step 1: Analyze the "use client" directive usage

   The directive "use client" marks the component as a client component, so it runs in the browser.

2. Step 2: Check component naming and behavior

   The name ServerComponent is misleading, but component names do not dictate behavior. The "use client" directive determines it is a client component. There are no syntax errors or runtime issues; the code is valid.

3. Final Answer:

   There is no issue; this code works fine. -> Option A

4. Quick Check:

   "use client" determines client behavior regardless of name [OK]

Hint: Directives like "use client" control behavior, not component names [OK]

Common Mistakes:

• Thinking "use client" causes runtime errors
• Believing component names enforce server/client type
• Assuming directive + server name = error

5. You want to build a Next.js page that fetches data on the server and displays it, but also includes a button that updates the UI on click. How should you compose your components?

hard

A. Create a server component to fetch and display data, then include a client component for the button inside it.

B. Make the entire page a client component to handle data fetching and button clicks.

C. Use only server components and handle button clicks with server-side events.

D. Fetch data in a client component and render the button in a server component.

Solution

1. Step 1: Separate data fetching and interactivity

   Data fetching is best done in server components for performance and security.

2. Step 2: Use client component for UI interaction

   The button requires client-side interactivity, so it should be a client component nested inside the server component.

3. Final Answer:

   Create a server component to fetch and display data, then include a client component for the button inside it. -> Option A

4. Quick Check:

   Server fetch + client button = best practice [OK]

Hint: Fetch on server, interactive parts on client components [OK]

Common Mistakes:

• Making entire page client component losing server benefits
• Trying to handle clicks only on server
• Fetching data inside client component unnecessarily