What are the core concepts covered in Server vs Client Component Boundaries?

Why Server Components cannot use useState, useEffect, or onClick; Pushing 'use client' leaves to the edges of the component tree; Passing Server Components as children to Client Components

Advanced 18 min readModule: Module 3: React Server Components (RSC) vs Client Components

Server vs Client Component Boundaries

Understand the 'use client' directive, component composition, passing server props, and serialization.

What You Will Learn in This Lesson

Why Server Components cannot use useState, useEffect, or onClick
Pushing 'use client' leaves to the edges of the component tree
Passing Server Components as children to Client Components

Introduction & Core Concept

React Server Components (RSC) execute exclusively on the server and never ship JavaScript to the client browser. Client Components ('use client') hydrate in the browser to provide interactivity.

WHY DOES THIS MATTER IN THE REAL WORLD?

Structuring 80%+ of your application as Server Components cuts user JavaScript bundle sizes dramatically, improving mobile Core Web Vitals.

Composing Server & Client Components

typescript

1
2
3
4
5
6
7
8
9
10
11
12
13
// Server Component (Default)
import InteractiveHeartButton from "./InteractiveHeartButton"; // Client Component
 
export default function BlogPost({ post }) {
  return (
    <article>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
      {/* Interactive client leaf */}
      <InteractiveHeartButton postId={post.id} />
    </article>
  );
}

Line-by-Line Technical Breakdown

1Props passed from Server Components to Client Components must be serializable (no functions).

Try It Yourself (Interactive Editor)

Modify the code in real-time and click Run to test live browser output and console logs.

Intelligent Code Runner & Live Sandbox[TYPESCRIPT]

TYPESCRIPT SOURCE EDITOR

Interactive Live Code

>[TYPESCRIPT Runtime Initialized]

>Program compiled and executed with 0 errors.

>Output generated successfully.

Industry Best Practices & Professional Standards

Never put 'use client' at the top of a page.tsx unless strictly required.

Lesson Summary & Core Takeaways

RSC allows full-stack applications to ship minimal JavaScript bundles to clients.