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

مكونات React الخادمة: مستقبل تطبيقات الويب؟

Majd Muhtaseb09‏/09‏/20258 دقيقة

مقدمة

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

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

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

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

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

مثال

دعونا نفكر في مثال بسيط لمكون يجلب منشورات المدونة من قاعدة البيانات:

// Server Component (PostList.js)
import { db } from './db'; // اتصال قاعدة بيانات مفترض

async function getPosts() {
  // محاكاة جلب قاعدة البيانات
  await new Promise(resolve => setTimeout(resolve, 500));
  return db.posts.findAll();
}

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

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

//قاعدة بيانات وهمية
export const db = {
 posts: {
  findAll: async () => {
   return ([{id: 1, title: "المنشور الأول"}, {id:2, title: "المنشور الثاني"}])
  }
 }
}

في هذا المثال، PostList هو مكون خادم. يقوم بجلب البيانات مباشرة من كائن db.posts افتراضي. ثم يتم عرض المنشورات التي تم جلبها في قائمة HTML. يتم إرسال HTML هذا إلى العميل، ويتم شحن الحد الأدنى من JavaScript المطلوب للتفاعل فقط.

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

من المهم أن نفهم أن RSCs تعمل بالتزامن مع مكونات العميل. مكونات العميل هي مكونات React القياسية التي تعمل في المتصفح وتتعامل مع تفاعلات المستخدم وإدارة الحالة والمنطق الآخر من جانب العميل. يتم الإشارة إليها باستخدام التوجيه "use client" في أعلى الملف.

// Client Component (Button.js)
"use client";

import { useState } from 'react';

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

  return (
    <button onClick={() => setCount(count + 1)}>
      تم النقر {count} مرات
    </button>
  );
}

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

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

// Server Component (ParentComponent.js)
import Button from './Button'; // مكون العميل

export default function ParentComponent() {
  return (
    <div>
      <h1>صفحتي</h1>
      <p>يتم عرض هذا المحتوى على الخادم.</p>
      <Button />
    </div>
  );
}

خاتمة

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