1~
2React Server Components (RSC) نے بنیادی طور پر بدل دیا ہے کہ ہم React ایپلیکیشنز کیسے بناتے ہیں۔ رینڈرنگ لاجک کو سرور پر منتقل کر کے، ہم کلائنٹ کو بھیجے جانے والے JavaScript بنڈل کو نمایاں طور پر کم کر سکتے ہیں، جس سے تیز لوڈنگ ٹائم اور بہتر صارف تجربہ ملتا ہے۔ اس مضمون میں، ہم 2026 میں RSCs سے فائدہ اٹھانے کے لیے جدید پیٹرنز اور بہترین طریقوں کا جائزہ لیں گے۔
3~
4## Server Components کیا ہیں؟
5~
6روایتی طور پر، React components مکمل طور پر کلائنٹ (CSR) پر رینڈر ہوتے تھے یا سرور پر HTML (SSR) کے طور پر پری-رینڈر ہوتے تھے اور پھر کلائنٹ پر ہائیڈریٹ ہوتے تھے۔ **Server Components** ہمیں components کو _خصوصی طور پر_ سرور پر رینڈر کرنے کی اجازت دیتے ہیں۔ ان کا کوڈ کبھی براؤزر کو نہیں بھیجا جاتا۔
7~
8### فوائد
9~
101.  **صفر بنڈل سائز**: Server Components میں استعمال ہونے والی انحصاریاں (جیسے markdown parsers یا بھاری date libraries) سرور پر ہی رہتی ہیں۔
112.  **براہ راست Backend تک رسائی**: آپ API endpoints ظاہر کیے بغیر اپنے component کے اندر براہ راست ڈیٹابیس سے کوئری کر سکتے ہیں۔
123.  **خودکار Code Splitting**: سرور سائیڈ پر امپورٹ کیے گئے Client components خودکار طور پر کوڈ-سپلٹ ہو جاتے ہیں۔
13~
14## ڈیٹا فیچنگ پیٹرن
15~
16RSC کے ساتھ، آپ اپنے components کو `async` بنا سکتے ہیں اور براہ راست ڈیٹا await کر سکتے ہیں۔
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>Users</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### Streaming کے لیے Suspense
39~
40چونکہ ڈیٹا فیچنگ سست ہو سکتی ہے، ڈیٹا لوڈ ہونے کے دوران فوری طور پر ایک فال بیک UI دکھانے کے لیے اپنے components کو `<Suspense>` میں wrap کریں۔
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>My Users</h1>
51      <Suspense fallback={<LoadingSkeleton />}>
52        <UserList />
53      </Suspense>
54    </section>
55  );
56}
57```
58~
59## Server اور Client Components کو ملانا
60~
61سب سے الجھانے والے پہلوؤں میں سے ایک یہ ہے کہ Server اور Client components کو کیسے ملایا جائے۔
62~
63**اصول**: Server Components Client Components کو import کر سکتے ہیں۔ Client Components _براہ راست_ Server Components کو import _نہیں کر سکتے_۔ تاہم، آپ ایک 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: {count}
79      {children} {/* This can be a 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 /> {/* This works perfectly */}
94    </ClientWrapper>
95  );
96}
97```
98~
99## عام خرابیاں
100~
1011.  **Server Components میں Context استعمال کرنا**: Context ایک کلائنٹ سائیڈ تصور ہے۔ اگر آپ کو سرور سائیڈ پر ڈیٹا شیئر کرنے کی ضرورت ہے تو props کے طور پر پاس کریں یا ایک خصوصی request-scope cache استعمال کریں۔
1022.  **Event Handlers شامل کرنا**: آپ Server Component میں `onClick` یا `onChange` شامل نہیں کر سکتے۔ وہ لاجک ایک عام Client Component لیف نوڈ میں رکھنا ہوگا۔
103~
104## نتیجہ
105~
106React Server Components صرف ایک فیچر نہیں ہیں؛ یہ ایک پیراڈائم شفٹ ہے۔ سرور اور کلائنٹ کے درمیان حد کو سمجھ کر، آپ ایسی ایپلیکیشنز بنا سکتے ہیں جو انتہائی انٹرایکٹو اور ناقابل یقین حد تک تیز دونوں ہوں۔
107~