React Server Action Validatsiyasi: Forma Ma'lumotlarini Qayta Ishlash va Xavfsizlik bo'yicha To'liq Qo'llanma

React Server Actions'ning joriy etilishi Next.js kabi freymvorklar bilan full-stack dasturlashda muhim paradigma o'zgarishini belgiladi. Mijoz komponentlariga server tomonidagi funksiyalarni to'g'ridan-to'g'ri chaqirish imkonini berish orqali, biz endi kamroq qo'shimcha kod bilan yanada yaxlit, samarali va interaktiv ilovalar yarata olamiz. Biroq, bu kuchli yangi abstraksiya oldimizga muhim mas'uliyatni qo'yadi: kiritilgan ma'lumotlarni ishonchli validatsiya qilish va xavfsizlik.

Mijoz va server o'rtasidagi chegara bunchalik silliq bo'lib qolganda, veb-xavfsizlikning asosiy tamoyillarini e'tibordan chetda qoldirish oson. Foydalanuvchidan keladigan har qanday ma'lumot ishonchsiz hisoblanadi va serverda qat'iy tekshirilishi kerak. Ushbu qo'llanma React Server Actions doirasida forma ma'lumotlarini qayta ishlash va validatsiya qilishni keng qamrovli o'rganishni ta'minlaydi, asosiy prinsiplardan tortib, ilovangiz ham foydalanuvchiga qulay, ham xavfsiz bo'lishini ta'minlaydigan ilg'or, production-ga tayyor andozalargacha bo'lgan hamma narsani qamrab oladi.

React Server Actions Aslida Nima?

Validatsiyaga sho'ng'ishdan oldin, Server Actions nima ekanligini qisqacha eslab o'taylik. Aslida, ular serverda aniqlanadigan, lekin mijoz tomonidan ishga tushirilishi mumkin bo'lgan funksiyalardir. Foydalanuvchi formani yuborganida yoki tugmani bosganida, Server Action to'g'ridan-to'g'ri chaqirilishi mumkin, bu esa API endpoint'larni qo'lda yaratish, `fetch` so'rovlarini boshqarish va yuklanish/xatolik holatlarini boshqarish zaruratini yo'q qiladi.

Ular HTML formalari va Veb-platformaning `FormData` API asosiga qurilgan bo'lib, bu ularni sukut bo'yicha progressiv ravishda yaxshilanadigan qiladi. Bu shuni anglatadiki, agar JavaScript yuklanmasa ham, formalaringiz ishlayveradi va bu chidamli foydalanuvchi tajribasini ta'minlaydi.

Oddiy Server Action misoli:

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

export async function createUser(formData) {
  const name = formData.get('name');
  const email = formData.get('email');

  // ... foydalanuvchini ma'lumotlar bazasiga saqlash logikasi
  console.log('Foydalanuvchi yaratilmoqda:', { name, email });
}

// app/page.js
import { createUser } from './actions';

export default function UserForm() {
  return (
    <form action={createUser}>
      <input type="text" name="name" placeholder="Name" />
      <input type="email" name="email" placeholder="Email" />
      <button type="submit">Create User</button>
    </form>
  );
}
            

              
                Copy
              
            
          

Bu soddalik kuchli, lekin u nima bo'layotganining murakkabligini ham yashiradi. `createUser` funksiyasi faqat serverda ishlaydi, lekin u mijoz komponentidan chaqiriladi. Server logikangizga olib boradigan bu to'g'ridan-to'g'ri yo'l aynan validatsiya shunchaki bir xususiyat emas, balki talab ekanligining sababidir.

Validatsiyaning O'zgarmas Ahamiyati

Server Actions dunyosida har bir funksiya serveringizga ochilgan darvozadir. To'g'ri validatsiya o'sha darvozadagi qo'riqchi vazifasini bajaradi. Mana nima uchun bu muhokama qilinmaydi:

