🏷️
Server & Client Components

The 'use client' Boundary

Where to Draw the Line
💡 "use client" directive, EK, "BORDER, CROSSING" jaisa, hai — EK, BAAR, TUM, "USE, CLIENT" TERRITORY, mein, ENTER, kar, jaate, ho, USKE, ANDAR, ke, SAARE, IMPORTS, bhi, WAHI, TERRITORY, mein, TREAT, hote, HAIN.

"use client", ko, JITNA, POSSIBLE, ho, "LEAF" (SABSE, NEECHE, ke) COMPONENTS, mein, RAKHNA, BEST, PRACTICE, hai — POORE, PAGE, ko, "use client" MARK, karne, ke, BAJAYE, SIRF, WOH, SMALL, PIECE, JISKO, INTERACTIVITY, chahiye.

"use client" boundary, ke, ANDAR, SE, bhi, Server, Components, ko, children/props, ki, tarah, "PIERCE, THROUGH" kiya, ja, sakta hai — composition, patterns, se, ISE, ACHIEVE, kiya, jaata hai.

// BAD — poora page, client component:
"use client";
export default function Page() {
  return (
    <div>
      <StaticHeader />   {/* isse, bhi, client, bundle, mein, jaana, PADТА hai */}
      <InteractiveButton />
    </div>
  );
}

// GOOD — sirf, interactive, part, client:
export default function Page() {   // server component
  return (
    <div>
      <StaticHeader />   {/* server, PAR, hi, rehta, hai */}
      <InteractiveButton />   {/* isme, "use client" hai */}
    </div>
  );
}
🏷️
"use client" directive, EK, "BORDER, CROSSING" jaisa, hai — EK, BAAR, TUM, "USE, CLIENT" TERRITORY, mein, ENTER, kar, jaate, ho, USKE, ANDAR, ke, SAARE, IMPORTS, bhi, WAHI, TERRITORY, mein, TREAT, hote, HAIN.
1 / 2
⚡ Quick Recap
  • "use client", ko, LEAF, (nichle) components, mein, rakhna, BEST, practice, hai
  • Poore, page, ko, client, MARK, karne, se, bundle, size, KAAFI, badh, jaata, hai
  • Composition patterns, se, server, content, ko, client, boundary, ke, andar, "pierce" kiya, ja, sakta, hai
Is page mein (2 subtopics)

"use client", FILE, ke, SABSE, PEHLI, LINE, PAR, honi, ZAROORI, hai (imports, se, bhi, PEHLE) — koi, bhi, code, ISSE, PEHLE, likhna, ERROR, dega.

"use client";   // sabse, pehli, line

import { useState } from "react";

Agar, EK, "use client" component, EK, server, component, ko, IMPORT, karta hai (jaise, children, ke, through), SERVER, component, khud, "use client" boundary, mein, NAHI, aata — sirf, ACTUAL, importing, chain, affect, hoti hai.

💡Tip: children, ke, through, PASS, kiye, gaye, server, components, "use client" boundary, se, "PIERCE, THROUGH" ho, jaate, HAIN — YE, composition, pattern, ki, KEY, INSIGHT, hai.