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

مكونات React من جهة الخادم: مستقبل الأداء

Majd Muhtaseb21‏/06‏/20258 دقيقة

مقدمة

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

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

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

فوائد RSCs

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

مثال: جلب البيانات في RSC

فيما يلي مثال بسيط على RSC يجلب البيانات من واجهة برمجة تطبيقات افتراضية:

// components/UserProfile.js (مكون الخادم)
import { getUser } from './api';

export default async function UserProfile({ userId }) {
  const user = await getUser(userId);

  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.email}</p>
    </div>
  );
}

في هذا المثال، تجلب الدالة getUser بيانات المستخدم مباشرة من واجهة برمجة تطبيقات الواجهة الخلفية. نظرًا لأن هذا مكون RSC، يتم تنفيذ المنطق على الخادم.

// app/page.js (مكون العميل الذي يستورد RSC)
'use client'
import UserProfile from './components/UserProfile';
import { useState } from 'react';

export default function Home() {
  const [userId, setUserId] = useState(1);
  return (
    <div>
      <UserProfile userId={userId} />
      <button onClick={() => setUserId(userId + 1)}>تحميل المستخدم التالي</button>
    </div>
  );
}

الخلاصة الرئيسية: يتم التعامل مع مكون UserProfile من جانب الخادم، بينما تتم معالجة أي تفاعل من جانب العميل في مكون Home.

محاذير

• لا يوجد تفاعل من جهة العميل: RSCs ليست تفاعلية ولا يمكنها استخدام ميزات من جهة العميل مثل useState أو useEffect مباشرة. لتحقيق التفاعل، تحتاج إلى دمج RSCs مع مكونات من جهة العميل.
• التسلسل (Serialization): يجب أن تكون البيانات المنقولة من الخادم إلى مكونات العميل قابلة للتسلسل.

خاتمة

تعتبر مكونات React من جهة الخادم أداة قوية لبناء تطبيقات React عالية الأداء وقابلة للتطوير. من خلال نقل منطق العرض إلى الخادم، تقلل RSCs من JavaScript من جهة العميل، وتحسن أوقات التحميل الأولية، وتبسط جلب البيانات. على الرغم من أنها تتطلب نموذجًا ذهنيًا مختلفًا قليلاً، إلا أن فوائد RSCs تجعلها إضافة قيمة إلى مجموعة أدوات مطور React الحديث. جرّبها في أُطر عمل مثل Next.js لتجربة القوة بنفسك.