Next.js اکنون به توسعه‌دهندگان اجازه می‌دهد توابع مخصوص سرور (server-only) را مستقیماً از داخل یک کامپوننت فراخوانی کنند، که نیاز به ایجاد مسیرهای API جداگانه برای کارهای روزمره مانند ارسال فرم را از بین می‌برد. با استفاده از قابلیت جدید Server Actions، یک فرم HTML واحد می‌تواند بدون نیاز به یک فراخوانی fetch میانی، کد بک‌اند را اجرا کند؛ این کار باعث کاهش کدهای تکراری (boilerplate) و مستحکم‌تر شدن قرارداد بین فرانت‌اند و بک‌اند می‌شود.

چرا روش قدیمی سنگین به نظر می‌رسد

در یک اپلیکیشن معمولی React یا Next.js، یک فرم ساده‌ی «ایجاد پروژه» زنجیره‌ای از مراحل را فعال می‌کند: یک فایل مسیر API، یک درخواست fetch از مرورگر، مدیریت وضعیت‌های بارگذاری (loading) و خطا (error)، هدرهای CORS و در نهایت یک به‌روزرسانی سمت کلاینت برای نمایش داده‌های جدید. هر مرحله باعث اضافه شدن فایل‌ها، خطوط کد و نقاط شکست (points of failure) می‌شود. تیم‌ها حتی زمانی که تنها هدفشان نوشتن یک رکورد در پایگاه داده است، وقت خود را صرف اتصال این قطعات به یکدیگر می‌کنند.

Server Actions شکاف را پر می‌کنند

Server Actions توابع ناهمگام (asynchronous) هستند که تضمین می‌شود فقط روی سرور اجرا شوند. افزودن دستور "use server" در بالای یک فایل به کامپایلر می‌گوید که این کد را از باندل مرورگر خارج کند تا بتواند با امنیت کامل به پایگاه‌های داده، اسرار (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 دریافت می‌کند، داده‌ها را اعتبارسنجی می‌کند، در پایگاه داده می‌نویسد و سپس از Next.js می‌خواهد که صفحه /dashboard را بازنشانی (refresh) کند تا رابط کاربری بدون نیاز به بارگذاری کامل صفحه، پروژه جدید را نشان دهد.

اتصال آن به رابط کاربری (UI)

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

وقتی کاربر روی دکمه ارسال کلیک می‌کند، مرورگر داده‌های فرم را به تابع createProject در سمت سرور ارسال (post) می‌کند. از آنجایی که این کار از رفتار استاندارد فرم HTML استفاده می‌کند، ارسال فرم حتی اگر جاوااسکریپت هنوز بارگذاری نشده باشد نیز کار می‌کند که این امر باعث بهبود عملکرد درک‌شده (perceived performance) در اتصالات کند می‌شود.

مزایای تیم‌ها

  • فایل‌های کمتر – دیگر نیازی به فایل‌های جداگانه pages/api یا app/api برای هر نقطه اتصال (endpoint) نیست.
  • اتصال کمتر – بدون نیاز به فراخوانی‌های دستی fetch و مدیریت صریح CORS.
  • امنیت نوع (type safety) داخلی – امضای تابع بین سرور و کلاینت مشترک است، بنابراین TypeScript می‌تواند ناهماهنگی‌ها را در مراحل اولیه شناسایی کند.
  • مزیت عملکردی – درخواست مستقیماً به تابع سرور می‌رود و از یک پرش شبکه (network hop) اضافی که یک fetch سمت کلاینت ایجاد می‌کرد، عبور می‌کند.

محدودیت‌ها و هشدارها

Server Actions هنوز یک قابلیت اولیه هستند. آن‌ها فقط می‌توانند توابع ناهمگام باشند که با "use server" علامت‌گذاری شده‌اند و نمی‌توانند اشیاء جاوااسکریپت دلخواه را به کلاینت برگردانند؛ آن‌ها باید با یک redirect، یک revalidation یا یک پاسخ ساده (plain response) خاتمه یابند. عیب‌یابی (debugging) ممکن است متفاوت به نظر برسد، زیرا پشته فراخوانی (call stack) از مرورگر به زمان اجرای سرور (server runtime) می‌پرد، که ممکن است توسعه‌دهندگانی را که به لاگ‌های کلاسیک مسیرهای API عادت دارند، غافلگیر کند. همچنین، جریان‌های کاری پیچیده‌ای که شامل چندین میکروسرویس هستند یا نیاز به کدهای وضعیت HTTP دقیق دارند، ممکن است همچنان به یک نقطه اتصال API سنتی نیاز داشته باشند.

نکات قابل توجه

احتمالاً Next.js در نسخه‌های آینده API مربوط به Server Actions را گسترش خواهد داد و پشتیبانی از انواع پاسخ‌های بیشتر و ادغام بهتر با ابزارها را اضافه خواهد کرد. استفاده‌کنندگان اولیه باید برای سنجش پایداری قبل از انتقال ویژگی‌های حیاتی (mission-critical) به این مسیر، چشم به لیست تغییرات (changelog) فریم‌ورک و بازخوردهای جامعه کاربری داشته باشند. نظارت بر اندازه باندل (bundle size) و معیارهای رندرینگ سرور نیز می‌تواند نشان دهد که آیا کاهش کد کلاینت منجر به بهبود ملموس در تأخیر (latency) برای الگوهای ترافیک خاص شما می‌شود یا خیر.

خلاصه کلام

با اجازه دادن به یک کامپوننت برای فراخوانی مستقیم یک تابع مخصوص سرور، Next.js Server Actions آن واسطه‌ای را که مدت‌هاست پروژه‌های React را شلوغ کرده است، حذف می‌کند. نتیجه، کد تمیزتر، رفت و برگشت‌های سریع‌تر و تجربه توسعه‌دهنده روان‌تر است — البته به شرطی که محدودیت‌های فعلی این قابلیت با نیازهای پروژه همخوانی داشته باشد.