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.