Interleaving server and client in NextJS - Step-by-Step Execution

Concept Flow - Interleaving server and client

Start Server Component

↓

Render Server HTML

↓

Insert Client Component Placeholder

↓

Send HTML to Browser

↓

Browser Loads HTML

↓

Hydrate Client Component

↓

Client Component Runs with State & Effects

↓

User Interaction Updates Client State

The server renders HTML with placeholders for client components, sends it to the browser, which then hydrates and runs client code for interactivity.

Execution Sample

NextJS

export default function Page() {
  return (
    <main>
      <ServerContent />
      <ClientWidget />
    </main>
  )
}

A Next.js page rendering server content and a client component together.

Execution Table

Step	Action	Component	Output/State	Notes
1	Start rendering	Page (Server)	Begin rendering server component	Server starts building HTML
2	Render server content	ServerContent	<div>Server data</div>	Static HTML generated
3	Insert client placeholder	ClientWidget	<div id="client-widget"></div>	Placeholder for client component
4	Finish server render	Page (Server)	<main>...</main> HTML sent	Complete HTML sent to browser
5	Browser loads HTML	Browser	Displays server HTML	Static content visible
6	Hydrate client	ClientWidget	Runs React client code	Client JS activates
7	Client state initialized	ClientWidget	State set, effects run	Interactivity ready
8	User interacts	ClientWidget	State updates, UI changes	Dynamic behavior happens
9	End	-	-	Process complete

💡 Client component hydration completes and user interaction updates client state dynamically.

Variable Tracker

Variable	Start	After Step 6	After Step 7	After Step 8	Final
serverHTML	empty	<main>...</main>	<main>...</main>	<main>...</main>	<main>...</main>
clientState	undefined	initialized	set to default	updated by user	latest user state

Key Moments - 3 Insights

Why does the client component show only a placeholder initially?

Because during server rendering, the client component cannot run React code, so Next.js inserts a placeholder div (see execution_table step 3). The real client code runs later in the browser during hydration.

When does the client component become interactive?

After the browser loads the HTML and hydrates the client component (see execution_table steps 6 and 7), React attaches event handlers and initializes state to make it interactive.

Why is server content visible immediately but client content is not?

Server content is rendered as static HTML on the server and sent ready to display (step 2), while client content requires JavaScript to run in the browser to become interactive (step 6).

Visual Quiz - 3 Questions

Look at the execution table, what is the output after step 3?

A Fully interactive client component rendered

B Static HTML with client component placeholder

C Empty page with no content

D Client component state initialized

💡 Hint

Check the 'Output/State' column at step 3 in the execution_table.

At which step does the client component start running React code?

A Step 6

B Step 4

C Step 2

D Step 8

💡 Hint

Look for 'Hydrate client' action in the execution_table.

If the client component state updates after user interaction, which step shows this change?

A Step 5

B Step 7

C Step 8

D Step 3

💡 Hint

See the 'User interacts' action and 'State updates' note in the execution_table.

Concept Snapshot

Interleaving server and client in Next.js:
- Server components render HTML on server.
- Client components render placeholders in server HTML.
- Browser loads HTML, then hydrates client components.
- Hydration runs React client code for interactivity.
- User interactions update client state dynamically.

Full Transcript

In Next.js, server components run on the server to produce static HTML. Client components cannot run on the server, so the server inserts placeholders for them. The browser receives the full HTML and displays the server-rendered content immediately. Then, React hydrates the client components by running their JavaScript code in the browser. This hydration process initializes client state and event handlers, making the client components interactive. When users interact, client state updates and the UI changes dynamically. This interleaving allows fast initial load with server content and rich interactivity with client components.

Practice

1. In Next.js, what is the main benefit of interleaving server and client components?

easy

A. It disables server-side rendering completely.

B. It improves performance by loading data on the server and handling interactions on the client.

C. It forces all components to run only on the client side.

D. It allows you to write all code in one file without separation.

Solution

1. Step 1: Understand server and client roles

   Server components fetch data and render HTML, while client components handle user interactions.

2. Step 2: Identify the benefit of mixing them

   Combining them improves performance by reducing client work and speeding up data loading.

3. Final Answer:

   It improves performance by loading data on the server and handling interactions on the client. -> Option B

4. Quick Check:

   Interleaving = Better performance [OK]

