App Router میں Server Components کیسے کام کرتے ہیں؟

Question

Accepted Answer

**React Server Components (RSC)** **صرف سرور پر** render ہوتے ہیں — ان کا JavaScript کبھی براؤزر کو نہیں بھیجا جاتا۔ App Router میں، ہر component ڈیفالٹ طور پر ایک Server Component ہے؛ آپ کو client behavior کو واضح طور پر شامل کرنا ہوتا ہے۔ ## ایک Server Component کیا کر سکتا ہے ```tsx // app/users/page.tsx — a Server Component (no "use client") import db from "@/lib/db"; export default async function Users() { const users = await db.user.findMany(); // ✅ direct DB access, runs on server return (

{u.name}

); } ``` Server Components **async** ہو سکتے ہیں، براہ راست data کو `await` کر سکتے ہیں، اور server-only وسائل (database، filesystem، secrets) تک رسائی حاصل کر سکتے ہیں — کیونکہ وہ سرور پر چلتے ہیں۔ ڈیٹا حاصل کرنے کے لیے کوئی API layer کی ضرورت نہیں، اور secrets کبھی client تک نہیں پہنچتے۔ ## بڑا فائدہ: اس component کے لیے صفر client JS براؤزر کو **rendered HTML/UI** ملتا ہے، نہ کہ component کا کوڈ یا اس کے dependencies۔ ایک Server Component جو بھاری markdown یا date library استعمال کرتا ہے، براؤزر کو **کوئی بھی** اس library کو نہیں بھیجتا — bundle size میں ڈرامائی کمی آتی ہے۔ ## Server Components کیا نہیں کر سکتے ```tsx // ❌ these only work in Client Components useState, useEffect, useRef // hooks (no interactivity/state on the server) onClick, onChange // event handlers window, localStorage, document // browser-only APIs ``` کوئی interactivity، state، effects، یا browser APIs نہیں — ان کے لیے Client Component کی ضرورت ہے۔ ## Server اور client کو ملانا ```tsx // Server Component fetches data, passes it to an interactive Client Component import LikeButton from "./LikeButton"; // a "use client" component export default async function Post({ id }) { const post = await getPost(id); // server-side fetch return <>

; } ``` نمونہ: Server Components ڈیٹا/structure سنبھالتے ہیں؛ Client Components کو صرف جہاں interactivity کی ضرورت ہے وہاں embed کریں ("islands")۔ ## یہ کیوں اہم ہے Server Components App Router کی خصوصیت ہیں۔ وہ client bundle size میں کمی کرتے ہیں (کم JS ڈاؤن لوڈ/parse کریں)، براہ راست، محفوظ server-side data رسائی کی اجازت دیتے ہیں API کے بغیر، اور performance اور SEO میں بہتری لاتے ہیں۔ جاننا کہ وہ ڈیفالٹ ہیں — اور کون سی چیز ایک component کو Client Component بناتی ہے — یہ App Router apps کو موثر طریقے سے منظم کرنے کے لیے بنیادی ہے۔