React Server Actions: Serverdagi Formalarga Ishlov Berishni Soddalashtirish

React 18 da taqdim etilgan va Next.js da sezilarli darajada takomillashtirilgan React Server Actions, serverda forma yuborish va ma'lumotlar mutatsiyasini to'g'ridan-to'g'ri boshqarish uchun inqilobiy yondashuvni taklif qiladi. Bu kuchli xususiyat an'anaviy klient tomonidagi ma'lumotlarni olish va manipulyatsiya qilish bilan solishtirganda dasturlash jarayonini soddalashtiradi, xavfsizlikni oshiradi va samaradorlikni yaxshilaydi.

React Server Actions nima?

Server Actions — bu serverda ishlaydigan va to'g'ridan-to'g'ri React komponentlaridan chaqirilishi mumkin bo'lgan asinxron funksiyalardir. Ular sizga server tomonida quyidagi vazifalarni bajarishga imkon beradi:

• Formalarni Yuborish: Forma ma'lumotlarini serverda xavfsiz tarzda qayta ishlash.
• Ma'lumotlar Mutatsiyasi: Ma'lumotlar bazalarini yoki tashqi API'larni yangilash.
• Autentifikatsiya: Foydalanuvchi kirishi va ro'yxatdan o'tishini boshqarish.
• Server Tomonidagi Mantiq: Murakkab biznes mantiqini klientga oshkor qilmasdan bajarish.

Server Actions'ning asosiy afzalligi shundaki, ular sizga React komponentlaringiz ichida server tomonidagi kodni yozish imkonini beradi, bu esa alohida API yo'llari va murakkab klient tomonidagi ma'lumotlarni olish mantiqiga bo'lgan ehtiyojni yo'q qiladi. UI va server tomonidagi mantiqning bir joyda joylashishi kod bazasining qo'llab-quvvatlanishi osonroq va samaraliroq bo'lishiga olib keladi.

React Server Actions'dan foydalanishning afzalliklari

React Server Actions'dan foydalanish bir qancha muhim afzalliklarni beradi:

Soddalashtirilgan Dasturlash

Server Actions forma yuborish va ma'lumotlar mutatsiyasini to'g'ridan-to'g'ri React komponentlaringiz ichida boshqarishga imkon berib, ortiqcha kodni (boilerplate) kamaytiradi. Bu alohida API nuqtalari va murakkab klient tomonidagi ma'lumotlarni olish mantiqiga bo'lgan ehtiyojni yo'q qiladi, dasturlash jarayonini soddalashtiradi va kodingizni tushunish va qo'llab-quvvatlashni osonlashtiradi. Oddiy aloqa formasini ko'rib chiqing. Server Actions bo'lmasa, sizga forma yuborishni boshqarish uchun alohida API yo'li, ma'lumotlarni yuborish uchun klient tomonidagi JavaScript va ham klient, ham serverda xatoliklarni qayta ishlash mantiqi kerak bo'ladi. Server Actions yordamida esa bularning barchasini komponentning o'zida boshqarish mumkin.

Kengaytirilgan Xavfsizlik

Kod serverda ishlashi orqali Server Actions ilovangizning hujumga uchrash yuzasini kamaytiradi. Maxfiy ma'lumotlar va biznes mantiqi klientdan uzoqda saqlanadi, bu esa yomon niyatli foydalanuvchilarning ularga aralashishiga yo'l qo'ymaydi. Masalan, ma'lumotlar bazasi hisob ma'lumotlari yoki API kalitlari hech qachon klient tomonidagi kodda oshkor etilmaydi. Barcha ma'lumotlar bazasi bilan o'zaro aloqalar serverda amalga oshiriladi, bu esa SQL in'yeksiyasi yoki ruxsatsiz ma'lumotlarga kirish xavfini kamaytiradi.

Yaxshilangan Samaradorlik

Server Actions klientga yuklanishi va bajarilishi kerak bo'lgan JavaScript miqdorini kamaytirish orqali samaradorlikni oshirishi mumkin. Bu, ayniqsa, kam quvvatli qurilmalardagi yoki sekin internet ulanishiga ega foydalanuvchilar uchun foydalidir. Ma'lumotlarga ishlov berish serverda amalga oshiriladi va faqat kerakli UI yangilanishlari klientga yuboriladi, bu esa sahifalarning tezroq yuklanishiga va foydalanuvchi tajribasining silliqroq bo'lishiga olib keladi.

