ما هي مكونات React Server وكيف تختلف عن مكونات العميل؟

Question

IT Interview Practice · Accepted Answer

**مكونات الخادم (RSC)** تُعرّض على **الخادم** وتُرسل نتيجة مسلسلة إلى المتصفح. فهي **لا تشحن أي JavaScript** بأنفسها — فقط البيانات/الترميز، وليس الكود الخاص بها. ## النوعان ```jsx // Server Component (default in the Next.js App Router): async function ProductPage({ id }) { const product = await db.products.find(id); // fetch DIRECTLY on the server return ; // no client JS for this component } // Client Component — opt in for interactivity: "use client"; function AddToCart() { const [qty, setQty] = useState(1); // hooks/events need the client return ; } ``` ## الإمكانيات والقيود | | مكون الخادم | مكون العميل | |---|---|---| | يمكنه `await` / جلب البيانات مباشرة | ✅ | ❌ | | الوصول إلى موارد الخادم/الأسرار | ✅ | ❌ | | `useState`/`useEffect`/الأحداث | ❌ | ✅ | | شحن JS إلى المتصفح | ❌ (صفر) | ✅ | ## لماذا يهم - **JavaScript للعميل أقل** → تحميل أسرع والتفاعل أسرع. - **جلب البيانات بجانب المصدر** (لا توجد جولة API من المتصفح، ولا تعريض بيانات اعتماديات قاعدة البيانات). - أنت **تركب** عليها: مكونات الخادم تعرض مكونات العميل للـ "جزر" التفاعلية. يمكن لمكون الخادم أن يعرض مكون عميل، لكن **ليس** العكس. ## التحذير الخصائص التي يتم تمريرها عبر حدود الخادم→العميل يجب أن تكون **قابلة للتسلسل** — لا يمكنك تمرير الدوال أو مثيلات الفئات. RSC يغير النموذج الذهني من "كل شيء يعمل في المتصفح" إلى "العرض على الخادم بشكل افتراضي، اختر العميل فقط حيث تحتاج إلى التفاعل."

	مكون الخادم	مكون العميل
يمكنه `await` / جلب البيانات مباشرة	✅	❌
الوصول إلى موارد الخادم/الأسرار	✅	❌
`useState`/`useEffect`/الأحداث	❌	✅
شحن JS إلى المتصفح	❌ (صفر)	✅

النوعان

الإمكانيات والقيود

لماذا يهم

التحذير

أسئلة ذات صلة