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

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

Majd Muhtaseb01‏/05‏/202512 دقيقة

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

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

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

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

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

مثال أساسي

دعنا نوضح بمثال بسيط باستخدام Next.js، وهو إطار عمل شائع يدعم مكونات RSC:

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

export default async function ServerComponent() {
  const data = await db.query('SELECT * FROM products');
  return (
    <div>
      <h1>المنتجات</h1>
      <ul>
        {data.map((product) => (
          <li key={product.id}>{product.name}</li>
        ))}
      </ul>
    </div>
  );
}

// app/page.js (مكون العميل أو مكون خادم آخر)
import ServerComponent from './components/ServerComponent';
import ClientComponent from './components/ClientComponent';

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

// app/components/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>
  );
}

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

• يتم استيراد db فقط في مكون الخادم، وبالتالي يمكن أن يظل حصريًا على الخادم
• يتم تحديد ClientComponent بـ 'use client' للإشارة إلى أنه يجب عرضه في المتصفح. يتعامل مع عناصر واجهة المستخدم التفاعلية.

المزالق الشائعة

• لا توجد واجهات برمجة تطبيقات المتصفح في مكونات الخادم: لا يمكن لمكونات الخادم الوصول إلى واجهات برمجة تطبيقات خاصة بالمتصفح مثل window أو document.
• تفاعل محدود: مكونات الخادم مخصصة بشكل أساسي لعرض المحتوى الثابت أو المعروض مسبقًا. يجب وضع العناصر التفاعلية في مكونات العميل.
• تسلسل البيانات: يجب أن تكون البيانات التي يتم تمريرها من مكونات الخادم إلى مكونات العميل قابلة للتسلسل.

خاتمة

توفر مكونات React Server طريقة قوية لتحسين تطبيقات React الخاصة بك. من خلال فهم فوائدها وقيودها وأفضل الممارسات، يمكنك الاستفادة من مكونات RSC لبناء تطبيقات ويب أسرع وأكثر كفاءة وصديقة لمحركات البحث. جرب وشاهد كيف يمكن لمكونات RSC أن تحدث ثورة في سير عمل التطوير الخاص بك!