إتقان مكونات خادم React (React Server Components) في عام 2026

لقد غيرت مكونات خادم React (RSC) بشكل جذري كيفية بناء تطبيقات React. من خلال نقل منطق العرض إلى الخادم، يمكننا تقليل حزمة JavaScript المرسلة إلى العميل بشكل كبير، مما يؤدي إلى أوقات تحميل أسرع وتجارب مستخدم أفضل. في هذه المقالة، سنستكشف الأنماط المتقدمة وأفضل الممارسات للاستفادة من RSCs في عام 2026.

ما هي مكونات الخادم؟

تقليديًا، كان يتم عرض مكونات React بالكامل على العميل (CSR) أو عرضها مسبقًا على الخادم كـ HTML (SSR) ثم تنشيطها على العميل. تسمح لنا مكونات الخادم بعرض المكونات حصريًا على الخادم. لا يتم إرسال الكود الخاص بها أبدًا إلى المتصفح.

الفوائد

1. حجم حزمة صفر: التبعيات المستخدمة في مكونات الخادم (مثل محللات markdown أو مكتبات التواريخ الثقيلة) تبقى على الخادم.
2. الوصول المباشر إلى الخلفية: يمكنك الاستعلام عن قاعدة البيانات الخاصة بك مباشرة داخل المكون الخاص بك دون كشف نقاط نهاية API.
3. تقسيم الكود التلقائي: يتم تقسيم المكونات العميلة المستوردة من جانب الخادم تلقائيًا.

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

مع RSC، يمكنك جعل مكوناتك async وانتظار البيانات مباشرة.

// app/users/page.tsx
import { db } from '@/lib/db';

export default async function UsersPage() {
  const users = await db.user.findMany();

  return (
    <main>
      <h1>المستخدمين</h1>
      <ul>
        {users.map((user) => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </main>
  );
}

Suspense للبث

نظرًا لأن جلب البيانات قد يكون بطيئًا، قم بتغليف مكوناتك في <Suspense> لإظهار واجهة مستخدم احتياطية على الفور أثناء تحميل البيانات.

import { Suspense } from 'react';
import UserList from './UserList';
import LoadingSkeleton from './LoadingSkeleton';

export default function Page() {
  return (
    <section>
      <h1>مستخدميني</h1>
      <Suspense fallback={<LoadingSkeleton />}>
        <UserList />
      </Suspense>
    </section>
  );
}

التداخل بين مكونات الخادم والعميل

واحدة من أكثر الجوانب إرباكًا هي كيفية الجمع بين مكونات الخادم والعميل.

قاعدة عامة: يمكن لمكونات الخادم استيراد مكونات العميل. لا يمكن لمكونات العميل استيراد مكونات الخادم مباشرة. ومع ذلك، يمكنك تمرير مكون خادم كـ children إلى مكون عميل.

نمط "الأطفال" (Children Pattern)

// ClientComponent.tsx
'use client';

import { useState } from 'react';

export default function ClientWrapper({ children }) {
  const [count, setCount] = useState(0);

  return (
    <div onClick={() => setCount((c) => c + 1)}>
      العدد: {count}
      {children} {/* يمكن أن يكون هذا مكون خادم! */}
    </div>
  );
}

// ServerPage.tsx
import ClientWrapper from './ClientWrapper';
import ServerContent from './ServerContent';

export default function Page() {
  return (
    <ClientWrapper>
      <ServerContent /> {/* هذا يعمل بشكل مثالي */}
    </ClientWrapper>
  );
}

الأخطاء الشائعة

1. استخدام السياق (Context) في مكونات الخادم: السياق هو مفهوم من جانب العميل. إذا كنت بحاجة إلى مشاركة البيانات من جانب الخادم، فمررها كـ props أو استخدم ذاكرة التخزين المؤقت المخصصة لنطاق الطلب.
2. إضافة معالجات الأحداث: لا يمكنك إضافة onClick أو onChange إلى مكون خادم. ينتمي هذا المنطق إلى عقدة ورقة مكون عميل عامة.

الخاتمة

مكونات خادم React ليست مجرد ميزة؛ إنها تحول نموذجي. من خلال فهم الحدود بين الخادم والعميل، يمكنك بناء تطبيقات تفاعلية للغاية وسريعة بشكل لا يصدق.