React Server Components म्हणजे काय आणि ते client components पासून कसे वेगळे आहेत?

Question

Accepted Answer

**Server Components (RSC)** **server** वर render होतात आणि serialized result browser ला पाठवतात. ते **शून्य JavaScript** पाठवतात स्वतःसाठी — फक्त data/markup, त्यांचा code नाही. ## दोन प्रकार ```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 ; } ``` ## क्षमता आणि मर्यादा | | Server Component | Client Component | |---|---|---| | `await` / data सरासरी fetch करू शकतात | ✅ | ❌ | | Server resources/secrets मध्ये प्रवेश | ✅ | ❌ | | `useState`/`useEffect`/events | ❌ | ✅ | | Browser ला JS पाठवतात | ❌ (zero) | ✅ | ## हे का महत्वाचे आहे - **कमी client JavaScript** → अधिक वेग loads आणि interactivity. - **Data fetching स्रोताजवळ** (browser पासून कोणता API round-trip नाही, DB credentials उघड करत नाही). - तुम्ही **compose** करता: server components client components इंटरएक्टिव "islands" साठी render करतात. Server component client एकला render करू शकतो, पण **नाही** vice-versa. ## Gotcha Server→client सीमा पार केलेले Props **serializable** असले पाहिजेत — तुम्ही functions किंवा class instances पास करू शकत नाही. RSC mental model "सर्वकाही browser मध्ये चालते" पासून "server मध्ये render करा default द्वारे, client मध्ये फक्त जिथे तुम्हाला interactivity हवेय तेथे opt करा" मध्ये बदलतो.

	Server Component	Client Component
`await` / data सरासरी fetch करू शकतात	✅	❌
Server resources/secrets मध्ये प्रवेश	✅	❌
`useState`/`useEffect`/events	❌	✅
Browser ला JS पाठवतात	❌ (zero)	✅