فهم مكونات خادم ريأكت (RSC) في Next.js 15

الطريقة القديمة (تصيير العميل)

لسنوات طويلة، كانت تطبيقات React ترسل حزمة جافاسكريبت ضخمة لمتصفح المستخدم. كان المتصفح يضطر لتحميلها، تحليلها، وتشغيلها لمجرد عرض صفحة بسيطة. هذا كان كارثياً للأداء وللـ SEO.

التحول الجذري: RSC

مكونات خادم ريأكت (RSC) تسمح للواجهات بأن تُبنى بالكامل على السيرفر. تمتلك وصولاً مباشراً لقاعدة بياناتك. تولد HTML نقي وترسله للمستخدم. لا يتم إرسال أي جافاسكريبت للمتصفح لهذه المكونات (0 KB JavaScript).

// هذا المكون لا يصل للمتصفح أبداً!
export default async function UserProfile() {
  // اتصال مباشر بقاعدة البيانات داخل مكون ريأكت!
  const user = await db.query('SELECT * FROM users LIMIT 1');
  return <h1>مرحباً، {user.name}</h1>;
}

متى تستخدم 'use client'؟

أنت تضيف 'use client' فقط إذا كان المكون يتطلب تفاعلاً من المستخدم (مثل حدث نقر onClick، أو useState). اجعل مكونات العميل صغيرة جداً كـ 'أوراق' على شجرة مكونات السيرفر الكبيرة.