ما هو إجراء الخادم (Server Action)؟

جزء من قسم أساسيات Next.js في رحلة React على Coddy — الدرس 29 من 47.

يمكنك قراءة البيانات على الـ server الآن. حان الوقت للنصف الآخر: تغييرها.

حتى وقت قريب، كان حفظ سطر واحد من النص يتطلب قدرًا مفاجئًا من التعقيدات والخطوات الإضافية. كنت تكتب نقطة نهاية (endpoint):

// app/api/items/route.js
export async function POST(request) {
    const body = await request.json();
    saveItem(body.text);
    return Response.json({ ok: true });
}

...ثم استدعائها من المتصفح:

await fetch('/api/items', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ text }),
});

ملفان، وعنوان URL، و`method`، و`headers`، و`JSON` في كلا الاتجاهين، لنقل سلسلة نصية واحدة من `form` إلى قاعدة بيانات.

تقوم Server Action بحذف كل ذلك. اكتب دالة async في ملف سطرُه الأول هو 'use server':

// app/actions.js
'use server';

import { saveItem } from '../lib/db';

export async function addItem(formData) {
    saveItem(formData.get('text'));
}

…ومرّر تلك الـ function إلى form:

<form action={addItem}>
    <input name="text" />
    <button type="submit">Add</button>
</form>

هذا هو الأمر برُمّته. هناك ثلاثة تفاصيل تستحق الذكر:

يجب أن يكون 'use server' هو السطر الأول في الملف: وهو نفس نوع العلامة مثل 'use client'، ولكنه يشير إلى الاتجاه الآخر. إنه يقول: كل ما يتم تصديره هنا يعمل على الـ server.
جسم الـ function لا يصل أبدًا إلى المتصفح. بيانات اعتماد قاعدة البيانات الخاصة بك آمنة بداخله: يحصل المتصفح فقط على مرجع يمكنه استدعاؤه.
أنك لم تكتب عنوان URL أبدًا. يقوم Next.js بإنشاء نقطة النهاية (endpoint) لك؛ ويكون action={addItem} هو الربط البرمجي.

أحد الفروق مقارنة بـ Fundamentals: مدخلات الـ form هذه تكون غير محكومة (uncontrolled). لا يوجد useState، ولا value، ولا onChange: يكتفي المتصفح بالاحتفاظ بالـ text، وتكون السمة name هي الطريقة التي يتعرف بها الـ action عليها عند الـ submit.

جرّب بنفسك

لا يتضمّن هذا الدرس تحدّيًا برمجيًا.