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

إتقان مكونات React من جانب الخادم: دليل معمق وعملي

Majd Muhtaseb31‏/10‏/202515 دقيقة

مقدمة إلى مكونات React من جانب الخادم (RSCs)

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

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

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

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

| الميزة | مكونات العميل | مكونات الخادم | |-----------------|-------------------------------------------------|-------------------------------------------------| | التنفيذ | يعمل في المتصفح | يعمل على الخادم | | التفاعلية | يدعم الحالة والتأثيرات ومعالجات الأحداث | تفاعلية محدودة؛ في المقام الأول للعرض | | حجم الحزمة | يزيد من حزمة JavaScript من جانب العميل | لا يساهم في حزمة جانب العميل | | جلب البيانات | يتطلب مكالمات API لجلب البيانات | يمكنه الوصول مباشرة إلى موارد جانب الخادم |

إنشاء RSC بسيط

لنقم بإنشاء مكون خادم أساسي باستخدام Next.js، الذي يوفر دعمًا ممتازًا لـ RSCs.

// app/components/ServerComponent.js
import { sql } from '@vercel/postgres';

export default async function ServerComponent() {
  const data = await sql`SELECT * FROM my_table LIMIT 5;`;

  return (
    <div>
      <h1>بيانات من الخادم</h1>
      <ul>
        {data.rows.map((row) => (
          <li key={row.id}>{row.name}</li>
        ))}
      </ul>
    </div>
  );
}

شرح:

• يتم تمييز هذا المكون كـ async، مما يشير إلى أنه يمكنه تنفيذ عمليات غير متزامنة (مثل جلب البيانات).
• يستخدم @vercel/postgres مباشرة للاستعلام عن قاعدة بيانات. لا توجد حاجة إلى نقطة نهاية API.
• يقوم المكون بعرض قائمة بالأسماء التي تم جلبها من قاعدة البيانات.

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

يمكنك دمج مكونات الخادم ومكونات العميل بسلاسة داخل تطبيقك. يتم تحديد مكونات العميل باستخدام توجيه "use client".

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

شرح:

• يميز التوجيه "use client" هذا المكون كمكون عميل.
• يستخدم useState لإدارة حالة جانب العميل.
• يتضمن زر تفاعلي لزيادة العد.

لاستخدام كليهما، يمكن لمكون الخادم عرض مكون العميل

// app/page.js
import ServerComponent from './components/ServerComponent';
import ClientComponent from './components/ClientComponent';

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

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

• تمرير الوظائف مباشرة من الخادم إلى العميل: لا يمكن لمكونات الخادم تمرير الوظائف مباشرة إلى مكونات العميل. ستحتاج إلى استخدام تقنيات مثل معالجات الأحداث في مكون العميل التي تستدعي إجراء خادم أو واجهة برمجة تطبيقات.
• الوصول المحدود إلى واجهة برمجة تطبيقات المتصفح في مكونات الخادم: لا تملك مكونات الخادم حق الوصول إلى واجهات برمجة تطبيقات المتصفح مثل window أو localStorage. إذا كنت بحاجة إلى الوصول إليها، فستحتاج إلى القيام بذلك في مكون العميل.
• مشكلات التسلسل: يجب أن تكون البيانات التي يتم تمريرها من مكونات الخادم إلى العميل قابلة للتسلسل. كن على دراية بهياكل البيانات المعقدة أو الوظائف.

خاتمة

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