• Ma'lumotlar Yaxlitligi: Sizning ma'lumotlar bazangiz va ilova holatingiz toza, oldindan aytib bo'ladigan ma'lumotlarga bog'liq. Validatsiya noto'g'ri formatdagi elektron pochta manzillarini, ismlar bo'lishi kerak bo'lgan joyda bo'sh satrlarni yoki raqamlar uchun mo'ljallangan maydonda matnni saqlamasligingizni ta'minlaydi.
• Yaxshilangan Foydalanuvchi Tajribasi (UX): Foydalanuvchilar xato qilishadi. Aniq, tezkor va kontekstga oid xato xabarlari ularni kiritgan ma'lumotlarini to'g'rilashga yo'naltiradi, bu esa hafsalasizlikni kamaytiradi va formalarni to'ldirish darajasini oshiradi.
• Temirdek Mustahkam Xavfsizlik: Bu eng muhim jihat. Server tomonidagi validatsiyasiz, ilovangiz bir qator hujumlarga zaif bo'lib qoladi, jumladan:
  • SQL Injection: Yomon niyatli shaxs ma'lumotlar bazangizni boshqarish uchun forma maydoniga SQL buyruqlarini yuborishi mumkin.
  • Cross-Site Scripting (XSS): Agar siz tozalanmagan foydalanuvchi ma'lumotlarini saqlasangiz va ko'rsatsangiz, hujumchi boshqa foydalanuvchilarning brauzerlarida ishga tushadigan zararli skriptlarni kiritishi mumkin.
  • Denial of Service (DoS): Kutilmaganda katta yoki hisoblash uchun qimmat ma'lumotlarni yuborish server resurslaringizni ortiqcha yuklashi mumkin.

Mijoz Tomoni vs. Server Tomoni Validatsiyasi: Zarur Hamkorlik

Validatsiya ikki joyda amalga oshirilishi kerakligini tushunish muhim:

1. Mijoz Tomonidagi Validatsiya: Bu UX uchun. U tarmoq bo'ylab so'rovsiz bir zumda fikr-mulohaza bildiradi. Foydalanuvchi yozayotganda formatlarni tekshirish uchun `required`, `minLength`, `pattern` kabi oddiy HTML5 atributlaridan yoki JavaScript'dan foydalanishingiz mumkin. Biroq, uni JavaScript'ni o'chirib qo'yish yoki dasturchi vositalaridan foydalanish orqali osongina chetlab o'tish mumkin.
2. Server Tomonidagi Validatsiya: Bu xavfsizlik va ma'lumotlar yaxlitligi uchun. Bu sizning ilovangizning yakuniy haqiqat manbaidir. Mijozda nima bo'lishidan qat'i nazar, server o'zi qabul qilgan hamma narsani qayta tekshirishi kerak. Server Actions bu logikani amalga oshirish uchun eng zo'r joy.

Asosiy qoida: Yaxshiroq foydalanuvchi tajribasi uchun mijoz tomonidagi validatsiyadan foydalaning, lekin har doim faqat server tomonidagi validatsiyaga ishoning.

Server Actions'da Validatsiyani Amalga Oshirish: Oddiydan Murakkabgacha

Keling, validatsiya strategiyamizni oddiy yondashuvdan boshlab, zamonaviy vositalar yordamida yanada mustahkam, kengaytiriladigan yechimga o'tib, qurib chiqamiz.

1-yondashuv: Qo'lda Validatsiya va Holatni Qaytarish

Validatsiyani boshqarishning eng oddiy usuli - Server Action ichiga `if` shartlarini qo'shish va muvaffaqiyat yoki muvaffaqiyatsizlikni bildiruvchi obyektni qaytarish.

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

import { redirect } from 'next/navigation';

export async function createInvoice(formData) {
  const customerName = formData.get('customerName');
  const amount = formData.get('amount');

  if (!customerName || customerName.trim() === '') {
    return { success: false, message: 'Customer name is required.' };
  }

  if (!amount || isNaN(Number(amount)) || Number(amount) <= 0) {
    return { success: false, message: 'Please enter a valid amount greater than zero.' };
  }

  // ... hisob-fakturani ma'lumotlar bazasida yaratish logikasi
  console.log('Invoice created for', customerName, 'with amount', amount);
  
  redirect('/dashboard/invoices');
}
            

              
                Copy
              
            
          

Bu yondashuv ishlaydi, lekin uning katta UX kamchiligi bor: xato xabarini ko'rsatish uchun sahifani to'liq qayta yuklashni talab qiladi. Biz xabarni forma sahifasining o'zida osonlikcha ko'rsata olmaymiz. Aynan shu yerda React'ning Server Actions uchun hook'lari yordamga keladi.

2-yondashuv: Silliq Xatoliklarni Boshqarish uchun `useFormState`dan Foydalanish

`useFormState` hook'i aynan shu maqsadda ishlab chiqilgan. U Server Action'ga to'liq navigatsiya hodisasisiz UI'ni yangilash uchun ishlatilishi mumkin bo'lgan holatni qaytarish imkonini beradi. Bu Server Actions bilan zamonaviy formalarni boshqarishning tamal toshidir.

Keling, hisob-faktura yaratish formamizni qayta ishlaymiz.

