2026 में React Server Components में महारत हासिल करें

React Server Components (RSC) ने मौलिक रूप से बदल दिया है कि हम React एप्लिकेशन कैसे बनाते हैं। रेंडरिंग लॉजिक को सर्वर पर ले जाकर, हम क्लाइंट को भेजे जाने वाले JavaScript बंडल को काफी कम कर सकते हैं, जिससे लोड समय तेज होता है और उपयोगकर्ता अनुभव बेहतर होता है। इस लेख में, हम 2026 में RSC का लाभ उठाने के लिए उन्नत पैटर्न और सर्वोत्तम प्रथाओं का पता लगाएंगे।

Server Components क्या हैं?

परंपरागत रूप से, React घटकों को पूरी तरह से क्लाइंट (CSR) पर रेंडर किया जाता था या सर्वर पर HTML (SSR) के रूप में प्री-रेंडर किया जाता था और फिर क्लाइंट पर हाइड्रेट किया जाता था। Server Components हमें घटकों को विशेष रूप से सर्वर पर रेंडर करने की अनुमति देते हैं। उनका कोड कभी भी ब्राउज़र को नहीं भेजा जाता है।

लाभ

1. शून्य बंडल आकार: Server Components में उपयोग की जाने वाली निर्भरताएँ (जैसे मार्कडाउन पार्सर या भारी तिथि पुस्तकालय) सर्वर पर रहती हैं।
2. सीधा बैकएंड एक्सेस: आप API एंडपॉइंट्स को उजागर किए बिना सीधे अपने घटक के अंदर अपने डेटाबेस को क्वेरी कर सकते हैं।
3. स्वचालित कोड विभाजन: सर्वर-साइड आयातित क्लाइंट घटकों को स्वचालित रूप से कोड-विभाजित किया जाता है।

डेटा फ़ेचिंग पैटर्न

RSC के साथ, आप अपने घटकों को async बना सकते हैं और सीधे डेटा का इंतजार कर सकते हैं।

// app/users/page.tsx
import { db } from '@/lib/db';

export default async function UsersPage() {
  const users = await db.user.findMany();

  return (
    <main>
      <h1>उपयोगकर्ता</h1>
      <ul>
        {users.map((user) => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </main>
  );
}

स्ट्रीमिंग के लिए Suspense

चूंकि डेटा लाना धीमा हो सकता है, डेटा लोड होने के दौरान तुरंत फ़ालबैक UI दिखाने के लिए अपने घटकों को <Suspense> में लपेटें।

import { Suspense } from 'react';
import UserList from './UserList';
import LoadingSkeleton from './LoadingSkeleton';

export default function Page() {
  return (
    <section>
      <h1>मेरे उपयोगकर्ता</h1>
      <Suspense fallback={<LoadingSkeleton />}>
        <UserList />
      </Suspense>
    </section>
  );
}

सर्वर और क्लाइंट घटकों को मिलाना

सबसे भ्रमित करने वाले पहलुओं में से एक यह है कि सर्वर और क्लाइंट घटकों को कैसे संयोजित किया जाए।

अंगूठे का नियम: Server Components Client Components को आयात कर सकते हैं। Client Components सीधे Server Components को आयात नहीं कर सकते। हालाँकि, आप एक Server Component को children के रूप में एक Client Component को पास कर सकते हैं।

"Children" पैटर्न

// ClientComponent.tsx
'use client';

import { useState } from 'react';

export default function ClientWrapper({ children }) {
  const [count, setCount] = useState(0);

  return (
    <div onClick={() => setCount((c) => c + 1)}>
      गिनती: {count}
      {children} {/* यह एक Server Component हो सकता है! */}
    </div>
  );
}

// ServerPage.tsx
import ClientWrapper from './ClientWrapper';
import ServerContent from './ServerContent';

export default function Page() {
  return (
    <ClientWrapper>
      <ServerContent /> {/* यह पूरी तरह से काम करता है */}
    </ClientWrapper>
  );
}

सामान्य नुकसान

1. Server Components में संदर्भ (Context) का उपयोग करना: संदर्भ एक क्लाइंट-साइड अवधारणा है। यदि आपको सर्वर-साइड डेटा साझा करने की आवश्यकता है, तो इसे प्रॉप्स के रूप में पास करें या एक विशेष अनुरोध-स्कोप कैश का उपयोग करें।
2. इवेंट हैंडलर जोड़ना: आप एक Server Component में onClick या onChange नहीं जोड़ सकते। वह तर्क एक सामान्य Client Component लीफ नोड में है।

निष्कर्ष

React Server Components केवल एक विशेषता नहीं हैं; वे एक प्रतिमान बदलाव हैं। सर्वर और क्लाइंट के बीच की सीमा को समझकर, आप ऐसे एप्लिकेशन बना सकते हैं जो अत्यधिक इंटरैक्टिव और अविश्वसनीय रूप से तेज़ दोनों हों।