اکشن‌های سرور ری‌اکت: ساده‌سازی پردازش فرم در سمت سرور

اکشن‌های سرور ری‌اکت (React Server Actions) که در ری‌اکت ۱۸ معرفی و در Next.js به طور قابل توجهی بهبود یافتند، رویکردی انقلابی برای مدیریت ارسال فرم‌ها و تغییرات داده‌ها به طور مستقیم در سرور ارائه می‌دهند. این قابلیت قدرتمند، فرآیند توسعه را ساده‌تر کرده، امنیت را افزایش می‌دهد و عملکرد را در مقایسه با روش‌های سنتی دریافت و دستکاری داده در سمت کلاینت بهبود می‌بخشد.

اکشن‌های سرور ری‌اکت چه هستند؟

اکشن‌های سرور، توابع ناهمزمانی (asynchronous) هستند که در سرور اجرا می‌شوند و می‌توانند مستقیماً از کامپوننت‌های ری‌اکت فراخوانی شوند. آن‌ها به شما این امکان را می‌دهند که وظایف سمت سرور را انجام دهید، مانند:

• ارسال فرم‌ها: پردازش امن داده‌های فرم در سرور.
• تغییرات داده‌ها: به‌روزرسانی پایگاه‌داده‌ها یا APIهای خارجی.
• احراز هویت: مدیریت ورود و ثبت‌نام کاربران.
• منطق سمت سرور: اجرای منطق تجاری پیچیده بدون افشای آن به کلاینت.

مزیت کلیدی اکشن‌های سرور این است که به شما امکان می‌دهند کد سمت سرور را درون کامپوننت‌های ری‌اکت خود بنویسید و نیاز به مسیرهای API جداگانه و منطق پیچیده دریافت داده در سمت کلاینت را از بین ببرید. این هم‌جواری (co-location) رابط کاربری و منطق سمت سرور منجر به یک کدبیس قابل نگهداری‌تر و کارآمدتر می‌شود.

مزایای استفاده از اکشن‌های سرور ری‌اکت

استفاده از اکشن‌های سرور ری‌اکت چندین مزیت قابل توجه دارد:

توسعه ساده‌تر

اکشن‌های سرور با اجازه دادن به شما برای مدیریت ارسال فرم‌ها و تغییرات داده‌ها مستقیماً در کامپوننت‌های ری‌اکت، کدهای تکراری (boilerplate) را کاهش می‌دهند. این امر نیاز به نقاط پایانی (endpoints) API جداگانه و منطق پیچیده دریافت داده در سمت کلاینت را از بین می‌برد، فرآیند توسعه را ساده‌تر می‌کند و درک و نگهداری کد شما را آسان‌تر می‌سازد. یک فرم تماس ساده را در نظر بگیرید. بدون اکشن‌های سرور، شما به یک مسیر API جداگانه برای مدیریت ارسال فرم، جاوا اسکریپت سمت کلاینت برای ارسال داده‌ها و منطق مدیریت خطا هم در کلاینت و هم در سرور نیاز دارید. با اکشن‌های سرور، همه اینها می‌تواند در خود کامپوننت مدیریت شود.

امنیت افزایش‌یافته

با اجرای کد در سرور، اکشن‌های سرور سطح حمله (attack surface) برنامه شما را کاهش می‌دهند. داده‌های حساس و منطق تجاری از کلاینت دور نگه داشته می‌شوند و از دستکاری آن‌ها توسط کاربران مخرب جلوگیری می‌شود. به عنوان مثال، اطلاعات اعتباری پایگاه‌داده یا کلیدهای API هرگز در کد سمت کلاینت افشا نمی‌شوند. تمام تعاملات با پایگاه‌داده در سرور اتفاق می‌افتد و خطر تزریق SQL یا دسترسی غیرمجاز به داده‌ها را کاهش می‌دهد.

عملکرد بهبودیافته

اکشن‌های سرور می‌توانند با کاهش مقدار جاوا اسکریپتی که باید در کلاینت دانلود و اجرا شود، عملکرد را بهبود بخشند. این امر به ویژه برای کاربرانی که از دستگاه‌های کم‌قدرت یا با اتصال اینترنت کند استفاده می‌کنند، مفید است. پردازش داده‌ها در سرور انجام می‌شود و فقط به‌روزرسانی‌های لازم رابط کاربری به کلاینت ارسال می‌شود که منجر به بارگذاری سریع‌تر صفحات و تجربه کاربری روان‌تر می‌شود.

به‌روزرسانی‌های خوش‌بینانه (Optimistic Updates)

