أريد شرح عن React Server Components

خاصية "use server" يتم استخدامها لتمكين ملفات العميل client side من استدعاء وظائف مكتوبة في ملف الخادم server.js.

وبناء عليه لتتمكن من استخدامها يجب أن يكون لديك ملفات تعمل كخادم (في حالتنا server.js) ويُكتب فيه الشيفرات التي تقوم بحفظ البيانات إلى قواعد البيانات، والتي في الغالب تكون على هيئة واجهات برمجية api، ويتم اختيار وظيفة أو عدة وظائف وإضافة هذه الخاصية إليهم "use server" فيمكنك استدعاء هذه الوظائف من جهة العميل (الذي هو يعتبر المتصفح).

// server.js
async function addToCart(data) {
  'use server';
  //  اكتب الكود الذي يضيف إلى السلة هنا
}

ومن جهة العميل

// client.js
import { addToCart } from './server'; // استبدل 'server' بمسار ملف الخادم الفعلي

// استدعاء الدالة من الجانب العميل
const someData = { /* بيانات معينة */ };
addToCart(someData);

وبهذا الشكل يتمكن المستخدمون من استدعاء وظائف مكتوبة على الخادم.

أولاً ال React Server Components هي طريقة جديدة في React لبناء مكونات يتم تنفيذها على جهاز الخادم بدلاً من العميل.

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

بالنسبة لاستخدام خاصية "use server" إلي المثال التالي للتوضيح بجانب الشرح في التعليق السابق 

يتم تعريف دالة requestUsername التي تستخدم use server. هذه الدالة تستقبل معلومات النموذج كوحدات FormData وتقوم بمعالجة الطلب. عند استدعاءها، ستتم تنفيذها على الخادم بدلاً من العميل.

// App.js

async function requestUsername(formData) {
  'use server';
  const username = formData.get('username');
  // ...
}

export default function App() {
  return (
    <form action={requestUsername}>
      <input type="text" name="username" />
      <button type="submit">Request</button>
    </form>
  );
}

في مكون App، يتم عرض نموذج يحتوي على حقل إدخال لاسم المستخدم وزر لتقديم الطلب. عند تقديم النموذج، سيتم إرسال البيانات إلى دالة requestUsername.

مرحبا
use server تستخدمها فقط عندما  تريد استخدام  React Server Components وتشير use server الي الوظائف الموجود علي السرفر التي يمكن لل client استدعائها ولكي تستخدمها  اولا أضف  use server في  اعلي ال function  وهي تعمل علي علامة على الوظيفة على أنها قابلة للاستدعاء من قبل العميل وتسمي بذاللك Server Actions
 

async function addToCart(data) {
  'use server';
  // ...
}

وبعد ذاللك يمكن استدعائها
 

export default function App() {
  return (
    <form action={addToCart}>
      <input type="text" name="cartItem" />
      <button type="submit">Request</button>
    </form>
  );
}

ما تتحدث عنه هو Server Components وهي ميزة جديدة في React وعليك استخدام أحدث إصدار من React وهو 18.20 لتستخدمها.

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

أو حتى جلب البيانات من نفس السيرفر، فتخيل مكون أب بداخله مكونين أبناء، ويقوم المكون الأب بجلب بيانات أو أيًا كان المهم يجري إتصال مع الـ API في الواجهة الخلفية، فلن تظهر المكونات الأبناء حتى يكتمل الإتصال ويتم الحصول على البيانات.

أيضًا في حال حذف مكون ولا نريده في المشروع بعد الآن، سنظل نحصل على البيانات الخاصة به من الواجهة الخلفية، فتخيل مثلاً دالة باسم fetchAllDetails تجلب كل البيانات الخاصة بقسم معين سنجد أنها تجلب بيانات لمكون لم يعد نستخدمه وبالتالي تلك مشكلة بالنسبة لصيانة الكود بسبب وجود كود غير مستخدم ويستهلك موارد التطبيق لدينا والوقت المتاح للتحميل.

أيضًا الطريقة التي تعمل بها React هو تحديث الـ DOM من خلال JS وعرض المكونات من خلال جافاسكريبت، أي في بداية تحميل صفحة التطبيق لا يوجد أي كود HTML لدينا ويلزم استخدام جافاسكريبت لعرض المكونات وتحديث الـ DOM وتلك عملية ثقيلة على المتصفح وأيضًا بطيئة بالنسبة للمستخدم.

لذا ميزة Server Components تقوم بمعالجة المكون على السيرفر (الخادم) ثم توفير كود HTML وجافاسكريبت مباشرًة للمتصفح، أي تتم الأمور كلها من قبل الخادم.

وبالطبع نستخدم ذلك في المكونات التي ليست بحاجة إلى تفاعل مع المستخدم، والتي بحاجة إلى تفاعل نستخدم Client components