05. Passing Data between RSC & Client: Serialization Rules & The Children Pattern • Next.js 14+ App Router & Full-Stack Architecture • Rishabh Ki Kaksha

Server Component se Client Component me props pass karte waqt data ko **JSON Serializable** hona mandatory hai:
*   ✅ **Allowed:** Strings, Numbers, Booleans, Plain Objects, Arrays, Promises (with `use()` hook), JSX Elements.
*   ❌ **Disallowed:** Functions, Class instances with methods, Date objects (must convert to ISO string or timestamp), Symbols.

---

### 2. The Children Pattern (Nesting Server Components in Client Wrappers 👑)

Agar tu ek Client Component banata hai (e.g. `SidebarThemeProvider` ya `ModalWrapper`), toh uske andar Server Component ko **`children` prop ke zariye pass karo:**

```tsx
// components/ClientThemeWrapper.tsx ("use client")
"use client";
import { useState } from "react";

export default function ClientThemeWrapper({ children }: { children: React.ReactNode }) {
    const [theme, setTheme] = useState("dark");
    return (
        <div className={theme === "dark" ? "bg-black text-white" : "bg-white text-black"}>
            <button onClick={() => setTheme(t => t === "dark" ? "light" : "dark")}>Toggle Theme</button>
            {children} {/* ⚡ children Server Component rehta hai, 0 KB bundle! */}
        </div>
    );
}

// app/page.tsx (Server Component)
import ClientThemeWrapper from "@/components/ClientThemeWrapper";
import HeavyServerFeed from "@/components/HeavyServerFeed"; // Server Component

export default function Page() {
    return (
        <ClientThemeWrapper>
            <HeavyServerFeed /> {/* Passed as rendered JSX slot! */}
        </ClientThemeWrapper>
    );
}
```

---

### 3. Master Comparison Matrix

| Pattern | RSC Status Preserved? | Client Bundle Impact |
| :--- | :--- | :--- |
| **Direct Import in `"use client"`** | ❌ Converted to Client Component | High (Ships code to browser) |
| **Passed via `{children}` Slot** | ✅ **Remains pure Server Component** | 🛡️ **0 KB Extra Bundle Size** |

---

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

1. **Client component ke props me Date object pass karne par error kyu aata hai?** -> Kyunki Server aur Client boundary cross karte waqt data RSC Wire Format me serialize hota hai; Date object plain string me convert kiye bina transfer nahi ho sakta.
2. **React 19 / Next.js 14 me `use()` hook Server Promises ko Client me kaise resolve karta hai?** -> Server Component direct un-awaited Promise pass karta hai jise Client Component `const data = use(promise)` se Suspense ke sath resolve karta hai.
3. **Slot Pattern Next.js architecture me kyu popular hai?** -> Kyunki ye heavy layout components (Context Providers, Carousels, Drawers) ko client rakhte huye unke internal child content ko pure zero-bundle Server Components rehne deta hai.

---
**Next Topic:** 06. Server-Only Packages (import "server-only") & Taint API for Secret Protection

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