اکشن‌های سرور به طور یکپارچه با Suspense و Transitions در ری‌اکت ادغام می‌شوند و به‌روزرسانی‌های خوش‌بینانه را امکان‌پذیر می‌کنند. به‌روزرسانی‌های خوش‌بینانه به شما اجازه می‌دهند که رابط کاربری را بلافاصله به‌روز کنید، حتی قبل از اینکه سرور عمل را تأیید کند. این کار تجربه کاربری پاسخ‌گوتر و جذاب‌تری را فراهم می‌کند، زیرا کاربران مجبور نیستند برای دیدن نتایج اقدامات خود منتظر پاسخ سرور بمانند. در تجارت الکترونیک، افزودن یک کالا به سبد خرید می‌تواند بلافاصله نمایش داده شود در حالی که سرور در پس‌زمینه افزودن آن را تأیید می‌کند.

بهبود تدریجی (Progressive Enhancement)

اکشن‌های سرور از بهبود تدریجی پشتیبانی می‌کنند، به این معنی که برنامه شما حتی اگر جاوا اسکریپت غیرفعال باشد یا بارگذاری نشود، همچنان می‌تواند کار کند. وقتی جاوا اسکریپت غیرفعال است، فرم‌ها مانند فرم‌های HTML سنتی ارسال می‌شوند و سرور ارسال را مدیریت کرده و کاربر را به صفحه جدیدی هدایت می‌کند. این تضمین می‌کند که برنامه شما برای همه کاربران، صرف نظر از پیکربندی مرورگر یا شرایط شبکه، قابل دسترسی باقی بماند. این امر به ویژه برای دسترسی‌پذیری و سئو مهم است.

چگونه از اکشن‌های سرور ری‌اکت استفاده کنیم؟

برای استفاده از اکشن‌های سرور ری‌اکت، باید از یک فریم‌ورک که از آنها پشتیبانی می‌کند، مانند Next.js، استفاده کنید. در اینجا یک راهنمای گام به گام آمده است:

۱. تعریف اکشن سرور

یک تابع ناهمزمان ایجاد کنید که در سرور اجرا شود. این تابع باید منطقی را که می‌خواهید در سرور اجرا کنید، مانند به‌روزرسانی پایگاه‌داده یا فراخوانی یک API، مدیریت کند. تابع را با دستور `"use server"` در بالا علامت‌گذاری کنید تا نشان دهید که یک اکشن سرور است. این دستور به کامپایلر ری‌اکت می‌گوید که با تابع به عنوان یک تابع سمت سرور رفتار کند و به طور خودکار سریال‌سازی و دی‌سریال‌سازی داده‌ها بین کلاینت و سرور را مدیریت کند.

// app/actions.js
'use server'

import { revalidatePath } from 'next/cache';
import { saveMessage } from './db';

export async function createMessage(prevState, formData) {
  const message = formData.get('message');

  try {
    await saveMessage(message);
    revalidatePath('/'); // کش مسیر را پاک می‌کند
    return { message: 'پیام با موفقیت ذخیره شد!' };
  } catch (e) {
    return { message: 'ذخیره پیام ناموفق بود' };
  }
}

توضیحات:

• دستور `'use server'` این تابع را به عنوان یک اکشن سرور مشخص می‌کند.
• تابع `revalidatePath('/')` کش مسیر را پاک می‌کند تا اطمینان حاصل شود که داده‌های به‌روزشده در درخواست بعدی دریافت می‌شوند. این برای حفظ یکپارچگی داده‌ها حیاتی است.
• تابع `saveMessage(message)` یک جایگزین برای منطق تعامل واقعی شما با پایگاه‌داده است. فرض بر این است که شما تابع `saveMessage` را در جای دیگری برای ذخیره پیام در پایگاه‌داده خود تعریف کرده‌اید.
• این تابع یک شیء وضعیت (state) برمی‌گرداند که می‌توان از آن برای نمایش بازخورد به کاربر استفاده کرد.

۲. وارد کردن و استفاده از اکشن سرور در کامپوننت

اکشن سرور را به کامپوننت ری‌اکت خود وارد کرده و از آن به عنوان پراپ `action` در یک عنصر فرم استفاده کنید. هوک `useFormState` می‌تواند برای مدیریت وضعیت فرم و نمایش بازخورد به کاربر استفاده شود.

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

import { useFormState } from 'react-dom';
import { createMessage } from './actions';

export default function Home() {
  const [state, formAction] = useFormState(createMessage, {message: ''});

  return (
    

      پیام:
      
      ارسال
      {state?.message && 
{state.message}
}
    
  );
}

