React 19 Server Components Explained (In Hindi)

React 19 Server Components क्या हैं और ये क्यों जरूरी हैं?

नमस्ते दोस्तों! आज हम React 19 के सबसे चर्चा में रहने वाले फीचर, यानी React Server Components (RSC) के बारे में बात करेंगे। पिछले 50 सालों के सफर में मैंने बहुत से बदलाव देखे हैं, लेकिन RSC का आना वेब डेवलपमेंट में एक बड़ा Shift है। चलिए, इसे एक दोस्त की तरह समझते हैं।

पुराने समय में, हमारा पूरा React एप्लीकेशन Client-side पर चलता था। इसका मतलब था कि Browser को एक बहुत बड़ी JavaScript Bundle डाउनलोड करनी पड़ती थी, फिर Hydration होता था, तब जाकर यूजर को स्क्रीन दिखती थी। इसमें लोड टाइम बहुत ज्यादा था।

Server Components का सीधा सा मतलब है: वो कॉम्पोनेंट्स जो सिर्फ Server पर रेंडर होते हैं। इनका कोई JavaScript bundle क्लाइंट के पास नहीं जाता। इससे आपका पेज सुपर-फास्ट हो जाता है!

एक व्यावहारिक उदाहरण देखते हैं

मान लीजिए हमें Database से User की प्रोफाइल फेच करनी है। पहले हम useEffect का इस्तेमाल करके fetch() कॉल करते थे। अब हम इसे सीधे Server Component में कर सकते हैं।

// UserProfile.server.js
import db from './database';

async function UserProfile({ userId }) {
  const user = await db.user.findUnique({
    where: { id: userId }
  });

  return (
    <div className="profile-card">
      <h1>{user.name}</h1>
      <p>{user.email}</p>
    </div>
  );
}

export default UserProfile;

ध्यान देने वाली बात ये है कि इसमें कोई useState या useEffect नहीं है। ये कॉम्पोनेंट सर्वर पर ही रन होगा, डेटा लाएगा और सिर्फ HTML क्लाइंट को भेज देगा।

Server Components का जादू

• Zero Bundle Size: आपके कॉम्पोनेंट के कोड का बड़ा हिस्सा क्लाइंट के पास जाता ही नहीं है।
• Direct Database Access: आप सर्वर पर होने के कारण सीधे Database Query लिख सकते हैं, बिना किसी API endpoint की चिंता किए।
• Performance: चूंकि सब कुछ सर्वर पर तैयार होकर आ रहा है, तो First Contentful Paint (FCP) बहुत तेज हो जाता है।

Client Components के साथ तालमेल

इसका मतलब ये नहीं है कि Client Components खत्म हो गए हैं। जहाँ आपको Interactivity चाहिए—जैसे onClick, useState, या Context API—वहां आप 'use client' डायरेक्टिव का इस्तेमाल करेंगे।

'use client'; // ये क्लाइंट कॉम्पोनेंट है

import { useState } from 'react';

export default function LikeButton() {
  const [likes, setLikes] = useState(0);

  return (
    <button onClick={() => setLikes(likes + 1)}>
      Likes: {likes}
    </button>
  );
}

तो दोस्तों, हमने आज सीखा कि RSC हमारे कोड को कैसे हल्का बनाता है और कैसे हम सर्वर और क्लाइंट का सही तालमेल बैठा सकते हैं। सर्वर कॉम्पोनेंट्स का इस्तेमाल वहीं करें जहाँ डेटा फेचिंग की जरूरत हो, और क्लाइंट कॉम्पोनेंट्स को केवल उन हिस्सों तक सीमित रखें जहाँ यूजर इंटरैक्शन जरूरी है।