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

مكونات React الخادمة: مستقبل تطوير الويب؟

Majd Muhtaseb24‏/07‏/20257 دقيقة

مقدمة

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

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

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

فوائد المكونات الخادمة

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

مثال

إليك مثال بسيط لمكون React خادم يجلب البيانات من قاعدة بيانات (بافتراض أن لديك اتصال قاعدة بيانات مُنشأ):

// ServerComponent.js (مكون خادم)
import { db } from './db'; // اتصال قاعدة بيانات افتراضي

export default async function ServerComponent() {
  const products = await db.query('SELECT * FROM products');

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

يجلب هذا المكون البيانات من قاعدة بيانات مباشرة على الخادم. يتلقى العميل فقط HTML المعروض.

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

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

// ClientComponent.js (مكون العميل)
'use client'; // يحدد هذا كمكون عميل
import { useState } from 'react';

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

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

// ServerComponent.js (مكون خادم)
import ClientComponent from './ClientComponent';

export default async function ServerComponent() {
  // ... (منطق جلب البيانات)

  return (
    <div>
      <h1>المنتجات</h1>
      {/* ... (قائمة المنتجات) */}
      <ClientComponent /> {/* استخدام مكون عميل داخل مكون خادم */}
    </div>
  );
}

خاتمة

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