توضیحات:

• دستور `'use client'` مشخص می‌کند که این یک کامپوننت کلاینت است (زیرا از هوک `useFormState` استفاده می‌کند).
• `useFormState(createMessage, {message: ''})` وضعیت فرم را با اکشن سرور `createMessage` مقداردهی اولیه می‌کند. آرگومان دوم وضعیت اولیه است.
• پراپ `action` عنصر `form` با `formAction` که توسط `useFormState` بازگردانده شده، تنظیم می‌شود.
• متغیر `state` حاوی مقدار بازگشتی از اکشن سرور است که می‌توان از آن برای نمایش بازخورد به کاربر استفاده کرد.

۳. مدیریت داده‌های فرم

درون اکشن سرور، می‌توانید با استفاده از `FormData` API به داده‌های فرم دسترسی پیدا کنید. این API راهی راحت برای دسترسی به مقادیر فیلدهای فرم فراهم می‌کند.

'use server'

export async function createMessage(prevState, formData) {
  const message = formData.get('message');

  // ...
}

۴. مدیریت خطاها

از بلوک‌های `try...catch` برای مدیریت خطاهایی که ممکن است در حین اجرای اکشن سرور رخ دهند، استفاده کنید. یک پیام خطا را در شیء وضعیت برگردانید تا به کاربر نمایش داده شود.

'use server'

export async function createMessage(prevState, formData) {
  const message = formData.get('message');

  try {
    // ...
  } catch (e) {
    return { message: 'ذخیره پیام ناموفق بود' };
  }
}

۵. اعتبارسنجی مجدد داده‌ها (Revalidate)

پس از اینکه یک اکشن سرور با موفقیت داده‌ها را تغییر داد، ممکن است نیاز به اعتبارسنجی مجدد کش داده‌ها داشته باشید تا اطمینان حاصل شود که رابط کاربری آخرین تغییرات را منعکس می‌کند. از توابع `revalidatePath` یا `revalidateTag` از `next/cache` برای اعتبارسنجی مجدد مسیرها یا تگ‌های خاص استفاده کنید.

'use server'

import { revalidatePath } from 'next/cache';

export async function createMessage(prevState, formData) {
  // ...
  revalidatePath('/'); // کش مسیر را پاک می‌کند
  // ...
}

کاربردهای پیشرفته

تغییر داده‌ها

اکشن‌های سرور به ویژه برای تغییر داده‌ها، مانند به‌روزرسانی پایگاه‌داده‌ها یا APIهای خارجی، بسیار مناسب هستند. می‌توانید از اکشن‌های سرور برای مدیریت تغییرات پیچیده داده‌ها که به منطق سمت سرور نیاز دارند، مانند اعتبارسنجی داده‌ها، انجام محاسبات یا تعامل با چندین منبع داده، استفاده کنید. سناریویی را در نظر بگیرید که در آن نیاز به به‌روزرسانی پروفایل کاربر و ارسال ایمیل تأیید دارید. یک اکشن سرور می‌تواند هم به‌روزرسانی پایگاه‌داده و هم فرآیند ارسال ایمیل را در یک عملیات واحد و اتمی مدیریت کند.

احراز هویت و مجوزدهی

اکشن‌های سرور می‌توانند برای مدیریت احراز هویت و مجوزدهی استفاده شوند. با انجام بررسی‌های احراز هویت و مجوزدهی در سرور، می‌توانید اطمینان حاصل کنید که فقط کاربران مجاز به داده‌ها و قابلیت‌های حساس دسترسی دارند. می‌توانید از اکشن‌های سرور برای مدیریت ورود کاربران، ثبت‌نام و بازنشانی رمز عبور استفاده کنید. به عنوان مثال، یک اکشن سرور می‌تواند اطلاعات کاربری را با پایگاه‌داده تأیید کرده و یک توکن برگرداند که می‌تواند برای احراز هویت درخواست‌های بعدی استفاده شود.

اج فانکشن‌ها (Edge Functions)

اکشن‌های سرور می‌توانند به عنوان اج فانکشن‌ها مستقر شوند که در یک شبکه جهانی از سرورهای نزدیک به کاربران شما اجرا می‌شوند. این می‌تواند به طور قابل توجهی تأخیر (latency) را کاهش داده و عملکرد را بهبود بخشد، به ویژه برای کاربرانی که در مکان‌های جغرافیایی پراکنده قرار دارند. اج فانکشن‌ها برای مدیریت اکشن‌های سروری که به تأخیر کم نیاز دارند، مانند به‌روزرسانی‌های داده در زمان واقعی یا تحویل محتوای شخصی‌سازی‌شده، ایده‌آل هستند. Next.js پشتیبانی داخلی برای استقرار اکشن‌های سرور به عنوان اج فانکشن‌ها را فراهم می‌کند.

