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

مكونات React Server Components: مستقبل تطبيقات الويب عالية الأداء

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

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

المشكلة: اختناقات جانب العميل

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

الحل: العرض من جانب الخادم، بتصور جديد

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

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

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

• مكونات العميل: هذه هي المكونات التي اعتدنا عليها. إنها تتعامل مع التفاعل وإدارة الحالة وطرق دورة الحياة. إنها تعمل في المتصفح. يمكنك تمييزها بتوجيه "use client".
• مكونات الخادم: تعمل هذه المكونات حصريًا على الخادم. يمكنهم جلب البيانات وإجراء العمليات الحسابية وعرض واجهة المستخدم، لكن لا يمكنهم استخدام الحالة أو طرق دورة الحياة أو واجهات برمجة التطبيقات الخاصة بالمتصفح مباشرةً.

مثال على التعليمات البرمجية: مكون خادم بسيط

// components/Greeting.jsx (مكون خادم)

import { db } from '../lib/db'; // محاكاة اتصال قاعدة بيانات. يمكن لمكونات الخادم الوصول مباشرة إلى قواعد البيانات!

async function getGreeting() {
  // محاكاة استعلام قاعدة بيانات (استبدل بمكالمة db فعلية)
  await new Promise(resolve => setTimeout(resolve, 100)); // محاكاة الكمون
  const greeting = await db.getGreetingText();
  return greeting;
}

export default async function Greeting() {
  const greetingText = await getGreeting();

  return (
    <div>
      <h1>{greetingText}</h1>
    </div>
  );
}

// lib/db.js (قاعدة بيانات محاكاة)
export const db = {
  getGreetingText: async () => {
    return "مرحباً من الخادم!";
  }
}

مثال على التعليمات البرمجية: مكون عميل بسيط

"use client";

// components/Counter.jsx (مكون عميل)

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

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

تأتي القوة الحقيقية لـ RSCs من الجمع بينها وبين مكونات العميل. يمكنك عرض مكونات الخادم كأبناء لمكونات العميل. يمكن لمكونات العميل بعد ذلك التعامل مع التفاعل على جانب العميل.

على سبيل المثال، يمكنك جلب البيانات الأولية باستخدام مكون الخادم ثم استخدام مكون العميل للتعامل مع إدخال المستخدم وتحديث واجهة المستخدم.

مثال على الاستخدام في صفحة Next.js App Router

// app/page.jsx

import Greeting from '../components/Greeting';
import Counter from '../components/Counter';

export default function Home() {
  return (
    <div>
      <Greeting />
      <Counter />
    </div>
  );
}

في هذا السيناريو، Greeting هو مكون خادم يجلب البيانات مباشرة من الخادم. Counter هو مكون عميل يوفر التفاعل. Home ينظم كلاهما.

خاتمة

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