Optimistik Yangilanishlar

Server Actions React'ning Suspense va Transitions bilan uzviy bog'lanib, optimistik yangilanishlarni amalga oshirish imkonini beradi. Optimistik yangilanishlar sizga, hatto server harakatni tasdiqlamasdan oldin, UI'ni darhol yangilash imkonini beradi. Bu foydalanuvchi tajribasini yanada sezgir va qiziqarli qiladi, chunki foydalanuvchilar o'z harakatlarining natijalarini ko'rish uchun server javobini kutishlari shart emas. Elektron tijoratda, xarid savatiga mahsulot qo'shish, server fonda qo'shilishni tasdiqlayotgan paytda darhol ko'rsatilishi mumkin.

Progressiv Kengaytirish

Server Actions progressiv kengaytirishni qo'llab-quvvatlaydi, ya'ni JavaScript o'chirilgan yoki yuklanmagan bo'lsa ham ilovangiz ishlashda davom etishi mumkin. JavaScript o'chirilganda, formalar an'anaviy HTML formalari kabi yuboriladi va server yuborishni boshqaradi hamda foydalanuvchini yangi sahifaga yo'naltiradi. Bu sizning ilovangiz barcha foydalanuvchilar uchun, ularning brauzer sozlamalari yoki tarmoq sharoitlaridan qat'i nazar, ochiq bo'lishini ta'minlaydi. Bu, ayniqsa, maxsus ehtiyojli foydalanuvchilar uchun qulaylik (accessibility) va SEO uchun muhimdir.

React Server Actions'dan qanday foydalanish kerak?

React Server Actions'dan foydalanish uchun siz ularni qo'llab-quvvatlaydigan Next.js kabi freymvorkdan foydalanishingiz kerak bo'ladi. Bu yerda qadam-baqadam yo'riqnoma keltirilgan:

1. Server Action'ni aniqlang

Serverda ishlaydigan asinxron funksiya yarating. Bu funksiya siz serverda bajarmoqchi bo'lgan mantiqni, masalan, ma'lumotlar bazasini yangilash yoki API'ni chaqirishni o'z ichiga olishi kerak. Funksiyani Server Action ekanligini bildirish uchun uning yuqori qismida `"use server"` direktivasini belgilang. Bu direktiva React kompilyatoriga funksiyani server tomonidagi funksiya sifatida ko'rib chiqishni va klient va server o'rtasidagi ma'lumotlarni avtomatik ravishda serializatsiya va deserializatsiya qilishni buyuradi.

// 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('/'); // Marshrut keshini tozalash
    return { message: 'Xabar muvaffaqiyatli saqlandi!' };
  } catch (e) {
    return { message: 'Xabarni saqlashda xatolik yuz berdi' };
  }
}

Tushuntirish:

• `'use server'` direktivasi bu funksiyani Server Action sifatida belgilaydi.
• `revalidatePath('/')` marshrut keshini tozalaydi va keyingi so'rovda yangilangan ma'lumotlar olinishini ta'minlaydi. Bu ma'lumotlarning izchilligini saqlash uchun juda muhim.
• `saveMessage(message)` sizning haqiqiy ma'lumotlar bazasi bilan o'zaro ishlash mantiqingiz uchun joy egallovchidir. U sizda xabarni ma'lumotlar bazasiga saqlash uchun boshqa joyda aniqlangan `saveMessage` funksiyasi mavjud deb taxmin qiladi.
• Funksiya foydalanuvchiga fikr-mulohaza ko'rsatish uchun ishlatilishi mumkin bo'lgan holat obyektini qaytaradi.

2. Server Action'ni komponentingizga import qiling va foydalaning

Server Action'ni React komponentingizga import qiling va uni forma elementidagi `action` prop'i sifatida ishlating. `useFormState` hook'i formaning holatini boshqarish va foydalanuvchiga fikr-mulohaza ko'rsatish uchun ishlatilishi mumkin.

// 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 (
    

      Xabar:
      
      Yuborish
      {state?.message && 
{state.message}
}
    
  );
}

Tushuntirish:

