Interleaving server and client in NextJS - Deep Dive

Overview - Interleaving server and client

What is it?

Interleaving server and client means mixing parts of your web page that run on the server with parts that run in the user's browser. In Next.js, this lets you build pages that load fast and update interactively. Some parts fetch data on the server, while others handle user actions on the client.

Why it matters

Without interleaving, web pages are either fully static or fully dynamic, which can make them slow or less interactive. Interleaving lets you get the best of both worlds: fast loading from the server and smooth user experiences from the client. This improves how users feel about your site and can boost engagement.

Where it fits

Before this, you should understand basic React components and server-side rendering in Next.js. After learning interleaving, you can explore advanced data fetching, client-side state management, and server actions for full-stack apps.

Mental Model

Core Idea

Interleaving server and client means combining server-rendered content with client-side interactive parts in the same page to balance speed and interactivity.

Think of it like...

It's like cooking a meal where some dishes are prepared in the kitchen ahead of time (server) and some are finished or customized at the table by the guest (client). This way, the meal arrives quickly but still feels fresh and personal.

┌───────────────────────────────┐
│          Next.js Page          │
├──────────────┬────────────────┤
│ Server Part  │ Client Part    │
│ (HTML, CSS)  │ (JS, Events)   │
│ - Data fetch │ - User clicks  │
│ - Static     │ - Dynamic UI   │
└──────────────┴────────────────┘

Build-Up - 7 Steps

1

Foundation

Understanding Server Components

Concept: Learn what server components are and how they render on the server before sending HTML to the browser.

In Next.js, server components run only on the server. They fetch data, build HTML, and send it to the browser. They do not include JavaScript for interactivity. This makes pages load fast because the browser gets ready-to-show content.

Result

You get a fast-loading page with content visible immediately, but no interactive features yet.

Understanding server components helps you see how static content can be prepared quickly without waiting for the browser to run JavaScript.

2

Foundation

Understanding Client Components

Concept: Learn what client components are and how they run in the browser to handle user interactions.

Client components include JavaScript that runs in the browser. They can respond to clicks, input, and update the UI dynamically. In Next.js, you mark these with 'use client' at the top of the file.

Result

You get parts of the page that can change after loading, like buttons or forms that react to user actions.

Knowing client components lets you add interactivity where needed without slowing down the whole page.

3

Intermediate

Combining Server and Client Components

🤔Before reading on: do you think client components can include server components inside them, or only the other way around? Commit to your answer.

Concept: Learn how server and client components can be nested to build pages that mix fast loading and interactivity.

In Next.js, server components can include client components inside them, but client components cannot include server components. This means the page starts on the server, then client parts hydrate and become interactive.

Result

You build pages where static content loads first, then interactive parts become ready for user input.

Understanding this nesting rule prevents common errors and helps design components that work together smoothly.

4

Intermediate

Using Async Server Components for Data Fetching

🤔Before reading on: do you think server components can fetch data asynchronously before rendering, or must data be fetched on the client? Commit to your answer.

Concept: Server components can fetch data asynchronously, so the page HTML includes fresh data before sending to the browser.

You can write async functions in server components to get data from databases or APIs. This data is included in the HTML sent to the client, so users see content immediately without waiting for client JavaScript.

Result

Pages show up with real data fast, improving user experience and SEO.

Knowing server components can fetch data async helps you build efficient pages that avoid extra loading spinners.

5

Intermediate

Hydration: Making Server Content Interactive

🤔Before reading on: do you think hydration means reloading the whole page or just activating JavaScript on existing HTML? Commit to your answer.

Concept: Hydration is the process where client JavaScript attaches to server-rendered HTML to enable interactivity.

After the server sends HTML, client components load JavaScript that 'hydrates' the page. This means event handlers and state become active without reloading the page. Hydration bridges static content and dynamic behavior.

Result

Users can interact with buttons, forms, and other UI elements smoothly after the page loads.

Understanding hydration clarifies how static and dynamic parts work together without full page reloads.

6

Advanced

Server Actions: Running Server Code from Client

🤔Before reading on: do you think client components can directly run server code without a network request? Commit to your answer.

Concept: Server actions let client components call server code directly, simplifying data updates and form handling.

Next.js supports server actions that client components can invoke. These run on the server without manual API routes. This reduces client-server complexity and keeps sensitive logic on the server.

Result

You write cleaner code where client UI triggers server logic seamlessly, improving security and developer experience.

Knowing server actions helps you build full-stack features without juggling separate APIs.

7

Expert

Streaming and Progressive Rendering

🤔Before reading on: do you think the server sends the whole page at once or can send parts progressively? Commit to your answer.

Concept: Next.js can stream server-rendered content in chunks, letting the browser show parts of the page as soon as they are ready.

With streaming, server components send HTML progressively. Client components hydrate as their parts arrive. This improves perceived speed, especially on slow networks or large pages.

Result

Users see content faster and can start interacting sooner, even if the whole page isn't fully loaded.

Understanding streaming reveals how Next.js optimizes user experience beyond simple server-client separation.

Under the Hood

Next.js uses React Server Components to render parts of the UI on the server, producing HTML without JavaScript. Client components include JavaScript that runs in the browser. The server sends HTML with placeholders for client components. When the browser loads, it downloads JavaScript bundles for client components and hydrates them, attaching event listeners and state. Server actions are special functions serialized and callable from the client, executed securely on the server. Streaming sends HTML in chunks over HTTP, allowing the browser to progressively render and hydrate parts.

