Client component boundaries in NextJS - Step-by-Step Execution

Concept Flow - Client component boundaries

Start Server Component

↓

Render Server Component

↓

Detect Client Component Import

↓

Mark Boundary: Client Component

↓

Load Client Component Separately

↓

Hydrate Client Component on Browser

↓

User Interaction Handled Client-Side

↓

Update Client Component State

↓

Re-render Client Component

↓

Server Component Remains Static

This flow shows how Next.js separates server and client components, marking boundaries and hydrating client parts for interactivity.

Execution Sample

NextJS

import Counter from './Counter';

export default function Page() {
  return <Counter />;
}

A server component imports a client component Counter, creating a client boundary.

Execution Table

Step	Action	Component Type	Boundary Detected	Result
1	Start rendering Page	Server	No	Server component starts rendering
2	Import Counter component	Client	Yes	Boundary marked: Counter is client
3	Render Server component content	Server	No	Server content rendered without Counter
4	Load Counter separately	Client	Yes	Client component code sent to browser
5	Hydrate Counter on browser	Client	Yes	Counter becomes interactive
6	User clicks button in Counter	Client	Yes	State updates and re-renders Counter
7	Server component remains static	Server	No	No re-render on server
8	End	-	-	Rendering complete with client boundary

💡 Rendering stops after client component hydration and user interaction handled client-side.

Variable Tracker

Variable	Start	After Step 2	After Step 5	After Step 6	Final
Page Render	Not started	Started	Server content rendered	Server content rendered	Complete
Counter Loaded	No	Detected as client	Hydrated on browser	State updated	Interactive
Client Boundary	No	Yes	Yes	Yes	Yes

Key Moments - 2 Insights

Why does Next.js mark a client component boundary when importing a client component inside a server component?

Because the client component needs to run in the browser for interactivity, Next.js separates it to hydrate and handle state client-side, as shown in steps 2 and 4 of the execution_table.

Does the server component re-render when the client component state changes?

No, the server component remains static after initial render. Only the client component re-renders on state changes, as shown in steps 6 and 7.

Visual Quiz - 3 Questions

Look at the execution table, at which step is the client component hydrated on the browser?

A Step 5

B Step 3

C Step 2

D Step 7

💡 Hint

Check the 'Action' and 'Result' columns for hydration details.

According to the variable tracker, when does the 'Counter Loaded' variable change to 'Hydrated on browser'?

A After Step 2

B After Step 5

C After Step 6

D At Start

💡 Hint

Look at the 'Counter Loaded' row and its values across steps.

If the client component did not update state on user interaction, which step in the execution table would be missing?

A Step 1

B Step 4

C Step 6

D Step 8

💡 Hint

Step 6 describes state update and re-render on user interaction.

Concept Snapshot

Next.js Client Component Boundaries:
- Server components render on server.
- Importing a client component creates a boundary.
- Client components load separately and hydrate in browser.
- Client handles state and interactivity.
- Server components stay static after initial render.

Full Transcript

In Next.js, when a server component imports a client component, Next.js marks a client boundary. The server component renders on the server without the client component's interactive parts. The client component code is sent separately to the browser, where it hydrates and becomes interactive. User actions update client component state and cause re-renders only on the client side. The server component remains static after initial render. This separation allows efficient rendering and interactivity.