🔄 Next.js 16: Server ↔ Client Communication & Serialization

Once you understand Server Components (SC) and Client Components (CC), the next natural step is passing data between them. However, in Next.js, you cannot simply pass "anything" across the boundary.

Errors like:

• "Functions cannot be passed"
• "Cannot serialize"

Ye sab isi concept se related hain.

🧠 1. The Basic Flow: Server → Client

Jab ek Server Component, Client Component ko render karta hai, wo props ke through data pass karta hai.

How it Works

• Server HTML render karta hai
• Props ko "package" karke browser ko bhejta hai

⚠️ Constraint

Ye data network se travel karta hai → isliye Serializable hona zaroori hai

✅ Valid Example

// Server Component (app/page.js)
import Counter from "./Counter";
 
export default async function Page() {
  const data = { title: "Next.js Anatomy", version: 16 };
 
  return <Counter data={data} />;
}

🔥 2. What is Serialization? (Core Concept)

Serialization = Data ko ek aise format mein convert karna jo:

• Store ho sake
• Network par bheja ja sake

Usually → JSON format

🧩 Parcel Analogy

• Solid items (string, number, array) → safely box mein ja sakte hain
• Liquid/gas (functions) → directly ship nahi ho sakte

JSON = safe delivery box 📦

🚫 3. Why Functions Cannot Be Passed

❌ Error Example

// Server Component
export default function Page() {
  const handleClick = () => console.log("Server Logic");
 
  return <Counter onClick={handleClick} />; // ❌ ERROR
}

🧠 Why?

• Functions = executable code
• JSON = sirf data

Function ko stringify nahi kiya ja sakta (scope, closures lost)

🧩 Brain Analogy

• Data = instructions list
• Function = actual brain

Aap instructions bhej sakte ho, brain nahi 🧠❌

⚠️ 4. Non‑Serializable Data Types

A. Date Objects

Problem:

• Serialize hone par string ban jata hai
• Methods lost (e.g., .getFullYear())

✅ Solution

• Server: date.toISOString()
• Client: new Date(dateString)

B. Map & Set

Problem:

• JSON mein convert nahi hote
• Client par {} ya broken data milta hai

✅ Solution

• Map → Object.fromEntries(map)
• Set → Array.from(set)

📊 5. Allowed vs Not Allowed Data

🔍 6. Decoding Real Errors

"Functions cannot be passed"

👉 Aapne function pass kiya hai Server → Client

"Only plain objects can be passed"

👉 Complex object (DB instance, class) pass kar diya

"Cannot serialize"

👉 Unsupported data type pass kiya

💡 7. Best Practice: The "Data Only" Rule

Rule:

👉 Server = Data 👉 Client = Logic

Pattern

// Server Component
export default async function Page() {
  const user = await db.user.findUnique({ where: { id: 1 } });
 
  return <ProfileCard user={user} />;
}
 
// Client Component
"use client";
 
export default function ProfileCard({ user }) {
  const handleFollow = () => {
    // Client-side logic
  };
 
  return <button onClick={handleFollow}>Follow {user.name}</button>;
}

🎯 Final Mental Model

• Server → Data create karta hai
• Network Boundary → JSON transport layer
• Client → Data receive karke interaction add karta hai

Golden Rule

Agar data JSON.stringify() nahi ho sakta, toh use props mein pass nahi karna chahiye.

🚀 Next Topic

Next.js fetch Deep Dive — Request Deduplication, Caching, aur Data Revalidation 🚀