إتقان مكونات React Server: دليل عملي

Majd Muhtaseb21‏/05‏/20258 دقيقة

مقدمة

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

ما هي مكونات React Server؟

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

الفوائد الرئيسية

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

مثال عملي

لنفترض أنك بحاجة إلى عرض قائمة بالمنتجات التي تم جلبها من قاعدة بيانات.

مكون العميل (تقليدي):

// ClientComponent.jsx
import React, { useState, useEffect } from 'react';

function ClientComponent() {
  const [products, setProducts] = useState([]);

  useEffect(() => {
    async function fetchProducts() {
      const response = await fetch('/api/products'); // افترض وجود نقطة النهاية هذه
      const data = await response.json();
      setProducts(data);
    }

    fetchProducts();
  }, []);

  return (
    <ul>
      {products.map(product => (
        <li key={product.id}>{product.name}</li>
      ))}
    </ul>
  );
}

export default ClientComponent;

مكون الخادم (RSC):

// ServerComponent.jsx (امتداد الملف مهم!)
import React from 'react';
import { getProducts } from './db'; // افترض أن هذه الوظيفة تجلب البيانات من قاعدة البيانات

async function ServerComponent() {
  const products = await getProducts();

  return (
    <ul>
      {products.map(product => (
        <li key={product.id}>{product.name}</li>
      ))}
    </ul>
  );
}

export default ServerComponent;

شرح:

يشير امتداد الملف ServerComponent.jsx (أو .server.js) إلى React أن هذا مكون خادم.
تصل الدالة getProducts() مباشرة إلى قاعدة البيانات (التنفيذ غير موضح هنا ولكن يمكن أن يكون مباشرة داخل المكون).
يحدث جلب البيانات على الخادم.
لاحظ أنه لا يوجد useState أو useEffect حيث يتم جلب البيانات من جانب الخادم.

التكامل مع Next.js

يوفر Next.js دعمًا ممتازًا لمكونات React Server. بشكل افتراضي، يتم التعامل مع المكونات الموجودة في الدليل app على أنها مكونات خادم. يمكنك إنشاء مكونات العميل باستخدام التوجيه 'use client' في أعلى الملف.

خاتمة

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