1~
2React Server Components (RSC) ने मौलिक रूप से बदल दिया है कि हम React एप्लिकेशन कैसे बनाते हैं। रेंडरिंग लॉजिक को सर्वर पर ले जाकर, हम क्लाइंट को भेजे जाने वाले JavaScript बंडल को काफी कम कर सकते हैं, जिससे लोड समय तेज होता है और उपयोगकर्ता अनुभव बेहतर होता है। इस लेख में, हम 2026 में RSC का लाभ उठाने के लिए उन्नत पैटर्न और सर्वोत्तम प्रथाओं का पता लगाएंगे।
3~
4## Server Components क्या हैं?
5~
6परंपरागत रूप से, React घटकों को पूरी तरह से क्लाइंट (CSR) पर रेंडर किया जाता था या सर्वर पर HTML (SSR) के रूप में प्री-रेंडर किया जाता था और फिर क्लाइंट पर हाइड्रेट किया जाता था। **Server Components** हमें घटकों को _विशेष रूप से_ सर्वर पर रेंडर करने की अनुमति देते हैं। उनका कोड कभी भी ब्राउज़र को नहीं भेजा जाता है।
7~
8### लाभ
9~
101.  **शून्य बंडल आकार**: Server Components में उपयोग की जाने वाली निर्भरताएँ (जैसे मार्कडाउन पार्सर या भारी तिथि पुस्तकालय) सर्वर पर रहती हैं।
112.  **सीधा बैकएंड एक्सेस**: आप API एंडपॉइंट्स को उजागर किए बिना सीधे अपने घटक के अंदर अपने डेटाबेस को क्वेरी कर सकते हैं।
123.  **स्वचालित कोड विभाजन**: सर्वर-साइड आयातित क्लाइंट घटकों को स्वचालित रूप से कोड-विभाजित किया जाता है।
13~
14## डेटा फ़ेचिंग पैटर्न
15~
16RSC के साथ, आप अपने घटकों को `async` बना सकते हैं और सीधे डेटा का इंतजार कर सकते हैं।
17~
18```tsx
19// app/users/page.tsx
20import { db } from '@/lib/db';
21~
22export default async function UsersPage() {
23  const users = await db.user.findMany();
24~
25  return (
26    <main>
27      <h1>उपयोगकर्ता</h1>
28      <ul>
29        {users.map((user) => (
30          <li key={user.id}>{user.name}</li>
31        ))}
32      </ul>
33    </main>
34  );
35}
36```
37~
38### स्ट्रीमिंग के लिए Suspense
39~
40चूंकि डेटा लाना धीमा हो सकता है, डेटा लोड होने के दौरान तुरंत फ़ालबैक UI दिखाने के लिए अपने घटकों को `<Suspense>` में लपेटें।
41~
42```tsx
43import { Suspense } from 'react';
44import UserList from './UserList';
45import LoadingSkeleton from './LoadingSkeleton';
46~
47export default function Page() {
48  return (
49    <section>
50      <h1>मेरे उपयोगकर्ता</h1>
51      <Suspense fallback={<LoadingSkeleton />}>
52        <UserList />
53      </Suspense>
54    </section>
55  );
56}
57```
58~
59## सर्वर और क्लाइंट घटकों को मिलाना
60~
61सबसे भ्रमित करने वाले पहलुओं में से एक यह है कि सर्वर और क्लाइंट घटकों को कैसे संयोजित किया जाए।
62~
63**अंगूठे का नियम**: Server Components Client Components को आयात कर सकते हैं। Client Components सीधे Server Components को आयात _नहीं_ कर सकते। हालाँकि, आप एक Server Component को `children` के रूप में एक Client Component को पास कर सकते हैं।
64~
65### "Children" पैटर्न
66~
67```tsx
68// ClientComponent.tsx
69'use client';
70~
71import { useState } from 'react';
72~
73export default function ClientWrapper({ children }) {
74  const [count, setCount] = useState(0);
75~
76  return (
77    <div onClick={() => setCount((c) => c + 1)}>
78      गिनती: {count}
79      {children} {/* यह एक Server Component हो सकता है! */}
80    </div>
81  );
82}
83```
84~
85```tsx
86// ServerPage.tsx
87import ClientWrapper from './ClientWrapper';
88import ServerContent from './ServerContent';
89~
90export default function Page() {
91  return (
92    <ClientWrapper>
93      <ServerContent /> {/* यह पूरी तरह से काम करता है */}
94    </ClientWrapper>
95  );
96}
97```
98~
99## सामान्य नुकसान
100~
1011.  **Server Components में संदर्भ (Context) का उपयोग करना**: संदर्भ एक क्लाइंट-साइड अवधारणा है। यदि आपको सर्वर-साइड डेटा साझा करने की आवश्यकता है, तो इसे प्रॉप्स के रूप में पास करें या एक विशेष अनुरोध-स्कोप कैश का उपयोग करें।
1022.  **इवेंट हैंडलर जोड़ना**: आप एक Server Component में `onClick` या `onChange` नहीं जोड़ सकते। वह तर्क एक सामान्य Client Component लीफ नोड में है।
103~
104## निष्कर्ष
105~
106React Server Components केवल एक विशेषता नहीं हैं; वे एक प्रतिमान बदलाव हैं। सर्वर और क्लाइंट के बीच की सीमा को समझकर, आप ऐसे एप्लिकेशन बना सकते हैं जो अत्यधिक इंटरैक्टिव और अविश्वसनीय रूप से तेज़ दोनों हों।
107~