React Server Components (RSCs) هي من أهم التحولات المعمارية في تاريخ React. إنها تسمح للمكونات بالعمل حصراً على الخادم، مما يلغي JavaScript من جانب العميل لتلك المكونات كلياً.

Server Components مقابل Client Components

جميع المكونات في Next.js App Router هي Server Components بشكل افتراضي. أضف 'use client' في أعلى الملف للانضمام إلى حزمة العميل. التبصّر الجوهري: Client Components ليست سيئة — إنها مختلفة فحسب. التفاعل يعيش في Client Components؛ الوصول إلى البيانات يعيش في Server Components.

أنماط جلب البيانات

في Server Components يمكنك جلب البيانات مباشرة — بدون useEffect، ولا حالة تحميل، ولا fetch من جانب العميل. الـ async/await يعمل على مستوى المكوّن. ادمج هذا مع التخزين المؤقت وإعادة التحقق في Next.js للحصول على طبقة بيانات قوية وبسيطة.

تأليف Server وClient

مرّر البيانات المجلوبة من الخادم كـ props إلى Client Components. يمكنك حتى تمرير Server Components كـ children إلى Client Components — فتحة children هي prop، لذا فهي تعبر الحدود بنظافة. هذا النمط يبقي التفاعل في الأوراق بينما يبقى الوصول إلى البيانات في الجذر.