• `'use client'` direktivasi bu Klient Komponenti ekanligini bildiradi (chunki u `useFormState` dan foydalanmoqda).
• `useFormState(createMessage, {message: ''})` forma holatini `createMessage` Server Action bilan ishga tushiradi. Ikkinchi argument - boshlang'ich holat.
• `form` elementining `action` prop'i `useFormState` tomonidan qaytarilgan `formAction` ga o'rnatiladi.
• `state` o'zgaruvchisi Server Action'dan qaytgan qiymatni o'z ichiga oladi, bu esa foydalanuvchiga fikr-mulohaza ko'rsatish uchun ishlatilishi mumkin.

3. Forma Ma'lumotlarini Boshqarish

Server Action ichida siz forma ma'lumotlariga `FormData` API orqali kira olasiz. Bu API forma maydonlarining qiymatlariga kirishning qulay usulini taqdim etadi.

'use server'

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

  // ...
}

4. Xatoliklarni Boshqarish

Server Action bajarilishi paytida yuzaga kelishi mumkin bo'lgan xatoliklarni boshqarish uchun `try...catch` bloklaridan foydalaning. Foydalanuvchiga ko'rsatish uchun holat obyektida xato xabarini qaytaring.

'use server'

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

  try {
    // ...
  } catch (e) {
    return { message: 'Xabarni saqlashda xatolik yuz berdi' };
  }
}

5. Ma'lumotlarni Qayta Tekshirish (Revalidate)

Server Action ma'lumotlarni muvaffaqiyatli o'zgartirgandan so'ng, UI eng so'nggi o'zgarishlarni aks ettirishini ta'minlash uchun ma'lumotlar keshini qayta tekshirishingiz (revalidate) kerak bo'lishi mumkin. Muayyan yo'llar yoki teg'larni qayta tekshirish uchun `next/cache` dan `revalidatePath` yoki `revalidateTag` funksiyalaridan foydalaning.

'use server'

import { revalidatePath } from 'next/cache';

export async function createMessage(prevState, formData) {
  // ...
  revalidatePath('/'); // Marshrut keshini tozalash
  // ...
}

Ilg'or Foydalanish

Ma'lumotlarni O'zgartirish

Server Actions ayniqsa ma'lumotlar bazalarini yoki tashqi API'larni yangilash kabi ma'lumotlarni o'zgartirish (mutating) uchun juda mos keladi. Siz Server Actions'dan ma'lumotlarni tekshirish, hisob-kitoblarni bajarish yoki bir nechta ma'lumotlar manbalari bilan o'zaro ishlash kabi server tomonidagi mantiqni talab qiladigan murakkab ma'lumotlar mutatsiyalarini boshqarish uchun foydalanishingiz mumkin. Foydalanuvchi profilini yangilash va tasdiqlash xatini yuborish kerak bo'lgan vaziyatni ko'rib chiqing. Server Action ham ma'lumotlar bazasini yangilashni, ham elektron pochta yuborish jarayonini bitta, atomik operatsiyada bajara oladi.

Autentifikatsiya va Avtorizatsiya

Server Actions autentifikatsiya va avtorizatsiyani boshqarish uchun ishlatilishi mumkin. Autentifikatsiya va avtorizatsiya tekshiruvlarini serverda bajarish orqali siz faqat ruxsat berilgan foydalanuvchilarning maxfiy ma'lumotlar va funksionallikka kirishini ta'minlay olasiz. Siz Server Actions'dan foydalanuvchi kirishi, ro'yxatdan o'tishi va parolni tiklash kabi jarayonlarni boshqarish uchun foydalanishingiz mumkin. Masalan, Server Action foydalanuvchi hisob ma'lumotlarini ma'lumotlar bazasi bilan tekshirishi va keyingi so'rovlarni autentifikatsiya qilish uchun ishlatilishi mumkin bo'lgan tokenni qaytarishi mumkin.

Edge Funksiyalari