استریمینگ (Streaming)

اکشن‌های سرور از استریمینگ پشتیبانی می‌کنند، که به شما امکان می‌دهد داده‌ها را به صورت تکه‌تکه (chunks) به کلاینت ارسال کنید، همانطور که در دسترس قرار می‌گیرند. این می‌تواند عملکرد درک شده برنامه شما را بهبود بخشد، به ویژه برای اکشن‌های سروری که اجرای آنها زمان زیادی می‌برد. استریمینگ به ویژه برای مدیریت مجموعه داده‌های بزرگ یا محاسبات پیچیده مفید است. به عنوان مثال، می‌توانید نتایج جستجو را همانطور که از پایگاه‌داده بازیابی می‌شوند، به کلاینت استریم کنید و تجربه کاربری پاسخ‌گو‌تری را ارائه دهید.

بهترین شیوه‌ها (Best Practices)

در اینجا چند رویه برتر برای دنبال کردن هنگام استفاده از اکشن‌های سرور ری‌اکت آورده شده است:

• اکشن‌های سرور را کوچک و متمرکز نگه دارید: هر اکشن سرور باید یک وظیفه واحد و به خوبی تعریف شده را انجام دهد. این باعث می‌شود کد شما برای درک، تست و نگهداری آسان‌تر شود.
• از نام‌های توصیفی استفاده کنید: نام‌هایی را انتخاب کنید که به وضوح هدف اکشن سرور را نشان دهند. به عنوان مثال، `createComment` یا `updateUserProfile` بهتر از نام‌های عمومی مانند `processData` هستند.
• داده‌ها را در سرور اعتبارسنجی کنید: همیشه داده‌ها را در سرور اعتبارسنجی کنید تا از تزریق داده‌های نامعتبر توسط کاربران مخرب به برنامه خود جلوگیری کنید. این شامل اعتبارسنجی انواع داده، فرمت‌ها و محدوده‌ها می‌شود.
• خطاها را به درستی مدیریت کنید: از بلوک‌های `try...catch` برای مدیریت خطاها استفاده کنید و پیام‌های خطای آموزنده را به کاربر ارائه دهید. از افشای اطلاعات حساس خطا به کلاینت خودداری کنید.
• از به‌روزرسانی‌های خوش‌بینانه استفاده کنید: با به‌روزرسانی فوری رابط کاربری، حتی قبل از اینکه سرور عمل را تأیید کند، تجربه کاربری پاسخ‌گو‌تری ارائه دهید.
• داده‌ها را در صورت نیاز مجدداً اعتبارسنجی کنید: اطمینان حاصل کنید که رابط کاربری آخرین تغییرات را با اعتبارسنجی مجدد کش داده‌ها پس از تغییر داده‌ها توسط یک اکشن سرور، منعکس می‌کند.

مثال‌های دنیای واقعی

بیایید چند مثال واقعی از نحوه استفاده از اکشن‌های سرور ری‌اکت در انواع مختلف برنامه‌ها را بررسی کنیم:

برنامه تجارت الکترونیک

• افزودن یک کالا به سبد خرید: یک اکشن سرور می‌تواند افزودن یک کالا به سبد خرید کاربر و به‌روزرسانی مجموع سبد خرید در پایگاه‌داده را مدیریت کند. می‌توان از به‌روزرسانی‌های خوش‌بینانه برای نمایش فوری کالا در سبد خرید استفاده کرد.
• پردازش پرداخت: یک اکشن سرور می‌تواند پردازش پرداخت را با استفاده از یک درگاه پرداخت شخص ثالث مدیریت کند. اکشن سرور همچنین می‌تواند وضعیت سفارش را در پایگاه‌داده به‌روز کند و یک ایمیل تأیید برای کاربر ارسال کند.
• ارسال نقد و بررسی محصول: یک اکشن سرور می‌تواند ارسال نقد و بررسی محصول و ذخیره آن در پایگاه‌داده را مدیریت کند. اکشن سرور همچنین می‌تواند میانگین امتیاز محصول را محاسبه کرده و صفحه جزئیات محصول را به‌روز کند.

برنامه رسانه اجتماعی

