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

إتقان مكونات React من جهة الخادم: نظرة متعمقة

Majd Muhtaseb12‏/06‏/20257 دقيقة

مقدمة

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

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

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

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

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

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

لإنشاء مكون خادم، عادةً ما تقوم بإضافة التوجيه 'use client' إلى أعلى المكون إذا كان المكون أو يحتوي على مكون عميل تفاعلي.

// ServerComponent.js
// هذا مكون خادم بشكل افتراضي
import { db } from './db';

async function getData() {
  const data = await db.posts.findAll();
  return data;
}

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

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

إليك مثال على مكون عميل:

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

الآن، يمكنك دمجها!

// Page.js
import ServerComponent from './ServerComponent';
import ClientComponent from './ClientComponent';

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

اعتبارات

• لا يوجد تفاعل من جانب العميل: لا يمكن لـ RSCs استخدام خطافات React مباشرة مثل useState أو useEffect. للعناصر التفاعلية، تحتاج إلى مكونات العميل.
• التسلسل: يجب أن تكون البيانات التي يتم تمريرها من الخادم إلى العميل قابلة للتسلسل. قد تحتاج الوظائف والكائنات المعقدة إلى معالجة مختلفة.
• دعم الإطار: يتم دمج RSCs بشكل كبير في أطر عمل مثل Next.js و Remix. قد تختلف تفاصيل التنفيذ المحددة.

خاتمة

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