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

إتقان مكونات React من جهة الخادم: دليل عملي

Majd Muhtaseb30‏/08‏/202510 دقيقة

ما هي مكونات React من جهة الخادم (RSCs)؟

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

الفوائد:

• تحسين الأداء: تقليل حجم حزمة JavaScript من جهة العميل.
• تحسين محركات البحث (SEO): المحتوى الذي يتم عرضه من جهة الخادم سهل الفهرسة بواسطة محركات البحث.
• الوصول المباشر إلى قاعدة البيانات: يمكن لمكونات الخادم الوصول مباشرة إلى قواعد البيانات دون الكشف عن نقاط نهاية API.

البدء

لاستخدام RSCs، تحتاج عادةً إلى إطار عمل مثل Next.js 13 أو أحدث. توفر هذه الأطر البنية التحتية اللازمة للتعامل مع العرض من جهة الخادم.

إليك مثال بسيط لمكون خادم:

// app/components/MyServerComponent.js
import { getUsers } from './data'; // دالة افتراضية لجلب البيانات

export default async function MyServerComponent() {
  const users = await getUsers();

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

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

• دالة async: يتم تعريف مكونات الخادم كدوال async. يتيح لك ذلك جلب البيانات مباشرة داخل المكون.
• لا يوجد useState/useEffect: لا يمكن لمكونات الخادم استخدام خطافات useState أو useEffect، حيث يتم تشغيلها فقط على الخادم.

جلب البيانات

جلب البيانات في مكونات الخادم واضح ومباشر. يمكنك استخدام fetch أو استعلامات قاعدة البيانات أو أي طريقة أخرى لجلب البيانات من جهة الخادم.

// app/components/data.js
export async function getUsers() {
  // محاكاة جلب البيانات من قاعدة بيانات
  await new Promise(resolve => setTimeout(resolve, 1000)); // محاكاة زمن الوصول
  return [
    { id: 1, name: 'أليس' },
    { id: 2, name: 'بوب' },
    { id: 3, name: 'تشارلي' },
  ];
}

مكونات العميل

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

// app/components/MyClientComponent.js
'use client'; // ضع علامة على هذا المكون كمكون عميل

import { useState } from 'react';

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

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

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

• التوجيه 'use client': يخبر هذا التوجيه React أن هذا المكون يجب أن يتم عرضه على العميل.
• خطافات جهة العميل: يمكنك استخدام useState و useEffect وخطافات React الأخرى داخل مكونات العميل.

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

يمكنك دمج مكونات الخادم والعميل بسلاسة داخل تطبيقك. يمكن لمكونات الخادم عرض مكونات العميل، مما يتيح لك إنشاء واجهات مستخدم ديناميكية وتفاعلية.

// app/page.js (مكون خادم)
import MyServerComponent from './components/MyServerComponent';
import MyClientComponent from './components/MyClientComponent';

export default async function Home() {
  return (
    <div>
      <h1>مرحبا!</h1>
      <MyServerComponent />
      <MyClientComponent />
    </div>
  );
}

خاتمة

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