بث استجابة إجراءات خادم React: استجابة النماذج التدريجية لتحسين تجربة المستخدم

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

فهم إجراءات خادم React

إجراءات الخادم هي دوال غير متزامنة تعمل على الخادم، ويتم بدؤها من مكونات React. إنها توفر العديد من المزايا مقارنة باستدعاءات واجهة برمجة التطبيقات التقليدية (API):

• أمان مُحسّن: تعمل إجراءات الخادم مباشرة على الخادم، مما يقلل من خطر كشف البيانات أو المنطق الحساس للعميل.
• تقليل التعليمات البرمجية المتكررة: تلغي الحاجة إلى مسارات API منفصلة ومنطق جلب البيانات على جانب العميل.
• أداء مُعزز: يمكنها الاستفادة من التصيير من جانب الخادم (SSR) والتخزين المؤقت لأوقات تحميل أولية أسرع وأداء أفضل.
• أمان الأنواع (Type Safety): مع TypeScript، توفر إجراءات الخادم أمانًا كاملاً للأنواع من البداية إلى النهاية، مما يضمن اتساق البيانات بين العميل والخادم.

قوة بث الاستجابة

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

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

تنفيذ استجابة النماذج التدريجية مع إجراءات الخادم

دعنا نستعرض مثالاً لكيفية تنفيذ استجابة النماذج التدريجية باستخدام إجراءات خادم React.

مثال: محول عملات في الوقت الفعلي

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

1. إعداد إجراء الخادم

أولاً، نحدد إجراء الخادم الذي يتعامل مع تحويل العملات.

// server/actions.ts
'use server';

import { unstable_cache } from 'next/cache';

async function getExchangeRate(fromCurrency: string, toCurrency: string): Promise<number> {
  // محاكاة جلب سعر الصرف من واجهة برمجة تطبيقات خارجية
  console.log(`Fetching exchange rate for ${fromCurrency} to ${toCurrency}`);
  await new Promise(resolve => setTimeout(resolve, 500)); // محاكاة تأخير الشبكة
  if (fromCurrency === 'USD' && toCurrency === 'EUR') return 0.92;
  if (fromCurrency === 'EUR' && toCurrency === 'USD') return 1.09;
  if (fromCurrency === 'USD' && toCurrency === 'JPY') return 145;
  if (fromCurrency === 'JPY' && toCurrency === 'USD') return 0.0069;
  throw new Error(`Exchange rate not found for ${fromCurrency} to ${toCurrency}`);
}

export const convertCurrency = async (prevState: any, formData: FormData) => {
  const fromCurrency = formData.get('fromCurrency') as string;
  const toCurrency = formData.get('toCurrency') as string;
  const amount = Number(formData.get('amount'));

  try {
    if (!fromCurrency || !toCurrency || isNaN(amount)) {
      return { message: 'يرجى تقديم مدخلات صالحة.' };
    }

    // محاكاة بث الاستجابة
    await new Promise(resolve => setTimeout(resolve, 250));
    const exchangeRate = await unstable_cache(
      async () => getExchangeRate(fromCurrency, toCurrency),
      [`exchange-rate-${fromCurrency}-${toCurrency}`],
      { tags: [`exchange-rate-${fromCurrency}-${toCurrency}`] }
    )();

    await new Promise(resolve => setTimeout(resolve, 250));
    const convertedAmount = amount * exchangeRate;

    return { message: `المبلغ المحول: ${convertedAmount.toFixed(2)} ${toCurrency}` };
  } catch (e: any) {
    console.error(e);
    return { message: 'فشل تحويل العملة.' };
  }
};

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

2. تنفيذ مكون React

بعد ذلك، نقوم بإنشاء مكون React الذي يستخدم إجراء الخادم.

// app/page.tsx
'use client';

import { useState, useTransition } from 'react';
import { convertCurrency } from './server/actions';
import { useFormState } from 'react-dom';

export default function CurrencyConverter() {
  const [fromCurrency, setFromCurrency] = useState('USD');
  const [toCurrency, setToCurrency] = useState('EUR');
  const [amount, setAmount] = useState('');
  const [isPending, startTransition] = useTransition();
  const [state, formAction] = useFormState(convertCurrency, { message: '' });

  const handleSubmit = async (event: React.FormEvent) => {
    event.preventDefault();
    startTransition(() => {
      formAction(new FormData(event.target as HTMLFormElement));
    });
  };

  return (
    <div>
      <h2>محول عملات في الوقت الفعلي</h2>
      <form action={handleSubmit}>
        <label htmlFor="fromCurrency">من:</label>
        <select id="fromCurrency" name="fromCurrency" value={fromCurrency} onChange={(e) => setFromCurrency(e.target.value)}>
          <option value="USD">USD</option>
          <option value="EUR">EUR</option>
          <option value="JPY">JPY</option>
        </select>

        <label htmlFor="toCurrency">إلى:</label>
        <select id="toCurrency" name="toCurrency" value={toCurrency} onChange={(e) => setToCurrency(e.target.value)}>
          <option value="EUR">EUR</option>
          <option value="USD">USD</option>
          <option value="JPY">JPY</option>
        </select>

        <label htmlFor="amount">المبلغ:</label>
        <input
          type="number"
          id="amount"
          name="amount"
          value={amount}
          onChange={(e) => setAmount(e.target.value)}
        />

        <button type="submit" disabled={isPending}>
          {isPending ? 'جاري التحويل...' : 'تحويل'}
        </button>
      </form>
      <p>{state.message}</p>
    </div>
  );
}

