تتيح لك Server Actions في Next.js الاستغناء عن مسارات API في النماذج البسيطة

يتيح Next.js الآن للمطورين استدعاء وظائف مخصصة للخادم فقط (server-only functions) مباشرة من المكون (component)، مما يلغي الحاجة إلى إنشاء مسارات API منفصلة للمهام اليومية مثل إرسال النماذج. من خلال استخدام ميزة Server Actions الجديدة، يمكن لنموذج HTML واحد تشغيل كود الواجهة الخلفية (backend) دون الحاجة إلى استدعاء fetch وسيط، مما يقلل من الكود المتكرر (boilerplate) ويقوي الربط بين الواجهة الأمامية والواجهة الخلفية.

لماذا تبدو الطريقة القديمة مرهقة

في تطبيقات React أو Next.js التقليدية، يؤدي نموذج بسيط مثل "إنشاء مشروع" إلى سلسلة من الخطوات: ملف مسار API، وطلب fetch من المتصفح، ومعالجة حالات التحميل والخطأ، ورؤوس CORS، وأخيرًا تحديث من جانب العميل ليعكس البيانات الجديدة. كل خطوة تضيف ملفات، وأسطرًا من الكود، ونقاط فشل محتملة. تقضي الفرق وقتًا في ربط هذه الأجزاء معًا حتى عندما يكون الهدف الوحيد هو كتابة سجل في قاعدة البيانات.

Server Actions تسد الفجوة

تُعد Server Actions وظائف غير متزامنة (asynchronous functions) تضمن العمل على الخادم فقط. إن إضافة التوجيه "use server" في أعلى الملف يخبر المترجم (compiler) بإبقاء الكود خارج حزمة المتصفح (browser bundle)، بحيث يمكنه الوصول بأمان إلى قواعد البيانات، أو الأسرار (secrets)، أو أي مورد مخصص للخادم فقط. ولأن الوظيفة تعيش على الخادم، يمكن للمكون استدعاؤها مباشرة عبر سمة action في عنصر <form> أصلي.

تعريف الـ action

export async function createProject(formData: FormData) {
  const title = formData.get('title') as string;

  if (!title) throw new Error('Title is required');

  await db.project.create({
    data: { title }
  });

  revalidatePath('/dashboard');
}

تستقبل الوظيفة كائن FormData وتتحقق من صحة البيانات المرسلة (payload)، ثم تكتب في قاعدة البيانات، وتطلب بعد ذلك من Next.js تحديث صفحة /dashboard حتى تظهر واجهة المستخدم المشروع الجديد دون الحاجة إلى إعادة تحميل كاملة للصفحة.

ربطها بواجهة المستخدم

export default function NewProjectForm() {
  return (
    <form action={createProject}>
      <input type="text" name="title" required />
      <SubmitButton />
    </form>
  );
}

عندما ينقر المستخدم على زر الإرسال، يقوم المتصفح بإرسال بيانات النموذج إلى وظيفة createProject الموجودة في جانب الخادم. ولأن هذا يستخدم سلوك نماذج HTML القياسي، فإن عملية الإرسال تعمل حتى لو لم يتم تحميل JavaScript بعد، مما يحسن الأداء المتصور في الاتصالات البطيئة.

ما الذي تستفيده الفرق

• ملفات أقل – لا حاجة لملفات pages/api أو app/api منفصلة لكل نقطة نهاية (endpoint).
• ربط أقل – لا حاجة لاستدعاءات fetch يدوية، ولا معالجة صريحة لـ CORS.
• أمان أنواع مدمج (Built-in type safety) – يتم مشاركة توقيع الوظيفة (function signature) بين الخادم والعميل، مما يسمح لـ TypeScript باكتشاف عدم التطابق مبكرًا.
• أفضلية في الأداء – ينتقل الطلب مباشرة إلى وظيفة الخادم، متجاوزًا قفزة الشبكة الإضافية التي قد يسببها استدعاء fetch من جانب العميل.

القيود والتحذيرات

لا تزال Server Actions ميزة في مراحلها الأولى. يمكن أن تكون فقط وظائف غير متزامنة (async functions) مميزة بـ "use server"، ولا يمكنها إرجاع كائنات JavaScript عشوائية إلى العميل؛ بل يجب أن تنتهي بإعادة توجيه (redirect)، أو إعادة تحقق (revalidation)، أو استجابة بسيطة. قد يبدو تصحيح الأخطاء (debugging) مختلفًا لأن مكدس الاستدعاءات (call stack) ينتقل من المتصفح إلى وقت تشغيل الخادم (server runtime)، مما قد يفاجئ المطورين المعتادين على سجلات مسارات API التقليدية. كما أن سير العمل المعقد الذي يتضمن خدمات مصغرة (microservices) متعددة أو يتطلب رموز حالة HTTP دقيقة قد لا يزال يتطلب نقطة نهاية API تقليدية.

ما يجب مراقبته

من المرجح أن يقوم Next.js بتوسيع واجهة برمجة تطبيقات Server Actions في الإصدارات القادمة، مع إضافة دعم لأنواع استجابة أكثر وتكامل أفضل مع الأدوات. يجب على المتبنين الأوائل مراقبة سجل التغييرات (changelog) الخاص بالإطار البرمجي وتعليقات المجتمع لتقييم الاستقرار قبل نقل الميزات الحساسة إلى هذا المسار. كما يمكن لمراقبة حجم الحزمة (bundle size) ومقاييس العرض على الخادم (server-rendering metrics) أن تكشف ما إذا كان تقليل كود العميل يترجم إلى مكاسب ملموسة في زمن الاستجابة (latency) لأنماط حركة المرور الخاصة بك.

الخلاصة

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