چرا اکشن‌های جدید Astro همان چیزی است که توسعه دهندگان React 19 منتظر آن بودند؟

Summarize this content to 400 words in Persian Lang
React 19 چندین ویژگی هیجان انگیز را معرفی کرد، به ویژه در تعامل سمت سرور با Server Actions. هدف این اقدامات ساده‌سازی تماس‌های سرور است و به توسعه‌دهندگان اجازه می‌دهد تا بدون نیاز به API گسترده‌تر، به درخواست‌ها رسیدگی کنند. با این حال، آنها چالش هایی را به همراه داشتند، به ویژه در مدیریت فرم، مدیریت خطا و اشکال زدایی. اکشن‌های جدید Astro که با Astro 4.15 معرفی شده‌اند، جایگزین امیدوارکننده‌ای است که برخی از محدودیت‌های مشاهده‌شده در اکشن‌های سرور React 19 را برطرف می‌کند.

مشکلات مربوط به React 19 Server Actions

اقدامات سرور React تعاملات سمت سرور را ساده می کند اما با محدودیت های خاصی همراه است که می تواند بر تجربه توسعه دهنده تأثیر بگذارد:

مدیریت داده های فرم پیچیده: اقدامات سرور در React نیاز به مدیریت دستی داده های فرم دارد FormData اشیاء این استخراج دستی به این معنی است که توسعه دهندگان باید مقادیر را به انواع دلخواه ریخته یا تبدیل کنند که اغلب منجر به کد دیگ بخار می شود.

const formData = new FormData(event.target);
const name = formData.get(“name”);
const age = Number(formData.get(“age”)); // Converts to a number
const isActive = formData.get(“isActive”) === “on”; // Handles checkbox values

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

مدیریت خطای محدود: اقدامات سرور در React 19 فاقد مکانیزم های داخلی مدیریت خطا در سمت سرور است. خطاها در پاسخ سرور به طور پیش‌فرض به یک کد وضعیت 200 OK می‌رسند، که می‌تواند مدیریت خطای سمت سرویس گیرنده را پیچیده کند و تشخیص موفقیت از شکست را چالش‌برانگیز کند.
نام های نقطه پایان مبهم: اقدامات سرور به عنوان نقاط پایانی سرور سنتی در نظر گرفته نمی شوند، بلکه به عنوان واحدهای عملکرد مانند در نظر گرفته می شوند. این رویکرد می‌تواند به نام‌های نقطه پایانی هش‌شده منجر شود، و اشکال‌زدایی را چالش‌برانگیز می‌کند، زیرا توسعه‌دهندگان ممکن است برای نگاشت این نقاط پایانی هش‌شده به عملکرد واقعی تلاش کنند.

Astro's Actions: A Game-Changer

Astro's Actions این محدودیت ها را برطرف می کند و رویکردی بهبود یافته برای تعامل سمت سرور ارائه می دهد. در اینجا نحوه ارائه ویژگی‌های Astro از عملکردهای سرور React 19 ارائه می‌شود:

مدیریت داده های فرم ساده شده با ایمنی نوع: Astro's Actions استفاده می شود zod برای اعتبار سنجی طرحواره، امکان تجزیه خودکار و مدیریت داده های فرم ایمن را فراهم می کند. این کار دیگ بخار را کاهش می دهد و تضمین می کند که ورودی های فرم به طور پیش فرض به انواع داده های صحیح تبدیل می شوند.

import { defineAction } from ‘astro:actions’;
import { z } from ‘astro:schema’;

export const server = {
getGreeting: defineAction({
input: z.object({
name: z.string(),
}),
accept: ‘form’, // Specifies form data handling
handler: async ({ input }) => {
// this is a typesafe object now !
const { name } = input;
return `Hello, ${name}!`;
}
})
};

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

بهبود مدیریت خطا: Astro's Actions معرفی می کند ActionError، کدهای وضعیت HTTP و پیام های دقیق تر را برای مدیریت خطا فعال می کند که شبیه نقاط پایانی سرور سنتی است. این قابلیت کنترل خطای گرانول و ارتباط مشتری و سرور واضح تر را ارائه می دهد.

import { defineAction, ActionError } from “astro:actions”;
import { z } from “astro:schema”;

export const server = {
likePost: defineAction({
input: z.object({ postId: z.string() }),
handler: async (input, ctx) => {
if (!ctx.cookies.has(‘user-session’)) {
throw new ActionError({
code: “UNAUTHORIZED”,
message: “User must be logged in.”,
});
}
// Process request if authorized
},
}),
};

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

نام نقطه پایانی قابل خواندن: برخلاف نقاط پایانی هش‌شده React، Astro's Actions از نام‌های تعریف‌شده توسط توسعه‌دهندگان برای نقاط پایانی استفاده می‌کند که اشکال‌زدایی و ردیابی تماس‌ها را به طور قابل‌توجهی آسان‌تر می‌کند.

افزایش تدریجی و منابع اضافی: Astro بر بهبود پیشرونده تمرکز می کند و به عملکرد اجازه می دهد حتی با غیرفعال بودن جاوا اسکریپت کار کند. این با تعهد Astro به یک وب سبک تر و در دسترس تر مطابقت دارد و تضمین می کند که عملکردهای اصلی بدون اتکا به اجرای جاوا اسکریپت دست نخورده باقی می مانند.

برای اطلاعات بیشتر در مورد Astro's Actions، اسناد Astro Actions را کاوش کنید، که به جزئیات ادغام Actions در برنامه های مدرن می پردازد.

   const formData = new FormData(event.target);
   const name = formData.get("name");
   const age = Number(formData.get("age")); // Converts to a number
   const isActive = formData.get("isActive") === "on"; // Handles checkbox values

   import { defineAction } from 'astro:actions';
   import { z } from 'astro:schema';

   export const server = {
     getGreeting: defineAction({
       input: z.object({
         name: z.string(),
       }),
       accept: 'form', // Specifies form data handling
       handler: async ({ input }) => {
         // this is a typesafe object now !
         const { name } = input;
         return `Hello, ${name}!`;
       }
     })
   };

   import { defineAction, ActionError } from "astro:actions";
   import { z } from "astro:schema";

   export const server = {
     likePost: defineAction({
       input: z.object({ postId: z.string() }),
       handler: async (input, ctx) => {
         if (!ctx.cookies.has('user-session')) {
           throw new ActionError({
             code: "UNAUTHORIZED",
             message: "User must be logged in.",
           });
         }
         // Process request if authorized
       },
     }),
   };