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

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

Majd Muhtaseb04‏/05‏/20258 دقيقة

مقدمة إلى مكونات React Server

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

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

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

فهم الفرق: مكونات الخادم مقابل مكونات العميل

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

إليك مثال بسيط باستخدام بنية React:

// مكون الخادم (على سبيل المثال، ProductList.js)
import { getProducts } from './db'; // الوصول المباشر إلى قاعدة البيانات

export default async function ProductList() {
  const products = await getProducts();

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

// مكون العميل (على سبيل المثال، AddToCartButton.js)
'use client'; // هام: ضع علامة على هذا كمكون عميل

import { useState } from 'react';

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

  const handleClick = () => {
    setCount(count + 1);
    // منطق الإضافة إلى سلة التسوق (على سبيل المثال، باستخدام مكتبة إدارة الحالة من جانب العميل)
  };

  return (
    <button onClick={handleClick}>
      أضف إلى السلة ({count})
    </button>
  );
}

لاحظ التوجيه 'use client' في مكون العميل. هذا أمر بالغ الأهمية لإخبار React أن هذا المكون يجب أن يتم تقديمه في المتصفح. لا تحتاج مكونات الخادم إلى أي توجيه من هذا القبيل.

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

تتفوق مكونات الخادم في جلب البيانات. يمكنك استخدام async/await مباشرة داخل المكون:

// مكون الخادم
async function getUserData(userId) {
  // محاكاة جلب بيانات المستخدم من قاعدة بيانات
  await new Promise(resolve => setTimeout(resolve, 500));
  return {
    id: userId,
    name: `المستخدم ${userId}`,
    email: `user${userId}@example.com`
  };
}

export default async function UserProfile({ userId }) {
  const userData = await getUserData(userId);

  return (
    <div>
      <h1>{userData.name}</h1>
      <p>البريد الإلكتروني: {userData.email}</p>
    </div>
  );
}

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

يمكنك دمج مكونات الخادم والعميل بسلاسة داخل نفس التطبيق. يمكن لمكون الخادم تقديم مكون العميل كطفل. ومع ذلك، لا يمكن لمكونات العميل استيراد مكونات الخادم مباشرة.

// مكون الخادم (الأصل)
import AddToCartButton from './AddToCartButton'; // مكون العميل

export default function ProductPage({ productId }) {
  return (
    <div>
      <h1>تفاصيل المنتج</h1>
      <AddToCartButton productId={productId} />
    </div>
  );
}

خاتمة

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