App Router में Server Components कैसे काम करते हैं?

Question

Accepted Answer

**React Server Components (RSC)** **केवल सर्वर पर** रेंडर होते हैं — इनका JavaScript कभी ब्राउज़र को नहीं भेजा जाता। App Router में हर कंपोनेंट **डिफ़ॉल्ट रूप से** Server Component होता है; आप स्पष्ट रूप से client व्यवहार में opt-in करते हैं। ## एक Server Component क्या कर सकता है ```tsx // app/users/page.tsx — a Server Component (no "use client") import db from "@/lib/db"; export default async function Users() { const users = await db.user.findMany(); // ✅ direct DB access, runs on server return (

{u.name}

); } ``` Server Components **async** हो सकते हैं, सीधे डेटा `await` कर सकते हैं, और सर्वर-केवल संसाधनों (database, filesystem, secrets) तक पहुँच सकते हैं — क्योंकि ये सर्वर पर चलते हैं। डेटा फ़ेच करने के लिए किसी API लेयर की ज़रूरत नहीं, और secrets कभी client तक नहीं पहुँचते। ## बड़ा फ़ायदा: उस कंपोनेंट के लिए शून्य client JS ब्राउज़र को **रेंडर्ड HTML/UI** मिलता है, न कि कंपोनेंट का कोड या उसकी dependencies। एक Server Component जो किसी भारी markdown या date लाइब्रेरी का उपयोग करता है, उस लाइब्रेरी का **कुछ भी** ब्राउज़र को नहीं भेजता — जिससे bundle size नाटकीय रूप से घट जाता है। ## Server Components क्या नहीं कर सकते ```tsx // ❌ these only work in Client Components useState, useEffect, useRef // hooks (no interactivity/state on the server) onClick, onChange // event handlers window, localStorage, document // browser-only APIs ``` कोई इंटरैक्टिविटी, state, effects, या browser API नहीं — इनके लिए एक Client Component चाहिए। ## सर्वर और client को साथ जोड़ना ```tsx // Server Component fetches data, passes it to an interactive Client Component import LikeButton from "./LikeButton"; // a "use client" component export default async function Post({ id }) { const post = await getPost(id); // server-side fetch return <>

; } ``` पैटर्न: Server Components डेटा/संरचना संभालते हैं; Client Components को केवल वहीं एम्बेड करें जहाँ इंटरैक्टिविटी ज़रूरी हो ("islands")। ## यह क्यों महत्वपूर्ण है Server Components, App Router की परिभाषित विशेषता हैं। ये client bundle size घटाते हैं (डाउनलोड/पार्स करने के लिए कम JS), किसी API के बिना सीधे, सुरक्षित सर्वर-साइड डेटा एक्सेस की अनुमति देते हैं, और performance व SEO बेहतर करते हैं। यह जानना कि वे डिफ़ॉल्ट हैं — और कौन-सी चीज़ किसी कंपोनेंट को Client Component बनने पर मजबूर करती है — App Router ऐप्स को कुशलता से संरचित करने के लिए बुनियादी है।