Hint: Remember: server for data, client for interaction [OK]

Common Mistakes:

• Thinking all code runs only on client
• Believing interleaving disables server rendering
• Assuming no performance benefit

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

easy

A. Add client: true in the component's props.

B. Wrap the component with <ClientComponent> tags.

C. Use export default clientComponent() instead of a normal export.

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

Solution

1. Step 1: Recall client component syntax

   Next.js requires 'use client' directive at the top of the file to mark it as client.

2. Step 2: Check other options

   Wrapping tags, special exports, or props flags are not valid Next.js patterns.

3. Final Answer:

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

4. Quick Check:

   Client component directive = 'use client' [OK]

Hint: Look for 'use client' at file top to mark client components [OK]

Common Mistakes:

• Trying to wrap components with special tags
• Using props to mark client components
• Confusing export syntax for client marking

3. Given this Next.js code snippet, what will be rendered on the page?

export default function ServerComponent() {
  const data = fetch('https://api.example.com/data').then(res => res.json());
  return (
    <div>
      <ClientComponent />
      <p>Data loaded</p>
    </div>
  );
}

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

medium

A. Only the paragraph 'Data loaded' because ClientComponent is not marked as client.

B. A button showing 'Clicked 0 times' and a paragraph 'Data loaded'.

C. An error because fetch is used incorrectly in ServerComponent.

D. Nothing renders because ClientComponent is inside ServerComponent.

Solution

1. Step 1: Check ClientComponent usage

   ClientComponent uses useState, so it must be marked with 'use client' directive to work as client component.

2. Step 2: Analyze missing 'use client' directive

   Without 'use client', ClientComponent is treated as server component, but hooks are invalid there, causing it not to render properly.

3. Final Answer:

   Only the paragraph 'Data loaded' because ClientComponent is not marked as client. -> Option A

4. Quick Check:

   Missing 'use client' = ClientComponent won't render [OK]

Hint: Client components need 'use client' directive to render hooks [OK]

Common Mistakes:

• Assuming ClientComponent renders without 'use client'
• Thinking fetch usage causes error here
• Believing nested client components always render

4. Identify the error in this Next.js component interleaving code:

'use client';

export default function ClientComponent() {
  const data = fetch('https://api.example.com/data').then(res => res.json());
  return <div>Data count: {data.length}</div>;
}

medium

A. Missing 'use server' directive at the top of the file.

B. The component should not return JSX inside a client component.

C. Using fetch directly in a client component without async/await causes a Promise error.

D. The fetch URL is invalid syntax.

Solution

1. Step 1: Understand fetch in client components

   fetch returns a Promise; using it directly without awaiting causes data to be a Promise, not the actual data.

2. Step 2: Identify the error in rendering

   Trying to access data.length on a Promise causes runtime error because Promise has no length property.

3. Final Answer:

   Using fetch directly in a client component without async/await causes a Promise error. -> Option C

4. Quick Check:

   Fetch returns Promise; must await in client [OK]

Hint: Always await fetch in client components to get data [OK]

Common Mistakes:

• Thinking 'use server' is needed in client components
• Believing JSX can't be returned in client components
• Assuming fetch URL syntax is wrong

5. You want to display a list of products fetched on the server and allow users to add products to a cart on the client. Which is the best way to interleave server and client components in Next.js?

hard

A. Fetch products in a server component and render a client component for the add-to-cart buttons inside it.

B. Fetch products inside a client component and handle add-to-cart in the same component.

C. Fetch products in a client component and render server components for buttons.

D. Fetch products and handle add-to-cart both in server components only.

Solution

1. Step 1: Separate data fetching and interactivity

   Fetching products is best done on the server for performance and SEO benefits.

2. Step 2: Use client components for user actions

   Add-to-cart buttons require client interactivity, so they should be client components nested inside the server component.

3. Final Answer:

   Fetch products in a server component and render a client component for the add-to-cart buttons inside it. -> Option A

4. Quick Check:

   Server fetch + client interactivity = Fetch products in a server component and render a client component for the add-to-cart buttons inside it. [OK]

Hint: Server fetch data, client handle clicks inside [OK]

Common Mistakes:

• Fetching data on client causing slower load
• Trying to handle interactivity in server components
• Rendering server components inside client components incorrectly