Server and client component composition in NextJS - Step-by-Step Execution

Concept Flow - Server and client component composition

Start: Server Component

↓

Render Server Component

↓

Include Client Component

↓

Send HTML to Browser

↓

Browser Loads Client Component JS

↓

Client Component Hydrates and Runs

↓

User Interacts with Client Component

↓

Client Component Updates UI

↓

End

The server component renders first and includes the client component. The browser receives HTML, then loads and runs the client component for interactivity.

Execution Sample

NextJS

'use client'
import { useState } from 'react'

function ClientComp() {
  const [count, setCount] = useState(0)
  return <button onClick={() => setCount(count + 1)}>Clicked {count} times</button>
}

export default function ServerComp() {
  return (
    <div>
      <h1>Server Side</h1>
      <ClientComp />
    </div>
  )
}

A server component renders a heading and a client component button that counts clicks.

Execution Table

Step	Action	Component	State Before	State After	Output/Effect
1	Start rendering	ServerComp	N/A	N/A	Begin server render
2	Render <h1>	ServerComp	N/A	N/A	<h1>Server Side</h1> created
3	Render <ClientComp /> placeholder	ServerComp	N/A	N/A	Client component placeholder inserted
4	Send HTML to browser	ServerComp	N/A	N/A	HTML with <h1> and client placeholder sent
5	Browser loads ClientComp JS	ClientComp	count=undefined	count=0	Client component JS loaded, state initialized
6	Render ClientComp button	ClientComp	count=0	count=0	Button shows 'Clicked 0 times'
7	User clicks button	ClientComp	count=0	count=1	Button updates to 'Clicked 1 times'
8	User clicks button again	ClientComp	count=1	count=2	Button updates to 'Clicked 2 times'
9	No more actions	N/A	N/A	N/A	Execution ends, UI interactive

💡 User stops interacting; client component maintains state on client side.

Variable Tracker

Variable	Start	After Step 5	After Step 7	After Step 8	Final
count	undefined	0	1	2	2

Key Moments - 3 Insights

Why does the server component render first before the client component?

Because the server component runs on the server to generate HTML, and the client component is included as a placeholder to hydrate later in the browser (see execution_table steps 1-4).

How does the client component keep track of clicks after the page loads?

The client component uses React state initialized in the browser (count=0 at step 5) and updates it on user clicks (steps 7 and 8), which only happens on the client side.

Why can't the server component handle the button clicks?

Server components do not run in the browser and cannot handle user events; only client components can run JavaScript and respond to interactions (see execution_table steps 7 and 8).

Visual Quiz - 3 Questions

Look at the execution table, what is the value of 'count' after the first user click?

A 2

B 1

C 0

D undefined

💡 Hint

Check the 'State After' column for ClientComp at step 7.

At which step does the browser load the client component JavaScript?

A Step 3

B Step 2

C Step 5

D Step 6

💡 Hint

Look for the action describing loading ClientComp JS in the execution_table.

If the client component was removed from the server component, what would happen?

A No button would appear or be interactive.

B The server component would handle clicks instead.

C The button would still appear and work.

D The page would crash.

💡 Hint

Refer to the execution_table steps 3 and 7 where ClientComp is rendered and interacts.

Concept Snapshot

Server components render on the server and send HTML to the browser.
Client components run in the browser for interactivity.
Server components can include client components.
Client components manage state and user events.
This composition allows fast server rendering plus dynamic UI.

Full Transcript

In Next.js, server components run on the server to generate HTML. They can include client components as placeholders. The browser receives the HTML and then loads the client component JavaScript. The client component initializes its state and renders interactive UI elements like buttons. When the user interacts, the client component updates its state and UI without needing to go back to the server. This separation lets the app render fast on the server and stay interactive on the client.

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