العودة للمقالات

إتقان مكونات React Server: دليل عملي

Majd Muhtaseb03‏/12‏/202510 دقيقة

مقدمة

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

ما هي مكونات React Server؟

مكونات RSCs هي مكونات React يتم عرضها على الخادم. لديها العديد من الفوائد الرئيسية:

• تقليل JavaScript من جانب العميل: لا تتطلب RSCs JavaScript من جانب العميل، مما يؤدي إلى أحجام حزم أصغر.
• الوصول المباشر إلى البيانات: يمكن لـ RSCs الوصول مباشرةً إلى مصادر البيانات مثل قواعد البيانات دون الحاجة إلى نقاط نهاية API.
• تحسين الأداء: أوقات تحميل أولية أسرع وتحسين الأداء المتصور للمستخدمين.

الاختلافات الرئيسية عن مكونات العميل

| الميزة | مكونات الخادم | مكونات العميل | | ----------------- | ------------------------------------------------------- | ---------------------------------------------------- | | بيئة التنفيذ | الخادم | المتصفح | | التفاعلية | غير تفاعلية (لا يوجد معالجات الأحداث) | تفاعلية (يمكن استخدام معالجات الأحداث، useState، إلخ.) | | حجم الحزمة | لا تساهم في حزمة جانب العميل | تضيف إلى حزمة جانب العميل | | جلب البيانات | يمكن جلب البيانات مباشرة من قواعد البيانات أو أنظمة الملفات | يتطلب استدعاءات API لجلب البيانات |

مثال بسيط

إليك مثال أساسي لمكون React Server:

// app/components/ServerComponent.js (Server Component)
import { sql } from '@vercel/postgres';

export default async function ServerComponent() {
  const products = await sql`SELECT * FROM products`;

  return (
    <div>
      <h1>المنتجات</h1>
      <ul>
        {products.rows.map((product) => (
          <li key={product.id}>{product.name}</li>
        ))}
      </ul>
    </div>
  );
}

// app/components/ClientComponent.js (Client Component)
'use client';

import { useState } from 'react';

export default function ClientComponent({ initialCount }) {
  const [count, setCount] = useState(initialCount);

  return (
    <div>
      <p>العدد: {count}</p>
      <button onClick={() => setCount(count + 1)}>زيادة</button>
    </div>
  );
}

في هذا المثال، يجلب ServerComponent البيانات مباشرة من قاعدة بيانات. من المهم ملاحظة أنه لا يمكنك استيراد مكونات العميل مباشرةً إلى مكون الخادم. ومع ذلك، يمكنك تمرير البيانات التي تم جلبها في مكون الخادم كخصائص إلى مكون العميل.

استخدام مكونات الخادم والعميل معًا

تأتي القوة الحقيقية من الجمع بين مكونات الخادم ومكونات العميل. يمكن تمرير البيانات التي تم جلبها من جانب الخادم بكفاءة إلى مكونات العميل للعناصر التفاعلية.

// app/page.js
import ServerComponent from './components/ServerComponent';
import ClientComponent from './components/ClientComponent';

export default async function Page() {
  return (
    <div>
      <ServerComponent />
      <ClientComponent initialCount={0} />
    </div>
  );
}

النقاط الرئيسية

• يتم تنفيذ مكونات React Server على الخادم، مما يقلل من JavaScript من جانب العميل ويحسن الأداء.
• يمكن لمكونات الخادم الوصول مباشرة إلى مصادر البيانات.
• اجمع بين مكونات الخادم ومكونات العميل للحصول على أفضل النتائج.

من خلال إتقان مكونات React Server، يمكنك بناء تطبيقات React أسرع وأكثر كفاءة توفر تجربة مستخدم فائقة.