1~
2لقد غيرت مكونات خادم React (RSC) بشكل جذري كيفية بناء تطبيقات React. من خلال نقل منطق العرض إلى الخادم، يمكننا تقليل حزمة JavaScript المرسلة إلى العميل بشكل كبير، مما يؤدي إلى أوقات تحميل أسرع وتجارب مستخدم أفضل. في هذه المقالة، سنستكشف الأنماط المتقدمة وأفضل الممارسات للاستفادة من RSCs في عام 2026.
3~
4## ما هي مكونات الخادم؟
5~
6تقليديًا، كان يتم عرض مكونات React بالكامل على العميل (CSR) أو عرضها مسبقًا على الخادم كـ HTML (SSR) ثم تنشيطها على العميل. تسمح لنا **مكونات الخادم** بعرض المكونات _حصريًا_ على الخادم. لا يتم إرسال الكود الخاص بها أبدًا إلى المتصفح.
7~
8### الفوائد
9~
101.  **حجم حزمة صفر**: التبعيات المستخدمة في مكونات الخادم (مثل محللات markdown أو مكتبات التواريخ الثقيلة) تبقى على الخادم.
112.  **الوصول المباشر إلى الخلفية**: يمكنك الاستعلام عن قاعدة البيانات الخاصة بك مباشرة داخل المكون الخاص بك دون كشف نقاط نهاية API.
123.  **تقسيم الكود التلقائي**: يتم تقسيم المكونات العميلة المستوردة من جانب الخادم تلقائيًا.
13~
14## نمط جلب البيانات
15~
16مع RSC، يمكنك جعل مكوناتك `async` وانتظار البيانات مباشرة.
17~
18```tsx
19// app/users/page.tsx
20import { db } from '@/lib/db';
21~
22export default async function UsersPage() {
23  const users = await db.user.findMany();
24~
25  return (
26    <main>
27      <h1>المستخدمين</h1>
28      <ul>
29        {users.map((user) => (
30          <li key={user.id}>{user.name}</li>
31        ))}
32      </ul>
33    </main>
34  );
35}
36```
37~
38### Suspense للبث
39~
40نظرًا لأن جلب البيانات قد يكون بطيئًا، قم بتغليف مكوناتك في `<Suspense>` لإظهار واجهة مستخدم احتياطية على الفور أثناء تحميل البيانات.
41~
42```tsx
43import { Suspense } from 'react';
44import UserList from './UserList';
45import LoadingSkeleton from './LoadingSkeleton';
46~
47export default function Page() {
48  return (
49    <section>
50      <h1>مستخدميني</h1>
51      <Suspense fallback={<LoadingSkeleton />}>
52        <UserList />
53      </Suspense>
54    </section>
55  );
56}
57```
58~
59## التداخل بين مكونات الخادم والعميل
60~
61واحدة من أكثر الجوانب إرباكًا هي كيفية الجمع بين مكونات الخادم والعميل.
62~
63**قاعدة عامة**: يمكن لمكونات الخادم استيراد مكونات العميل. لا يمكن لمكونات العميل استيراد مكونات الخادم مباشرة. ومع ذلك، يمكنك تمرير مكون خادم كـ `children` إلى مكون عميل.
64~
65### نمط "الأطفال" (Children Pattern)
66~
67```tsx
68// ClientComponent.tsx
69'use client';
70~
71import { useState } from 'react';
72~
73export default function ClientWrapper({ children }) {
74  const [count, setCount] = useState(0);
75~
76  return (
77    <div onClick={() => setCount((c) => c + 1)}>
78      العدد: {count}
79      {children} {/* يمكن أن يكون هذا مكون خادم! */}
80    </div>
81  );
82}
83```
84~
85```tsx
86// ServerPage.tsx
87import ClientWrapper from './ClientWrapper';
88import ServerContent from './ServerContent';
89~
90export default function Page() {
91  return (
92    <ClientWrapper>
93      <ServerContent /> {/* هذا يعمل بشكل مثالي */}
94    </ClientWrapper>
95  );
96}
97```
98~
99## الأخطاء الشائعة
100~
1011.  **استخدام السياق (Context) في مكونات الخادم**: السياق هو مفهوم من جانب العميل. إذا كنت بحاجة إلى مشاركة البيانات من جانب الخادم، فمررها كـ props أو استخدم ذاكرة التخزين المؤقت المخصصة لنطاق الطلب.
1022.  **إضافة معالجات الأحداث**: لا يمكنك إضافة `onClick` أو `onChange` إلى مكون خادم. ينتمي هذا المنطق إلى عقدة ورقة مكون عميل عامة.
103~
104## الخاتمة
105~
106مكونات خادم React ليست مجرد ميزة؛ إنها تحول نموذجي. من خلال فهم الحدود بين الخادم والعميل، يمكنك بناء تطبيقات تفاعلية للغاية وسريعة بشكل لا يصدق.
107~