Server Actions Edge Functions sifatida joylashtirilishi mumkin, ular sizning foydalanuvchilaringizga yaqin joylashgan global serverlar tarmog'ida ishlaydi. Bu, ayniqsa, geografik jihatdan tarqoq joylashgan foydalanuvchilar uchun kechikishni sezilarli darajada kamaytirishi va samaradorlikni oshirishi mumkin. Edge Functions real vaqtda ma'lumotlarni yangilash yoki shaxsiylashtirilgan kontent yetkazib berish kabi kam kechikishni talab qiladigan Server Actions'ni boshqarish uchun idealdir. Next.js Server Actions'ni Edge Functions sifatida joylashtirish uchun o'rnatilgan qo'llab-quvvatlashni taqdim etadi.

Oqimli Uzatish (Streaming)

Server Actions oqimli uzatishni (streaming) qo'llab-quvvatlaydi, bu esa ma'lumotlar mavjud bo'lgach, ularni klientga qismlarga bo'lib yuborish imkonini beradi. Bu, ayniqsa, bajarilishi uzoq vaqt talab qiladigan Server Actions uchun ilovangizning seziladigan samaradorligini oshirishi mumkin. Oqimli uzatish katta hajmdagi ma'lumotlar to'plamlari yoki murakkab hisob-kitoblarni boshqarish uchun ayniqsa foydalidir. Masalan, qidiruv natijalarini ma'lumotlar bazasidan olingan zahoti klientga oqim orqali uzatishingiz mumkin, bu esa foydalanuvchi tajribasini yanada sezgir qiladi.

Eng Yaxshi Amaliyotlar

React Server Actions'dan foydalanishda rioya qilish kerak bo'lgan ba'zi eng yaxshi amaliyotlar:

• Server Actions'ni kichik va aniq maqsadli qiling: Har bir Server Action bitta, aniq belgilangan vazifani bajarishi kerak. Bu kodingizni tushunish, sinovdan o'tkazish va qo'llab-quvvatlashni osonlashtiradi.
• Tushunarli nomlardan foydalaning: Server Action'ning maqsadini aniq ko'rsatadigan nomlarni tanlang. Masalan, `createComment` yoki `updateUserProfile` kabi nomlar `processData` kabi umumiy nomlardan yaxshiroqdir.
• Ma'lumotlarni serverda tekshiring: Yomon niyatli foydalanuvchilarning ilovangizga noto'g'ri ma'lumotlar kiritishining oldini olish uchun ma'lumotlarni har doim serverda tekshiring. Bu ma'lumotlar turlarini, formatlarini va diapazonlarini tekshirishni o'z ichiga oladi.
• Xatoliklarni to'g'ri boshqaring: Xatoliklarni boshqarish uchun `try...catch` bloklaridan foydalaning va foydalanuvchiga ma'lumot beruvchi xato xabarlarini taqdim eting. Maxfiy xato ma'lumotlarini klientga oshkor qilishdan saqlaning.
• Optimistik yangilanishlardan foydalaning: UI'ni darhol, hatto server harakatni tasdiqlamasdan oldin yangilab, foydalanuvchi tajribasini yanada sezgir qiling.
• Kerak bo'lganda ma'lumotlarni qayta tekshiring: Server Action ma'lumotlarni o'zgartirgandan so'ng, ma'lumotlar keshini qayta tekshirib, UI eng so'nggi o'zgarishlarni aks ettirishini ta'minlang.

Haqiqiy Hayotdan Misollar

Keling, React Server Actions turli xil ilovalarda qanday ishlatilishi mumkinligiga oid ba'zi haqiqiy hayotdan misollarni ko'rib chiqaylik:

Elektron Tijorat Ilovasi

• Xarid savatiga mahsulot qo'shish: Server Action foydalanuvchining xarid savatiga mahsulot qo'shishni va ma'lumotlar bazasidagi savat umumiy summasini yangilashni boshqarishi mumkin. Optimistik yangilanishlar mahsulotni savatda darhol ko'rsatish uchun ishlatilishi mumkin.
• To'lovni amalga oshirish: Server Action uchinchi tomon to'lov shlyuzi orqali to'lovni amalga oshirishni boshqarishi mumkin. Server Action shuningdek ma'lumotlar bazasidagi buyurtma holatini yangilashi va foydalanuvchiga tasdiqlash xatini yuborishi mumkin.
• Mahsulot haqida sharh yuborish: Server Action mahsulot sharhini yuborishni va uni ma'lumotlar bazasiga saqlashni boshqarishi mumkin. Server Action shuningdek mahsulotning o'rtacha reytingini hisoblashi va mahsulot tafsilotlari sahifasini yangilashi mumkin.