1-qadam: Server Action'ni Yangilash

Endi action ikkita argumentni qabul qilishi kerak: `prevState` va `formData`. U `useFormState` komponentni yangilash uchun foydalanadigan yangi holat obyektini qaytarishi kerak.

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

import { revalidatePath } from 'next/cache';
import { redirect } from 'next/navigation';

// Boshlang'ich holat shaklini aniqlash
const initialState = {
  message: null,
  errors: {},
};

export async function createInvoice(prevState, formData) {
  const customerName = formData.get('customerName');
  const amount = formData.get('amount');
  const status = formData.get('status');

  const errors = {};
  if (!customerName || customerName.trim().length < 2) {
    errors.customerName = 'Customer name must be at least 2 characters.';
  }
  if (!amount || isNaN(Number(amount)) || Number(amount) <= 0) {
    errors.amount = 'Please enter a valid amount.';
  }
  if (status !== 'pending' && status !== 'paid') {
    errors.status = 'Please select a valid status.';
  }

  if (Object.keys(errors).length > 0) {
    return {
      message: 'Failed to create invoice. Please check the fields.',
      errors,
    };
  }

  try {
    // ... ma'lumotlar bazasiga saqlash logikasi
    console.log('Invoice created successfully!');
  } catch (e) {
    return {
      message: 'Database Error: Failed to create invoice.',
      errors: {},
    };
  }

  // Hisob-fakturalar sahifasi uchun keshni qayta tekshirish va yo'naltirish
  revalidatePath('/dashboard/invoices');
  redirect('/dashboard/invoices');
}

            

              
                Copy
              
            
          

2-qadam: Forma Komponentini `useFormState` bilan Yangilash

Mijoz komponentimizda biz formaning holatini boshqarish va xatolarni ko'rsatish uchun hook'dan foydalanamiz.

            // app/ui/invoices/create-form.js
'use client';

import { useFormState } from 'react-dom';
import { createInvoice } from '@/app/actions';

const initialState = {
  message: null,
  errors: {},
};

export function CreateInvoiceForm() {
  const [state, dispatch] = useFormState(createInvoice, initialState);

  return (
    <form action={dispatch}>
      <div>
        <label htmlFor="customerName">Customer Name</label>
        <input id="customerName" name="customerName" type="text" />
        {state.errors?.customerName && 
          <p style={{ color: 'red' }}>{state.errors.customerName}</p>}
      </div>
      
      <div>
        <label htmlFor="amount">Amount</label>
        <input id="amount" name="amount" type="number" step="0.01" />
        {state.errors?.amount && 
          <p style={{ color: 'red' }}>{state.errors.amount}</p>}
      </div>

      {/* ... other fields ... */}

      {state.message && <p style={{ color: 'red' }}>{state.message}</p>}
      
      <button type="submit">Create Invoice</button>
    </form>
  );
}
            

              
                Copy
              
            
          

Endi, foydalanuvchi noto'g'ri formani yuborganida, Server Action ishga tushadi, xato obyektini qaytaradi va `useFormState` `state` o'zgaruvchisini yangilaydi. Komponent qayta renderlanadi va tegishli maydonlar yonida aniq xato xabarlarini ko'rsatadi — barchasi sahifani qayta yuklamasdan. Bu juda katta UX yaxshilanishidir!

3-yondashuv: `useFormStatus` yordamida UX'ni Yaxshilash

Server Action ishlayotgan vaqtda nima bo'ladi? Foydalanuvchi yuborish tugmasini bir necha marta bosishi mumkin. Biz `useFormStatus` hook'idan foydalanib fikr-mulohaza bildirishimiz mumkin, bu bizga oxirgi forma yuborilishining holati haqida ma'lumot beradi.

