2026 میں React Server Components پر عبور حاصل کرنا

React Server Components (RSC) نے بنیادی طور پر بدل دیا ہے کہ ہم React ایپلیکیشنز کیسے بناتے ہیں۔ رینڈرنگ لاجک کو سرور پر منتقل کر کے، ہم کلائنٹ کو بھیجے جانے والے JavaScript بنڈل کو نمایاں طور پر کم کر سکتے ہیں، جس سے تیز لوڈنگ ٹائم اور بہتر صارف تجربہ ملتا ہے۔ اس مضمون میں، ہم 2026 میں RSCs سے فائدہ اٹھانے کے لیے جدید پیٹرنز اور بہترین طریقوں کا جائزہ لیں گے۔

Server Components کیا ہیں؟

روایتی طور پر، React components مکمل طور پر کلائنٹ (CSR) پر رینڈر ہوتے تھے یا سرور پر HTML (SSR) کے طور پر پری-رینڈر ہوتے تھے اور پھر کلائنٹ پر ہائیڈریٹ ہوتے تھے۔ Server Components ہمیں components کو خصوصی طور پر سرور پر رینڈر کرنے کی اجازت دیتے ہیں۔ ان کا کوڈ کبھی براؤزر کو نہیں بھیجا جاتا۔

فوائد

1. صفر بنڈل سائز: Server Components میں استعمال ہونے والی انحصاریاں (جیسے markdown parsers یا بھاری date libraries) سرور پر ہی رہتی ہیں۔
2. براہ راست Backend تک رسائی: آپ API endpoints ظاہر کیے بغیر اپنے component کے اندر براہ راست ڈیٹابیس سے کوئری کر سکتے ہیں۔
3. خودکار Code Splitting: سرور سائیڈ پر امپورٹ کیے گئے Client components خودکار طور پر کوڈ-سپلٹ ہو جاتے ہیں۔

ڈیٹا فیچنگ پیٹرن

RSC کے ساتھ، آپ اپنے components کو async بنا سکتے ہیں اور براہ راست ڈیٹا await کر سکتے ہیں۔

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

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

  return (
    <main>
      <h1>Users</h1>
      <ul>
        {users.map((user) => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </main>
  );
}

Streaming کے لیے Suspense

چونکہ ڈیٹا فیچنگ سست ہو سکتی ہے، ڈیٹا لوڈ ہونے کے دوران فوری طور پر ایک فال بیک UI دکھانے کے لیے اپنے components کو <Suspense> میں wrap کریں۔

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

export default function Page() {
  return (
    <section>
      <h1>My Users</h1>
      <Suspense fallback={<LoadingSkeleton />}>
        <UserList />
      </Suspense>
    </section>
  );
}

Server اور Client Components کو ملانا

سب سے الجھانے والے پہلوؤں میں سے ایک یہ ہے کہ Server اور Client components کو کیسے ملایا جائے۔

اصول: Server Components Client Components کو import کر سکتے ہیں۔ Client Components براہ راست Server Components کو import نہیں کر سکتے۔ تاہم، آپ ایک 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: {count}
      {children} {/* This can be a Server Component! */}
    </div>
  );
}

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

export default function Page() {
  return (
    <ClientWrapper>
      <ServerContent /> {/* This works perfectly */}
    </ClientWrapper>
  );
}

عام خرابیاں

1. Server Components میں Context استعمال کرنا: Context ایک کلائنٹ سائیڈ تصور ہے۔ اگر آپ کو سرور سائیڈ پر ڈیٹا شیئر کرنے کی ضرورت ہے تو props کے طور پر پاس کریں یا ایک خصوصی request-scope cache استعمال کریں۔
2. Event Handlers شامل کرنا: آپ Server Component میں onClick یا onChange شامل نہیں کر سکتے۔ وہ لاجک ایک عام Client Component لیف نوڈ میں رکھنا ہوگا۔

نتیجہ

React Server Components صرف ایک فیچر نہیں ہیں؛ یہ ایک پیراڈائم شفٹ ہے۔ سرور اور کلائنٹ کے درمیان حد کو سمجھ کر، آپ ایسی ایپلیکیشنز بنا سکتے ہیں جو انتہائی انٹرایکٹو اور ناقابل یقین حد تک تیز دونوں ہوں۔