النقاط الرئيسية:

• نستخدم خطاف useFormState لإدارة حالة النموذج واستدعاء إجراء الخادم.
• تقوم حالة isPending من useTransition بتعطيل زر الإرسال وعرض رسالة "جاري التحويل..." أثناء تشغيل الإجراء، مما يعطي ملاحظات للمستخدم.
• تقوم الدالة formAction التي يتم إرجاعها بواسطة useFormState تلقائيًا بمعالجة إرسال النموذج وتحديث الحالة بالاستجابة من إجراء الخادم.

3. فهم التحديثات التدريجية

عندما يرسل المستخدم النموذج، يتم استدعاء الدالة handleSubmit. تقوم بإنشاء كائن FormData من النموذج وتمريره إلى الدالة formAction. ثم يتم تنفيذ إجراء الخادم على الخادم. نظرًا للتأخيرات المصطنعة التي تم إدخالها في إجراء الخادم، ستلاحظ ما يلي:

1. يتغير زر الإرسال إلى "جاري التحويل..." على الفور تقريبًا.
2. بعد تأخير قصير (250 مللي ثانية)، يحاكي الكود الحصول على سعر الصرف.
3. يتم حساب المبلغ المحول وإرسال النتيجة مرة أخرى إلى العميل.
4. يتم تحديث state.message في مكون React، لعرض المبلغ المحول.

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

فوائد استجابة النماذج التدريجية

• تجربة مستخدم مُحسّنة: يوفر ملاحظات فورية للمستخدمين، مما يجعل التطبيق يبدو أكثر استجابة وأقل بطئًا.
• تقليل زمن الانتقال المتصور: من خلال عرض النتائج الوسيطة، يرى المستخدمون العملية على أنها أسرع، حتى لو استغرقت العملية الإجمالية نفس القدر من الوقت.
• تفاعل مُعزز: يبقي المستخدمين متفاعلين من خلال توفير تحديثات في الوقت الفعلي ومنعهم من التخلي عن النموذج بسبب التأخيرات المتصورة.
• زيادة معدلات التحويل: يمكن أن تؤدي تجربة المستخدم الأكثر سلاسة واستجابة إلى معدلات تحويل أعلى، خاصة بالنسبة للنماذج المعقدة.

تقنيات متقدمة

1. استخدام `useOptimistic` لتحديثات واجهة المستخدم الفورية

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

import { useOptimistic } from 'react';

function MyComponent() {
  const [optimisticState, addOptimistic] = useOptimistic(
    initialState,
    (state, newUpdate) => {
      // إرجاع الحالة الجديدة بناءً على التحديث
      return { ...state, ...newUpdate };
    }
  );

  const handleClick = async () => {
    addOptimistic({ someValue: 'تحديث متفائل' });
    await myServerAction();
  };

  return (
    <div>
      <p>{optimisticState.someValue}</p>
      <button onClick={handleClick}>تحديث</button>
    </div>
  );
}

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

2. تنفيذ معالجة الأخطاء وآليات الرجوع

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

// server/actions.ts

export const convertCurrency = async (prevState: any, formData: FormData) => {
  // ...
  try {
    // ...
  } catch (error: any) {
    console.error(error);
    return { message: 'حدث خطأ أثناء تحويل العملة. يرجى المحاولة مرة أخرى لاحقًا.' };
  }
};

على جانب العميل، يمكنك عرض رسالة الخطأ للمستخدم وتوفير خيارات لإعادة محاولة العملية أو الاتصال بالدعم.

3. تخزين أسعار الصرف مؤقتًا لتحسين الأداء

قد يكون جلب أسعار الصرف من واجهة برمجة تطبيقات خارجية عنق زجاجة في الأداء. لتحسين الأداء، يمكنك تخزين أسعار الصرف مؤقتًا باستخدام آلية تخزين مؤقت مثل Redis أو Memcached. توفر unstable_cache من Next.js (كما هو مستخدم في المثال) حلاً مدمجًا للتخزين المؤقت. تذكر إبطال ذاكرة التخزين المؤقت بشكل دوري لضمان تحديث أسعار الصرف.

4. اعتبارات التدويل

عند بناء تطبيقات لجمهور عالمي، من المهم مراعاة التدويل (i18n). هذا يشمل:

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

يمكن أن تساعدك مكتبات مثل Intl و react-intl في تنفيذ التدويل في تطبيقات React الخاصة بك.

أمثلة واقعية وحالات استخدام

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

الخاتمة

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

مع استمرار تطور إجراءات خادم React، يمكننا أن نتوقع ظهور المزيد من الميزات والإمكانيات القوية، مما يزيد من تبسيط تطوير تطبيقات الويب المعقدة والديناميكية.

لمزيد من الاستكشاف

• توثيق إجراءات خادم Next.js
• التوثيق الرسمي لـ React
• Streams API

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