Muhim: `useFormStatus` `

            // app/ui/submit-button.js
'use client';

import { useFormStatus } from 'react-dom';

export function SubmitButton() {
  const { pending } = useFormStatus();

  return (
    <button type="submit" aria-disabled={pending} disabled={pending}>
      {pending ? 'Creating...' : 'Create Invoice'}
    </button>
  );
}

// CreateInvoiceForm komponentingizda:
import { SubmitButton } from './submit-button';

// ...
<form action={dispatch}>
  {/* ... forma maydonlari ... */}
  <SubmitButton />
</form>
            

              
                Copy
              
            
          

            // app/lib/schemas.js
import { z } from 'zod';

export const InvoiceSchema = z.object({
  id: z.string(), // Bu bizda yangilanishlar uchun bo'ladi, lekin yaratish uchun emas
  customerId: z.string({ invalid_type_error: 'Please select a customer.' }),
  amount: z.coerce
    .number()
    .gt(0, { message: 'Please enter an amount greater than $0.' }),
  status: z.enum(['pending', 'paid'], {
    invalid_type_error: 'Please select an invoice status.',
  }),
  date: z.string(),
});

export const CreateInvoice = InvoiceSchema.omit({ id: true, date: true });
            

              
                Copy
              
            
          

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

import { z } from 'zod';
import { CreateInvoice } from '@/app/lib/schemas';

export async function createInvoiceWithZod(prevState, formData) {
  // 1. Zod yordamida forma maydonlarini tekshirish
  const validatedFields = CreateInvoice.safeParse({
    customerId: formData.get('customerId'),
    amount: formData.get('amount'),
    status: formData.get('status'),
  });

  // 2. Agar validatsiya muvaffaqiyatsiz bo'lsa, xatolarni darhol qaytarish.
  if (!validatedFields.success) {
    return {
      errors: validatedFields.error.flatten().fieldErrors,
      message: 'Missing Fields. Failed to Create Invoice.',
    };
  }

  // 3. Ma'lumotlarni ma'lumotlar bazasiga kiritish uchun tayyorlash
  const { customerId, amount, status } = validatedFields.data;
  const amountInCents = amount * 100;
  const date = new Date().toISOString().split('T')[0];

  // 4. Ma'lumotlarni ma'lumotlar bazasiga kiritish
  try {
    // await sql`...` bu yerda sizning ma'lumotlar bazasi so'rovingiz
    console.log('Successfully created invoice with validated data.');
  } catch (error) {
    return {
      message: 'Database Error: Failed to Create Invoice.',
    };
  }

  // 5. Qayta tekshirish va yo'naltirish
  revalidatePath('/dashboard/invoices');
  redirect('/dashboard/invoices');
}
            

              
                Copy
              
            
          

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

import { auth } from '@/auth'; // Siz NextAuth.js yoki shunga o'xshash narsadan foydalanasiz deb faraz qilamiz
import { sql } from '@vercel/postgres';

export async function deleteInvoice(id) {
  const session = await auth();
  if (!session?.user) {
    // Yoki xatolik chiqarish
    return { message: 'Authentication required.' };
  }

  // Avtorizatsiya tekshiruvi: Bu foydalanuvchining o'chirishga ruxsati bormi?
  // Bu rollarni yoki egalikni tekshirishni o'z ichiga olishi mumkin.
  const userRole = session.user.role;
  if (userRole !== 'admin') {
    return { message: 'Unauthorized action.' };
  }

  try {
    await sql`DELETE FROM invoices WHERE id = ${id}`;
    revalidatePath('/dashboard/invoices');
    return { message: 'Deleted Invoice.' };
  } catch (error) {
    return { message: 'Database Error: Failed to Delete Invoice.' };
  }
}
            

              
                Copy
              
            
          

            import { Ratelimit } from '@upstash/ratelimit';
import { Redis } from '@upstash/redis';

// Yangi ratelimiter yaratish, har 10 soniyada 5 ta so'rovga ruxsat berish
const ratelimit = new Ratelimit({
  redis: Redis.fromEnv(),
  limiter: Ratelimit.slidingWindow(5, '10 s'),
});

export async function sensitiveAction(formData) {
  const ip = headers().get('x-forwarded-for'); // Yoki sessiyadan foydalanuvchi ID'sini olish
  const { success } = await ratelimit.limit(ip);

  if (!success) {
    return { message: 'Too many requests. Please try again later.' };
  }

  // ... action logikasining qolgan qismi
}
            

              
                Copy
              
            
          

            // Action ichida
if (!validatedFields.success) {
  // ...
  return { errors: { customerId: ['error.customer.required'] } };
}

// Client komponentida, 'react-i18next' kabi kutubxonadan foydalanib
import { useTranslation } from 'react-i18next';

function MyForm() {
  const { t } = useTranslation();
  const [state, dispatch] = useFormState(...);

  // ...
  {state.errors?.customerId && 
    <p>{t(state.errors.customerId[0])}</p>}
}
            

              
                Copy
              
            
          

            <div>
  <label htmlFor="customerName">Customer Name</label>
  <input 
    id="customerName" 
    name="customerName" 
    type="text" 
    aria-describedby="customer-error"
  />
  <div id="customer-error" aria-live="polite" role="alert">
    {state.errors?.customerName &&
      state.errors.customerName.map((error) => (
        <p key={error}>{error}</p>
      ))}
  </div>
</div>
            

              
                Copy