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

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

Majd Muhtaseb28‏/04‏/202512 دقيقة

مقدمة

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

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

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

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

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

إعداد مشروعك (مثال Next.js)

على الرغم من أن RSCs هي ميزة React، إلا أنها تستخدم بشكل شائع داخل أطر عمل مثل Next.js التي توفر البنية التحتية اللازمة. دعونا نلقي نظرة على إعداد Next.js بسيط.

1. إنشاء تطبيق Next.js:

   npx create-next-app@latest my-rsc-app
   cd my-rsc-app
   

2. تحديد مكونات الخادم:

   بشكل افتراضي، في Next.js 13 والإصدارات الأحدث مع دليل app ، يتم التعامل مع جميع المكونات على أنها مكونات الخادم ما لم يتم وضع علامة صريحة عليها كمكونات العميل. يمكنك وضع علامة على المكون كمكون عميل عن طريق إضافة 'use client' في الجزء العلوي من الملف.

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

فيما يلي مثال على جلب البيانات من واجهة برمجة تطبيقات (API) داخل مكون الخادم:

// app/components/Posts.js
async function getPosts() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts');
  if (!res.ok) {
    throw new Error('فشل في جلب البيانات');
  }
  return res.json();
}

export default async function Posts() {
  const posts = await getPosts();

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

في هذا المثال، تجلب الدالة getPosts البيانات على الخادم. ثم يقوم المكون Posts بعرض البيانات التي تم جلبها. لاحظ أن هذا غير متزامن - تدعم مكونات الخادم async/await مباشرة.

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

يمكنك تضمين مكونات العميل داخل مكونات الخادم. يتيح لك ذلك مزج العرض من جانب الخادم مع عناصر تفاعلية من جانب العميل.

// app/components/Counter.js (مكون عميل)
'use client';

import { useState } from 'react';

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

  return (
    <div>
      <p>العد: {count}</p>
      <button onClick={() => setCount(count + 1)}>زيادة</button>
    </div>
  );
}

// app/page.js (مكون الخادم)
import Counter from './components/Counter';

export default function Home() {
  return (
    <div>
      <h1>مرحبًا بك في تطبيقي</h1>
      <Counter />
    </div>
  );
}

خاتمة

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