04. React Server Components (RSC) Deep Dive: The Server-Client Component Boundary • Next.js 14+ App Router & Full-Stack Architecture • Rishabh Ki Kaksha

*   Next.js me **har component by default Server Component (RSC) hota hai.**
*   `"use client"` likhne ka matlab ye nahi hai ki component sirf browser me chalega — **`"use client"` Server aur Client Component tree ke beech ki BOUNDARY define karta hai!** (Client components bhi initial load par server par pre-render hote hain!).

```
┌─────────────────────────────────────────────────────────────┐
│                 SERVER COMPONENT (RSC)                      │
│ - Direct DB / File System Access                            │
│ - Keeps Secret API Keys safe                                │
│ - 0 KB Client JavaScript Bundle                             │
│ - Cannot use `useState`, `useEffect`, `onClick`             │
├─────────────────────────────────────────────────────────────┤
│         ⚡ BOUNDARY: "use client" DIRECTIVE                 │
├─────────────────────────────────────────────────────────────┤
│                 CLIENT COMPONENT                            │
│ - Interactive UI (`onClick`, `onChange`, `onSubmit`)        │
│ - State & Lifecycle (`useState`, `useEffect`, `useRef`)     │
│ - Browser APIs (`window`, `localStorage`, Geolocation)      │
└─────────────────────────────────────────────────────────────┘
```

---

### 2. Moving the Boundary Down the Tree (Performance Golden Rule 👑)

Saare page ko `"use client"` mark karne ke badle sirf interactive button ko leaf level par isolate karo:

```tsx
// ❌ BAD: Entire heavy page becomes client bundle!
// app/blog/[id]/page.tsx
"use client";

// ✅ GOOD: Keep page as Server Component, extract Interactive Button:
// app/blog/[id]/page.tsx (Server Component - 0 KB JS)
import LikeButton from "@/components/LikeButton"; // Client Component

export default async function BlogPost({ params }: { params: { id: string } }) {
    const post = await db.posts.findUnique({ where: { id: params.id } });

return (
        <article className="max-w-2xl mx-auto p-6">
            <h1>{post.title}</h1>
            <p>{post.content}</p>
            {/* Only this tiny button ships JS to browser! */}
            <LikeButton postId={post.id} initialLikes={post.likes} />
        </article>
    );
}
```

---

### 3. Master Comparison Matrix

---

### 4. Interview Ke 3 Sawal Is Topic Se

1. **Client Component server par execute hota hai kya?** -> Haan! Initial page load (SSR) ke waqt Client Components bhi server par execute hokar static HTML generate karte hain, jiske baad browser me React Hydration process chalta hai.
2. **Server Component ko Client Component ke andar direct `import` kyu nahi kar sakte?** -> Kyunki Client bundle me Server code (DB drivers, node APIs) package nahi ho sakta; isko solve karne ke liye **Children Pattern (`{children}`)** use kiya jata hai.
3. **RSC Payload kya hota hai?** -> Server Components ka compact binary JSON-like format jisme virtual DOM structure, resolved async data aur client component placeholders mapped hote hain.

---
**Next Topic:** 05. Passing Data between RSC & Client: Serialization Rules & The Children Pattern

Loading lesson content...

JavaScript

Full IDE

Live Execution Terminal

Click "Execute Live" to run code.
                

Lesson Mastery AI Quiz

AI Doubt Solver

CERTIFICATE OF COMPLETION

Rishabh Gehlot

PHP 8+ & Laravel 11 Master Track