• ارسال یک توییت جدید: یک اکشن سرور می‌تواند ارسال یک توییت جدید و ذخیره آن در پایگاه‌داده را مدیریت کند. اکشن سرور همچنین می‌تواند تایم‌لاین کاربر را به‌روز کند و به دنبال‌کنندگان او اطلاع دهد.
• پسندیدن یک پست: یک اکشن سرور می‌تواند پسندیدن یک پست و به‌روزرسانی تعداد لایک‌ها در پایگاه‌داده را مدیریت کند. می‌توان از به‌روزرسانی‌های خوش‌بینانه برای نمایش فوری تعداد لایک‌های به‌روز شده استفاده کرد.
• دنبال کردن یک کاربر: یک اکشن سرور می‌تواند دنبال کردن یک کاربر و به‌روزرسانی تعداد دنبال‌کنندگان و دنبال‌شوندگان در پایگاه‌داده را مدیریت کند.

سیستم مدیریت محتوا (CMS)

• ایجاد یک پست وبلاگ جدید: یک اکشن سرور می‌تواند ایجاد یک پست وبلاگ جدید و ذخیره آن در پایگاه‌داده را مدیریت کند. اکشن سرور همچنین می‌تواند یک اسلاگ (slug) برای پست ایجاد کرده و نقشه سایت (sitemap) را به‌روز کند.
• به‌روزرسانی یک صفحه: یک اکشن سرور می‌تواند به‌روزرسانی یک صفحه و ذخیره آن در پایگاه‌داده را مدیریت کند. اکشن سرور همچنین می‌تواند کش صفحه را مجدداً اعتبارسنجی کند تا اطمینان حاصل شود که محتوای به‌روز شده به کاربران نمایش داده می‌شود.
• انتشار یک تغییر: یک اکشن سرور می‌تواند انتشار یک تغییر در پایگاه‌داده و اطلاع‌رسانی به همه مشترکین را مدیریت کند.

ملاحظات بین‌المللی‌سازی

هنگام توسعه برنامه‌ها برای مخاطبان جهانی، در نظر گرفتن بین‌المللی‌سازی (i18n) و محلی‌سازی (l10n) ضروری است. در اینجا چند ملاحظه برای استفاده از اکشن‌های سرور ری‌اکت در برنامه‌های بین‌المللی آورده شده است:

• مدیریت فرمت‌های مختلف تاریخ و زمان: از `Intl` API برای فرمت‌بندی تاریخ و زمان مطابق با منطقه کاربر استفاده کنید.
• مدیریت فرمت‌های مختلف اعداد: از `Intl` API برای فرمت‌بندی اعداد مطابق با منطقه کاربر استفاده کنید.
• مدیریت واحدهای پولی مختلف: از `Intl` API برای فرمت‌بندی واحدهای پولی مطابق با منطقه کاربر استفاده کنید.
• ترجمه پیام‌های خطا: پیام‌های خطا را به زبان کاربر ترجمه کنید.
• پشتیبانی از زبان‌های راست‌به‌چپ (RTL): اطمینان حاصل کنید که برنامه شما از زبان‌های RTL مانند عربی و عبری پشتیبانی می‌کند.

به عنوان مثال، هنگام پردازش فرمی که به ورودی تاریخ نیاز دارد، یک اکشن سرور می‌تواند از `Intl.DateTimeFormat` API برای تجزیه تاریخ مطابق با منطقه کاربر استفاده کند، و اطمینان حاصل کند که تاریخ بدون توجه به تنظیمات منطقه‌ای کاربر به درستی تفسیر می‌شود.

نتیجه‌گیری

اکشن‌های سرور ری‌اکت ابزاری قدرتمند برای ساده‌سازی پردازش فرم‌ها و تغییرات داده‌ها در سمت سرور در برنامه‌های ری‌اکت هستند. با اجازه دادن به شما برای نوشتن کد سمت سرور مستقیماً در کامپوننت‌های ری‌اکت خود، اکشن‌های سرور کدهای تکراری را کاهش می‌دهند، امنیت را افزایش می‌دهند، عملکرد را بهبود می‌بخشند و به‌روزرسانی‌های خوش‌بینانه را امکان‌پذیر می‌کنند. با پیروی از بهترین شیوه‌های ذکر شده در این راهنما، می‌توانید از اکشن‌های سرور برای ساخت برنامه‌های ری‌اکت قوی‌تر، مقیاس‌پذیرتر و قابل نگهداری‌تر استفاده کنید. با ادامه تکامل ری‌اکت، اکشن‌های سرور بدون شک نقش مهم‌تری در آینده توسعه وب ایفا خواهند کرد.