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

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

Majd Muhtaseb07‏/06‏/202510 دقيقة

مقدمة

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

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

تختلف RSCs عن المكونات التقليدية من جانب العميل في عدة طرق رئيسية:

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

تنفيذ RSCs

لاستخدام RSCs، ستحتاج إلى إطار عمل يدعمها، مثل Next.js 13 أو إصدار أحدث. دعنا نلقي نظرة على مثال بسيط داخل تطبيق Next.js.

أولاً، تأكد من أن المكون الخاص بك معلم كمكون خادم:

// app/components/MyServerComponent.js
export default async function MyServerComponent() {
  const data = await fetchData();

  return (
    <div>
      <h1>Data from Server</h1>
      <p>{data.message}</p>
    </div>
  );
}

async function fetchData() {
  // Simulate fetching data from a database or API
  await new Promise(resolve => setTimeout(resolve, 1000));
  return { message: "Hello from the server!" };
}

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

• تشير الكلمة async إلى أن هذا مكون خادم.
• يمكننا جلب البيانات مباشرة داخل المكون باستخدام await.

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

يمكنك أيضاً استخدام مكونات العميل داخل مكونات الخادم. ما عليك سوى وضع علامة "use client"; في الجزء العلوي من الملف على مكون العميل:

// app/components/MyClientComponent.js
"use client";

import { useState } from 'react';

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

الآن، قم باستيراد واستخدام MyClientComponent داخل MyServerComponent:

// app/components/MyServerComponent.js
import MyClientComponent from './MyClientComponent';

export default async function MyServerComponent() {
  const data = await fetchData();

  return (
    <div>
      <h1>Data from Server</h1>
      <p>{data.message}</p>
      <MyClientComponent />
    </div>
  );
}

async function fetchData() {
  // Simulate fetching data from a database or API
  await new Promise(resolve => setTimeout(resolve, 1000));
  return { message: "Hello from the server!" };
}

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

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

خاتمة

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