Ijtimoiy Tarmoq Ilovasi

• Yangi tvit joylash: Server Action yangi tvitni joylashni va uni ma'lumotlar bazasiga saqlashni boshqarishi mumkin. Server Action shuningdek foydalanuvchining lenta (timeline) sini yangilashi va uning kuzatuvchilarini xabardor qilishi mumkin.
• Postga layk bosish: Server Action postga layk bosishni va ma'lumotlar bazasidagi layklar sonini yangilashni boshqarishi mumkin. Optimistik yangilanishlar yangilangan layklar sonini darhol ko'rsatish uchun ishlatilishi mumkin.
• Foydalanuvchini kuzatish: Server Action foydalanuvchini kuzatishni va ma'lumotlar bazasidagi kuzatuvchilar va kuzatilayotganlar sonini yangilashni boshqarishi mumkin.

Kontentni Boshqarish Tizimi (CMS)

• Yangi blog posti yaratish: Server Action yangi blog posti yaratishni va uni ma'lumotlar bazasiga saqlashni boshqarishi mumkin. Server Action shuningdek post uchun slug yaratishi va sayt xaritasini (sitemap) yangilashi mumkin.
• Sahifani yangilash: Server Action sahifani yangilashni va uni ma'lumotlar bazasiga saqlashni boshqarishi mumkin. Server Action shuningdek yangilangan kontent foydalanuvchilarga ko'rsatilishini ta'minlash uchun sahifa keshini qayta tekshirishi mumkin.
• O'zgarishni nashr etish: Server Action o'zgarishni ma'lumotlar bazasiga nashr etishni va barcha obunachilarni xabardor qilishni boshqarishi mumkin.

Xalqarolashtirish Masalalari

Global auditoriya uchun ilovalar ishlab chiqishda xalqarolashtirish (i18n) va mahalliylashtirishni (l10n) hisobga olish juda muhim. Xalqarolashtirilgan ilovalarda React Server Actions'dan foydalanish bo'yicha ba'zi mulohazalar:

• Turli sana va vaqt formatlarini boshqarish: Foydalanuvchi hududiga (locale) muvofiq sana va vaqtlarni formatlash uchun `Intl` API'sidan foydalaning.
• Turli son formatlarini boshqarish: Foydalanuvchi hududiga muvofiq sonlarni formatlash uchun `Intl` API'sidan foydalaning.
• Turli valyutalarni boshqarish: Foydalanuvchi hududiga muvofiq valyutalarni formatlash uchun `Intl` API'sidan foydalaning.
• Xato xabarlarini tarjima qilish: Xato xabarlarini foydalanuvchi tiliga tarjima qiling.
• O'ngdan chapga (RTL) yoziladigan tillarni qo'llab-quvvatlash: Ilovangiz arab va ivrit kabi RTL tillarni qo'llab-quvvatlashini ta'minlang.

Masalan, sana kiritishni talab qiladigan formaga ishlov berishda, Server Action foydalanuvchining hududiy sozlamalaridan qat'i nazar sananing to'g'ri talqin qilinishini ta'minlash uchun sanani `Intl.DateTimeFormat` API yordamida foydalanuvchi hududiga muvofiq tahlil qilishi mumkin.

Xulosa

React Server Actions React ilovalarida server tomonidagi formalarga ishlov berishni va ma'lumotlar mutatsiyasini soddalashtirish uchun kuchli vositadir. Server Actions sizga React komponentlaringiz ichida to'g'ridan-to'g'ri server tomonidagi kodni yozishga imkon berish orqali ortiqcha kodni kamaytiradi, xavfsizlikni oshiradi, samaradorlikni yaxshilaydi va optimistik yangilanishlarni amalga oshirish imkonini beradi. Ushbu qo'llanmada keltirilgan eng yaxshi amaliyotlarga rioya qilish orqali siz Server Actions'dan yanada mustahkam, kengaytiriladigan va qo'llab-quvvatlanishi oson React ilovalarini yaratish uchun foydalanishingiz mumkin. React rivojlanishda davom etar ekan, Server Actions shubhasiz veb-dasturlash kelajagida tobora muhim rol o'ynaydi.