ما هي الـ Server Actions في React 19 وكيف تبسّط إرسال النماذج بدون جافاسكربت؟

الإجابة المختصرة

هي دوال غير متزامنة تنفذ حصرياً على الخادم ويمكن ربطها مباشرة بخاصية action في وسم <form>، وتعمل حتى لو تم تعطيل JavaScript في متصفح العميل (Progressive Enhancement).

الشرح

بدلاً من كتابة معالج onSubmit يدوي وتغليفه بـ e.preventDefault() واستدعاء API خارجي، يتيح React 19 تمرير دالة Server Action مباشرة للنموذج. يستقبل السيرفر كائن FormData، ويقوم بتعديل قاعدة البيانات، ثم يعيد ريأكت تحديث وتصيير الصفحة تلقائياً مع معالجة التحقق والتحديثات التفاؤلية.

مثال بالكود

// خادم: دالة Server Action
async function updateUsername(formData: FormData) {
  'use server';
  const newName = formData.get('username');
  await db.user.update({ name: String(newName) });
}

// مكون عميل أو خادم
function ProfileForm() {
  return (
    <form action={updateUsername}>
      <input name="username" defaultValue="أحمد" />
      <button type="submit">حفظ الاسم</button>
    </form>
  );
}

أخطاء شائعة

• الاعتقاد بأن Server Actions محمية تلقائياً من ثغرات CSRF أو أنها لا تحتاج للتحقق من تصاريح المصادقة.

أسئلة متابعة

• كيف تدمج مكتبة Zod مع نماذج ريأكت لتوفير التحقق من النوع من البداية للنهاية (End-to-End Type-Safety)؟

المصادر

• React docs — Server Functions