Server and client component composition in NextJS - Deep Dive

Overview - Server and client component composition

What is it?

Server and client component composition in Next.js means building parts of a web page that run on the server and parts that run in the browser, then combining them smoothly. Server components generate HTML on the server, while client components handle interactive features in the browser. This approach helps create fast, dynamic web apps by using the best place for each part. It lets developers write components that work together but run where they perform best.

Why it matters

Without this separation, web apps either send too much JavaScript to the browser or lose interactivity. Server and client component composition solves this by sending only the needed code to the browser, making pages load faster and feel snappy. It also helps developers organize code better and avoid bugs caused by mixing server and browser logic. This improves user experience and developer productivity.

Where it fits

Before learning this, you should understand React components and basic Next.js routing. After this, you can explore advanced data fetching, server actions, and state management in Next.js. This topic fits in the middle of learning modern Next.js app development with the App Router.

Mental Model

Core Idea

Server components build static parts on the server, client components add interactivity in the browser, and composing them lets you balance speed and dynamic behavior.

Think of it like...

It's like cooking a meal where the chef prepares the main dish in the kitchen (server) and the waiter adds fresh toppings at the table (client). The meal is ready faster and tastes better because each part is done where it works best.

┌───────────────┐       ┌───────────────┐
│ ServerComponent│──────▶│ Render HTML   │
└───────────────┘       └───────────────┘
          │                      ▲
          ▼                      │
┌───────────────┐       ┌───────────────┐
│ ClientComponent│◀─────│ Add Interactivity│
└───────────────┘       └───────────────┘

Build-Up - 7 Steps

1

Foundation

Understanding React Components Basics

Concept: Learn what React components are and how they build UI pieces.

React components are like building blocks for web pages. Each component is a function that returns HTML-like code called JSX. Components can be simple, showing text or images, or complex, with buttons and forms. They help organize UI into small, reusable parts.

Result

You can create simple UI pieces that show content on a page.

Understanding components is essential because server and client components are just special kinds of React components.

2

Foundation

Next.js Server Components Introduction

Concept: Learn that server components run only on the server and send HTML to the browser.

In Next.js, server components generate HTML on the server before sending it to the browser. They can fetch data directly from databases or APIs without sending extra JavaScript to the client. Server components cannot use browser-only features like event handlers or state.

Result

Pages load faster because less JavaScript is sent to the browser.

Knowing server components run only on the server helps you write faster, lighter pages.

3

Intermediate

Client Components for Interactivity

Concept: Client components run in the browser and handle user actions and state.

Client components are React components that run in the browser. They can use hooks like useState and handle events like clicks. To mark a component as client-side, you add 'use client' at the top of the file. Client components can be nested inside server components to add interactivity where needed.

Result

You can create buttons, forms, and dynamic UI that respond to user input.

Separating interactive parts into client components keeps the rest of the page fast and simple.

4

Intermediate

Composing Server and Client Components

🤔Before reading on: Do you think client components can be parents of server components? Commit to your answer.

Concept: Learn how to combine server and client components properly in Next.js.

In Next.js, server components can include client components inside them, but client components cannot include server components. This means the server builds the page structure and inserts interactive parts where needed. This rule ensures the server sends HTML first, then the client adds behavior.

Result

You get a page that loads fast with interactive parts working smoothly.

Understanding the parent-child rules prevents common bugs and helps design clean component trees.

5

Advanced

Data Fetching in Server Components

🤔Before reading on: Do you think client components can fetch data directly from a database? Commit to your answer.

Concept: Server components can fetch data directly, avoiding extra client requests.

Server components can use async functions to fetch data from APIs or databases during rendering. This data is included in the HTML sent to the client. Client components cannot do this directly; they rely on server components or API routes to provide data. This reduces network requests and speeds up page load.

Result

Pages show data immediately without waiting for client-side loading spinners.

Knowing where to fetch data improves performance and user experience.

6

Advanced

State and Effects in Client Components

Concept: Client components manage state and side effects for interactivity.

Client components can use React hooks like useState and useEffect to handle user input and run code after rendering. This lets you build dynamic features like toggles, forms, and animations. Server components cannot use these hooks because they run only once on the server.

Result

Interactive UI elements respond instantly to user actions.

Separating stateful logic into client components keeps server components simple and fast.

7

Expert

Performance and Bundling Implications

🤔Before reading on: Do you think client components increase JavaScript bundle size for the whole page? Commit to your answer.

Concept: How server and client components affect JavaScript sent to the browser and page speed.

Server components do not add JavaScript to the client bundle, so they keep pages lightweight. Client components add JavaScript that runs in the browser, increasing bundle size. Next.js automatically splits bundles so only client components' code is sent to the browser. Understanding this helps optimize which parts should be server or client components to balance speed and interactivity.

Result

You can build fast pages by minimizing client-side JavaScript while keeping interactivity.

Knowing how bundling works guides better component design and avoids slow pages.

Under the Hood

