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

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

Majd Muhtaseb18‏/11‏/20258 دقيقة

مقدمة

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

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

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

فوائد RSCs

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

مثال

ضع في اعتبارك مكونًا بسيطًا يجلب بيانات من قاعدة بيانات:

المكون العميل (تقليدي):

// ClientComponent.jsx
import { useState, useEffect } from 'react';

function ClientComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    async function fetchData() {
      const response = await fetch('/api/data'); // نقطة نهاية API
      const json = await response.json();
      setData(json);
    }

    fetchData();
  }, []);

  if (!data) {
    return <p>جاري التحميل...</p>;
  }

  return (
    <ul>
      {data.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

export default ClientComponent;

المكون الخادم:

// ServerComponent.jsx
import { db } from './db'; // نفترض أن 'db' هو اتصال قاعدة بيانات

async function ServerComponent() {
  const data = await db.query('SELECT * FROM items');

  return (
    <ul>
      {data.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

export default ServerComponent;

في مثال المكون الخادم، يتم تنفيذ استعلام قاعدة البيانات مباشرة على الخادم. يتلقى العميل فقط HTML المعروض، مما يتجنب الحاجة إلى جلب البيانات وتنفيذ JavaScript. ملاحظة: منطق اتصال قاعدة البيانات هو مجرد مثال؛ قد يتطلب التنفيذ الحقيقي تكوينًا أكثر تعقيدًا للخادم.

اعتبارات

• لا يمكن لـ RSCs استخدام خطافات إدارة حالة جانب العميل مثل useState أو useEffect. إنها مخصصة لعرض البيانات فقط.
• تتطلب التفاعلية مكونات عميل يمكن استيرادها وعرضها داخل RSCs.
• يتطلب إطار عمل مدعوم مثل Next.js أو Remix للتعامل مع تنفيذ RSC والتكامل.

خاتمة

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