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

الدليل الشامل لمكونات React Server Components في عام 2024

Majd Muhtaseb25‏/05‏/202510 دقيقة

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

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

فوائد استخدام RSCs

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

المفاهيم الأساسية

• مكونات الخادم: تعمل فقط على الخادم ولا يمكنها استخدام التفاعل من جانب العميل (مثل useState، useEffect).
• مكونات العميل: تعمل في المتصفح ويمكنها استخدام التفاعل من جانب العميل. يجب وضع علامة عليها صراحةً بـ 'use client'.
• التسلسل (Serialization): يجب أن تكون البيانات التي يتم تمريرها من الخادم إلى مكونات العميل قابلة للتسلسل.

مثال عملي (Next.js)

يوضح هذا المثال كيفية جلب البيانات في Server Component وعرضها.

// app/page.js (Server Component)

async function getData() {
  const res = await fetch('https://jsonplaceholder.typicode.com/todos/1');
  // القيمة المرجعية *غير* مسلسلة
  // يمكنك إرجاع Date, Map, Set, إلخ.

  if (!res.ok) {
    // سيؤدي هذا إلى تنشيط أقرب `error.js` Error Boundary
    throw new Error('فشل في جلب البيانات')
  }

  return res.json()
}

export default async function Page() {
  const data = await getData()

  return (
    <div>
      <h1>مهمة</h1>
      <p>معرف المستخدم: {data.userId}</p>
      <p>العنوان: {data.title}</p>
      <p>مكتمل: {data.completed ? 'نعم' : 'لا'}</p>
    </div>
  )
}

مكون Page هذا هو Server Component لأنه غير مميز بـ 'use client'. يقوم بجلب البيانات مباشرة من واجهة برمجة تطبيقات (API) وعرضها.

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

لاستخدام مكونات العميل داخل مكونات الخادم، ستحتاج إلى استيرادها وعرضها. تذكر وضع علامة على Client Component الخاص بك بـ 'use client'.

// app/components/LikeButton.js (Client Component)

'use client';

import { useState } from 'react';

export default function LikeButton() {
  const [likes, setLikes] = useState(0);

  return (
    <button onClick={() => setLikes(likes + 1)}>
      إعجابات: {likes}
    </button>
  );
}

// app/page.js (Server Component)

import LikeButton from './components/LikeButton';

export default async function Page() {
  return (
    <div>
      <h1>صفحتي</h1>
      <LikeButton />
    </div>
  );
}

خاتمة

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