مكونات خادم React (RSC): مستقبل React

تمثل مكونات React Server (RSC) نقلة نوعية في كيفية عرض تطبيقات React في الذكرى السنوية العاشرة لها. تم تقديم مراكز RSC لأول مرة في أواخر عام 2020، وتم إطلاق أول إصدار مستقر من هذه الميزة في عام 2024 كجزء من React 19. تقليديًا، تم تشغيل تطبيقات React على العميل. وهذا يعني أن المتصفح سيقوم بتنزيل حزمة JavaScript التي تحتوي على كافة التعليمات البرمجية اللازمة لتشغيل التطبيق، ثم عرض التطبيق. على الرغم من أن هذا كان له بعض المزايا، إلا أن هذا الأسلوب تسبب في بطء التحميل الأولي، كما أن الحاجة إلى جلب البيانات ومعالجتها على العميل جعلت الأمور أبطأ. باستخدام مكونات React Server، يمكن الآن تشغيل React على الخادم دون إرسالها بالضرورة إلى العميل، مما يؤدي إلى تغيير جذري في كيفية عمل React في جوهره وكيفية استخدامه لبناء التطبيقات.

عرض جانب الخادم (SSR)

لفهم مكونات React Server (RSC)، نحتاج أولاً إلى فهم كيفية عمل العرض الجانبي للخادم (SSR). إذا كنت على دراية بـ SSR فلا تتردد في تخطي هذا القسم. SSR هي تقنية لتطوير الويب تعرض صفحة ويب على الخادم بدلاً من المتصفح.

كيف يعمل

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

فوائد

1. التحميل الأولي للصفحة يكون أسرع
2. تحسين محركات البحث

في حين أن كلاً من React Server Components وSSR يتضمنان معالجة من جانب الخادم، فإن RSC يمنحنا مرونة أكبر، مما يسمح بعرض بعض المكونات على الخادم وعرض بعض المكونات على العميل. وهذا على عكس SSR، حيث يجب إنشاء صفحة HTML بأكملها على جانب الخادم.

حيث تتألق RSCs

مع ازدياد تعقيد تطبيقات الويب، يتم دفع المزيد من الوظائف إلى المتصفحات لتقديم تصورات معقدة. توفر مراكز RSC تحسنًا كبيرًا في الأداء في تقديم مثل هذه التطبيقات المعقدة كثيفة البيانات.

لنفكر في مثال شائع لجلب البيانات من واجهة برمجة التطبيقات (API) وعرضها في المتصفح.

سيبدو مكون React التقليدي كما يلي:

import React, {useState, useEffect} from 'react'

export default function ClientSideReactPage() {
    const [todoList, setTodoList] = useState([]);
    const [isLoading, setIsLoading] = useState(true);
    const [errorMessage, setErrorMessage] = useState(null);

useEffect(()=>{
    const fetchToDoList = async ()=>{
        const response = await fetch('https://demosite.com/toDoList');
        const data = await response.json();
        setTodoList(data);
        setIsLoading(false);
    }
    fetchToDoList();
},[]);
  return (
    <ul>{todoList.map(list=><li key={list?.id}>{list?.name}</li>)}</ul>
  )
}

في النهج التقليدي، لديك قطعة من الدولة لنفسك todoList. ثم، لديك useEffect لجلب البيانات، وبعد جلب البيانات، تقوم بتحديث ملف todoList استخدام setTodoList، مما يؤدي إلى إعادة عرض المكون ويظهر لك قائمة ملفاتك todoList. على الرغم من أن هذا يبدو جيدًا، إلا أنه ليس الطريقة الأمثل للقيام بذلك.

أولا، تحتاج إلى الحفاظ على حالة الخاص بك todoList, isLoading العلم، و الخاص بك errorMessage. ثم عليك أن تتبع useEffect وتبعياتها، والتي عندما لا يتم التعامل معها بشكل صحيح سوف تتسبب في الكثير من عمليات إعادة العرض. ويتم هذا كله بعد تنزيل حزمة JS الأولية بواسطة المتصفح، وتشغيل المكون أولاً دون أي بيانات. تيتم جلب البيانات ثم يتم إعادة عرض المكون باستخدام ملف todoList. هذه خطوات كثيرة وتستغرق الكثير من الوقت عندما يكون تعقيد عنصر يزيد أو يزيد عدد هذه المكونات على صفحة الويب.

الآن، دعونا نقارن هذا بما سيبدو عليه مع مكونات React Server.

export default async function ServerSideReactPage() {
  const todoList = await fetch("https://demosite.com/toDoList").then((res) =>
    res.json()
  );
  return (
    <ul>
      {todoList.map((list) => (
        <li key={list?.id}>{list?.name}</li>
      ))}
    </ul>
  );
}

عند مقارنة نهج RSC مع النهج التقليدي، يمكننا أن نرى أننا لسنا بحاجة لإدارة أي حالة أو تأثيرات الاستخدام. يتم إنشاء HTML النهائي من البيانات التي تم تجميعها وإرسالها إلى المتصفح. يتطلب هذا تعليمات برمجية أقل بكثير لتحقيق نفس الوظيفة ويكون أسرع لأنه لا توجد حزمة JS لتنزيلها أولاً، بالإضافة إلى ذلك، لا توجد عمليات إعادة عرض متعددة. تتألق مراكز RSC أيضًا حيث يلزم إجراء حسابات باهظة الثمن من الناحية الحسابية لعرض أحد المكونات، وهذه الوظائف باهظة الثمن لا تصل أبدًا إلى المتصفح ولكن يتم تنفيذها على الخادم (وهو أقوى بكثير من المتصفح) وتعيد HTML النهائي إلى المتصفح لعرضه .

خاتمة

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