Next.js uses React Server Components under the hood. Server components run on the server during rendering, producing HTML and serialized data. Client components are marked with a special directive and bundled separately. The server sends HTML plus a small JavaScript bundle for client components. The client hydrates interactive parts by running client component code. This split lets Next.js send minimal JavaScript and still have dynamic UI.

Why designed this way?

This design was created to solve slow page loads caused by sending large JavaScript bundles to browsers. Traditional React apps send all code to the client, even parts that don't need to run there. By splitting components into server and client, Next.js reduces JavaScript size and improves SEO and performance. Alternatives like full client rendering or static HTML lacked flexibility or interactivity.

┌───────────────┐       ┌───────────────┐       ┌───────────────┐
│ ServerComponent│──────▶│ Server renders │──────▶│ HTML + Data   │
└───────────────┘       └───────────────┘       └───────────────┘
          │                                          │
          ▼                                          ▼
┌───────────────┐       ┌───────────────┐       ┌───────────────┐
│ ClientComponent│◀─────│ Client receives│◀─────│ Browser loads │
└───────────────┘       │ JS bundle     │       │ page & JS     │
                        └───────────────┘       └───────────────┘

Myth Busters - 4 Common Misconceptions

Quick: Can client components include server components as children? Commit to yes or no.

Common Belief: Client components can include server components anywhere in the tree.

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

Why it matters: Trying to include server components inside client components causes errors and breaks rendering.

Quick: Do server components run in the browser? Commit to yes or no.

Common Belief: Server components run both on server and client for flexibility.

Reality: Server components run only on the server and never in the browser.

Why it matters: Assuming server components run in the browser leads to using browser-only APIs in server code, causing crashes.

Quick: Can server components use React hooks like useState? Commit to yes or no.

Common Belief: All React hooks work in server components just like client components.

Reality: Hooks like useState and useEffect only work in client components, not server components.

Why it matters: Using client-only hooks in server components causes errors and confusion.

Quick: Does adding more client components always slow down the page? Commit to yes or no.

Common Belief: More client components always make the page slower because of JavaScript size.

Reality: While client components add JavaScript, Next.js optimizes bundles and lazy loads code, so impact depends on usage.

Why it matters: Avoiding client components entirely can limit interactivity and user experience.

Expert Zone

1

Server components can fetch data directly and cache results, reducing repeated requests and improving performance.

2

Client components can be nested deeply but increase JavaScript size; balancing nesting depth affects load speed.

3

Next.js supports streaming server components, sending HTML chunks progressively for faster perceived load times.

When NOT to use

Avoid using server components when you need immediate user interaction or browser APIs like local storage. Use client components or hybrid approaches instead. For very dynamic pages with frequent updates, consider client components or API routes. Also, legacy React apps without Next.js cannot use this pattern.

Production Patterns

In production, developers build main page layouts as server components for speed, embedding client components only for interactive widgets like forms or menus. Data fetching is centralized in server components to reduce client requests. Lazy loading client components on user interaction improves performance. Monitoring bundle size and hydration time guides component composition.

Connections

Microservices Architecture

Both split responsibilities to optimize performance and scalability.

Understanding how server and client components split UI work helps grasp how microservices split backend tasks for efficiency.

Lazy Loading in Web Development

Client components can be lazy loaded to improve performance, similar to lazy loading images or modules.

Knowing lazy loading principles helps optimize when and how client components load, reducing initial page weight.

Assembly Line Manufacturing

Both break a complex process into specialized steps done in the best place.

Seeing UI rendering as an assembly line clarifies why server and client components are separated for speed and quality.

Common Pitfalls

#1 Trying to use useState hook inside a server component.

Wrong approach:

'use client';
import React, { useState } from 'react';

export default function ServerComp() {
const [count, setCount] = useState(0);
return {count};
}

Correct approach:

'use client';
import React, { useState } from 'react';

export default function ClientComp() {
const [count, setCount] = useState(0);
return {count};
}

Root cause:

Confusing server and client components and forgetting that useState only works in client components.

#2 Including a server component inside a client component as a child.

Wrong approach:

'use client';
import ServerComp from './ServerComp';

export default function ClientComp() {
return ;
}

Correct approach:

import ClientComp from './ClientComp';

export default function ServerComp() {
return ;
}

Root cause:

Misunderstanding the direction of component composition rules in Next.js.

#3 Fetching data inside a client component directly from a database.

Wrong approach:

'use client';

export default function ClientComp() {
const data = fetch('https://mydb/api/data');
return {data};
}

Correct approach:

export default async function ServerComp() {
const data = await fetch('https://mydb/api/data');
return ;
}

Root cause:

Not realizing client components cannot securely or efficiently fetch data directly from databases.

Key Takeaways

Server components run only on the server and generate HTML to send to the browser, improving performance.

Client components run in the browser and handle interactivity using React hooks and events.

Next.js requires server components to include client components, but not the other way around.

Proper composition balances fast page loads with rich user experiences by sending minimal JavaScript.

Understanding data fetching and bundling differences between server and client components is key to building efficient apps.

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