ما هي مكونات خادم ريأكت (React Server Components - RSC) وكيف تختلف جوهرياً عن SSR؟

الإجابة المختصرة

الـ RSCs هي مكونات تنفذ حصرياً على الخادم ولا ترسل أي كود JavaScript إلى حزمة العميل على الإطلاق، على عكس SSR الذي يرسل كود JS لكافة المكونات ليتم عمل Hydrate لها.

الشرح

في نظام SSR التقليدي، يعمل كود المكون على السيرفر لإنتاج الـ HTML الأولي، ولكن يجب أيضاً إرسال كود المكون إلى المتصفح للقيام بالـ Hydration. مكونات الـ Server Components تنفذ على الخادم فقط، وتتمتع بوصول مباشر لقواعد البيانات ونظام الملفات، وترسل للمتصفح تمثيلاً بيانياً تسلسلياً (RSC Payload) صفر بايت من كود الجافاسكربت للمتصفح.

مثال بالكود

// هذا المكون ينفذ على الخادم فقط ولا يحمل أي كود JS للمتصفح
import db from '@/lib/db';

export async function ProductReviewList({ productId }: { productId: string }) {
  // استعلام مباشر بقاعدة البيانات بدون إنشاء API endpoint
  const reviews = await db.reviews.findMany({ where: { productId } });

  return (
    <div>
      {reviews.map(r => (
        <p key={r.id}>{r.comment}</p>
      ))}
    </div>
  );
}

أخطاء شائعة

• الاعتقاد بأن RSC تلغي الحاجة لـ Client Components، فالمكونات التفاعلية (مع onClick و useState) لا تزال تتطلب التوجيه "use client".

أسئلة متابعة

• ما هو التوجيه "use client" ومتى يجب استخدامه في بنية RSC؟
• ما هي معضلة الـ Hydration وما هي مسببات الـ Hydration Mismatch الشهيرة؟

المصادر

• React docs — Server Components