Why designed this way?

This design balances performance and interactivity. Server components reduce JavaScript sent to the client, speeding up load times and improving SEO. Client components add interactivity where needed. Streaming improves perceived performance by showing content early. Server actions simplify full-stack development by avoiding separate API layers. Alternatives like fully client-rendered apps or traditional server rendering either sacrifice speed or interactivity. This hybrid approach leverages modern React features and HTTP capabilities.

┌───────────────┐       ┌───────────────┐
│   Server      │       │   Browser     │
│───────────────│       │───────────────│
│ Server        │       │ Client        │
│ Components   ─┼──────▶│ Components    │
│ (HTML + Data) │       │ (JS + Events) │
│               │       │               │
│ Server Actions│◀──────┤ Calls         │
│               │       │               │
│ Streaming    ─┼──────▶│ Progressive   │
│ (Chunks)      │       │ Rendering     │
└───────────────┘       └───────────────┘

Myth Busters - 4 Common Misconceptions

Quick: Do client components run on the server or only in the browser? Commit to your answer.

Common Belief: Client components run on both the server and the browser.

Reality: Client components run only in the browser; server components run on the server.

Why it matters: Confusing this leads to errors where client-only code tries to run on the server, causing crashes or broken pages.

Quick: Does hydration reload the entire page or just activate JavaScript on existing HTML? Commit to your answer.

Common Belief: Hydration reloads the whole page to make it interactive.

Reality: Hydration only activates JavaScript on the already loaded HTML without reloading the page.

Why it matters: Misunderstanding hydration can cause developers to add unnecessary reloads, harming user experience.

Quick: Can client components include server components inside them? Commit to your answer.

Common Belief: Client components can include server components as children.

Reality: Only server components can include client components; client components cannot include server components.

Why it matters: Ignoring this rule causes build errors and confusion about component structure.

Quick: Do server actions require manual API routes to work? Commit to your answer.

Common Belief: Server actions need separate API endpoints to be called from the client.

Reality: Server actions are called directly from client components without manual API routes.

Why it matters: Not knowing this leads to unnecessary code complexity and duplicated API layers.

Expert Zone

1

Server components can be async and suspend rendering until data is ready, enabling seamless loading states without client JavaScript.

2

Hydration can be partial and selective, meaning only interactive parts hydrate, reducing JavaScript load and improving performance.

3

Streaming HTML allows interleaving of server and client components progressively, but requires careful handling of state and effects to avoid flicker.

When NOT to use

Interleaving is not ideal for fully static sites where no interactivity is needed; static generation is simpler and faster. Also, for highly dynamic apps with complex client state, fully client-rendered React apps or frameworks like Remix might be better. Avoid interleaving if your app requires real-time updates without page reloads; consider client-side state management or WebSockets instead.

Production Patterns

In production, developers use server components for layout and data fetching, embedding client components only where interactivity is needed, like forms or buttons. Server actions handle form submissions and mutations securely without extra API routes. Streaming is used to improve Time to First Byte (TTFB) and Time to Interactive (TTI) on large pages. Code splitting and lazy loading client components optimize bundle size.

Connections

React Server Components

Interleaving builds directly on React Server Components by mixing server and client parts.

Understanding React Server Components clarifies how Next.js separates rendering responsibilities between server and client.

Progressive Web Apps (PWA)

Interleaving supports PWAs by enabling fast initial loads with server content and smooth client interactivity.

Knowing interleaving helps build PWAs that feel fast and responsive on slow networks.

Cooking and Meal Preparation

Both involve preparing some parts ahead (server) and finishing or customizing at serving time (client).

This cross-domain view helps appreciate the balance between pre-preparation and fresh customization in software design.

Common Pitfalls

#1 Trying to import a server component inside a client component.

Wrong approach:

'use client'
import ServerComponent from './ServerComponent';
export default function ClientComp() {
return ;
}

Correct approach:

import ClientComponent from './ClientComponent';
export default function ServerComp() {
return ;
}

Root cause:

Misunderstanding that client components cannot include server components due to runtime environment differences.

#2 Fetching data inside a client component instead of a server component.

Wrong approach:

'use client'
import { useEffect, useState } from 'react';
export default function ClientComp() {
const [data, setData] = useState(null);
useEffect(() => {
fetch('/api/data').then(res => res.json()).then(setData);
}, []);
return {data ? data.message : 'Loading...'};
}

Correct approach:

export default async function ServerComp() {
const res = await fetch('https://api.example.com/data');
const data = await res.json();
return {data.message};
}

Root cause:

Not realizing server components can fetch data before rendering, avoiding client loading states.

#3 Assuming hydration reloads the page to activate interactivity.

Wrong approach:

window.location.reload() after page load to 'hydrate' components.

Correct approach:

Let Next.js automatically hydrate client components without manual reloads.

Root cause:

Confusing hydration with full page reloads, leading to poor user experience.

Key Takeaways

Interleaving server and client components in Next.js balances fast loading and rich interactivity by splitting rendering responsibilities.

Server components run on the server and fetch data before sending HTML, while client components run in the browser to handle user actions.

Hydration connects static server-rendered HTML with client-side JavaScript to enable interactivity without reloading the page.

Server actions let client components call server code directly, simplifying full-stack development without extra API routes.

Streaming and progressive rendering improve perceived performance by sending page parts early and hydrating them incrementally.