Menene React Server Components kuma suna bambanta da client components ta yaya?

Question

Accepted Answer

**Server Components (RSC)** suna gida a **server** kuma suna aika sakamakon da aka tsarawa zuwa browser. Ba su aika **babu JavaScript** ga kansu — nammaji/markup kawai, ba kodansu ba. ## Nau'ikan biyu ```jsx // Server Component (default in the Next.js App Router): async function ProductPage({ id }) { const product = await db.products.find(id); // fetch DIRECTLY on the server return ; // no client JS for this component } // Client Component — opt in for interactivity: "use client"; function AddToCart() { const [qty, setQty] = useState(1); // hooks/events need the client return ; } ``` ## Iyawanza da takura | | Server Component | Client Component | |---|---|---| | Can `await` / ji data jiya | ✅ | ❌ | | Samun damar samun albarkatun server/sirinni | ✅ | ❌ | | `useState`/`useEffect`/al'ada | ❌ | ✅ | | Aika JS zuwa browser | ❌ (sifili) | ✅ | ## Me Yasa Abin Ya Matukar Muhimmu - **Ƙarami client JavaScript** → ƙarje da sauri da aiki. - **Data bincike kusa da tushe** (babu API round-trip daga browser, ba a bugi DB credentials). - Za ka **tunanawa** su: server components suna tunanin client components don interactive "islands." Server component na tunanin client daya, amma **ba** return. ## Gotcha Props da aka damje a gida server→client dole ne su zama **serializable** — ba za ka iya damjewa aiki ko class instances ba. RSC yana canza tunani daga "duk abin ke aiki a browser" zuwa "gida a server ta tsari, opt zuwa client ne kawai in kun bukatar aiki."

	Server Component	Client Component
Can `await` / ji data jiya	✅	❌
Samun damar samun albarkatun server/sirinni	✅	❌
`useState`/`useEffect`/al'ada	❌	✅
Aika JS zuwa browser	❌ (sifili)	✅