React Server Action javobini oqimlash: Yaxshilangan UX uchun progressiv shakl javobi

React Server Actions bizning React ilovalarimizda server tomonidagi operatsiyalarni qanday boshqarishimizda kuchli paradigma o'zgarishini taqdim etadi. Eng qiziqarli xususiyatlardan biri bu javoblarni progressiv tarzda oqimlash imkoniyatidir, bu esa butun operatsiya yakunlanmasdan oldin ham foydalanuvchilarga darhol fikr-mulohaza bildirish imkonini beradi. Bu, ayniqsa, shakllar uchun foydalidir, chunki ma'lumotlar mavjud bo'lganda interfeysni yangilab, yanada sezgir va qiziqarli foydalanuvchi tajribasini yaratishimiz mumkin.

React Server Actions'ni tushunish

Server Actions — bu serverda ishlaydigan, React komponentlaridan ishga tushiriladigan asinxron funksiyalardir. Ular an'anaviy API chaqiruvlariga nisbatan bir qancha afzalliklarga ega:

• Yaxshilangan xavfsizlik: Server Actions to'g'ridan-to'g'ri serverda ishlaydi, bu esa maxfiy ma'lumotlar yoki mantiqning mijozga oshkor bo'lish xavfini kamaytiradi.
• Kamaytirilgan shablon kod: Ular mijozda alohida API yo'nalishlari va ma'lumotlarni olish mantig'iga bo'lgan ehtiyojni yo'q qiladi.
• Yaxshilangan unumdorlik: Ular tezroq dastlabki yuklanish vaqtlari va yaxshilangan unumdorlik uchun server tomonida renderlash (SSR) va keshdan foydalanishi mumkin.
• Turlar xavfsizligi: TypeScript bilan Server Actions to'liq (end-to-end) turlar xavfsizligini ta'minlaydi, bu mijoz va server o'rtasidagi ma'lumotlar izchilligini kafolatlaydi.

Javoblarni oqimlash kuchi

An'anaviy shakllarni yuborish ko'pincha barcha ma'lumotlarni serverga yuborish, javobni kutish va keyin interfeysni mos ravishda yangilashni o'z ichiga oladi. Bu, ayniqsa, murakkab shakllar yoki sekin tarmoq ulanishlarida sezilarli kechikishga olib kelishi mumkin. Javoblarni oqimlash serverga ma'lumotlarni mijozga qismlarga bo'lib yuborish imkonini beradi, bu esa ma'lumotlar mavjud bo'lganda interfeysni progressiv tarzda yangilashga imkon beradi.

Foydalanuvchi kiritishiga asoslangan murakkab narxni hisoblaydigan shaklni tasavvur qiling. Butun hisob-kitob tugashini kutish o'rniga, server oraliq natijalarni mijozga qaytarib yuborishi mumkin, bu esa foydalanuvchiga real vaqtda fikr-mulohaza beradi. Bu foydalanuvchi tajribasini sezilarli darajada yaxshilashi va ilovani yanada sezgir his qilishiga yordam beradi.

Server Actions yordamida progressiv shakl javobini amalga oshirish

Keling, React Server Actions yordamida progressiv shakl javobini qanday amalga oshirish misolini ko'rib chiqaylik.

Misol: Real vaqtdagi valyuta konverteri

Biz foydalanuvchi summani kiritganda real vaqtda valyuta kursini yangilab turadigan oddiy valyuta konverteri shaklini yaratamiz.

1. Server Action'ni sozlash

Birinchi navbatda, valyuta konvertatsiyasini boshqaradigan Server Action'ni aniqlaymiz.

// server/actions.ts
'use server';

import { unstable_cache } from 'next/cache';

async function getExchangeRate(fromCurrency: string, toCurrency: string): Promise<number> {
  // Simulate fetching exchange rate from an external API
  console.log(`Fetching exchange rate for ${fromCurrency} to ${toCurrency}`);
  await new Promise(resolve => setTimeout(resolve, 500)); // Simulate network delay
  if (fromCurrency === 'USD' && toCurrency === 'EUR') return 0.92;
  if (fromCurrency === 'EUR' && toCurrency === 'USD') return 1.09;
  if (fromCurrency === 'USD' && toCurrency === 'JPY') return 145;
  if (fromCurrency === 'JPY' && toCurrency === 'USD') return 0.0069;
  throw new Error(`Exchange rate not found for ${fromCurrency} to ${toCurrency}`);
}

export const convertCurrency = async (prevState: any, formData: FormData) => {
  const fromCurrency = formData.get('fromCurrency') as string;
  const toCurrency = formData.get('toCurrency') as string;
  const amount = Number(formData.get('amount'));

  try {
    if (!fromCurrency || !toCurrency || isNaN(amount)) {
      return { message: 'Please provide valid input.' };
    }

    // Simulate streaming the response
    await new Promise(resolve => setTimeout(resolve, 250));
    const exchangeRate = await unstable_cache(
      async () => getExchangeRate(fromCurrency, toCurrency),
      [`exchange-rate-${fromCurrency}-${toCurrency}`],
      { tags: [`exchange-rate-${fromCurrency}-${toCurrency}`] }
    )();

    await new Promise(resolve => setTimeout(resolve, 250));
    const convertedAmount = amount * exchangeRate;

    return { message: `Converted amount: ${convertedAmount.toFixed(2)} ${toCurrency}` };
  } catch (e: any) {
    console.error(e);
    return { message: 'Failed to convert currency.' };
  }
};

Ushbu misolda, convertCurrency Server Action valyuta kursini oladi (kechikish bilan simulyatsiya qilingan) va konvertatsiya qilingan miqdorni hisoblaydi. Biz tarmoq kechikishini simulyatsiya qilish va oqimlash effektini namoyish etish uchun setTimeout yordamida sun'iy kechikishlar qo'shdik.

2. React komponentini amalga oshirish

Keyin, Server Action'dan foydalanadigan React komponentini yaratamiz.

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

import { useState, useTransition } from 'react';
import { convertCurrency } from './server/actions';
import { useFormState } from 'react-dom';

export default function CurrencyConverter() {
  const [fromCurrency, setFromCurrency] = useState('USD');
  const [toCurrency, setToCurrency] = useState('EUR');
  const [amount, setAmount] = useState('');
  const [isPending, startTransition] = useTransition();
  const [state, formAction] = useFormState(convertCurrency, { message: '' });

  const handleSubmit = async (event: React.FormEvent) => {
    event.preventDefault();
    startTransition(() => {
      formAction(new FormData(event.target as HTMLFormElement));
    });
  };

  return (
    <div>
      <h2>Real-Time Currency Converter</h2>
      <form action={handleSubmit}>
        <label htmlFor="fromCurrency">From:</label>
        <select id="fromCurrency" name="fromCurrency" value={fromCurrency} onChange={(e) => setFromCurrency(e.target.value)}>
          <option value="USD">USD</option>
          <option value="EUR">EUR</option>
          <option value="JPY">JPY</option>
        </select>

        <label htmlFor="toCurrency">To:</label>
        <select id="toCurrency" name="toCurrency" value={toCurrency} onChange={(e) => setToCurrency(e.target.value)}>
          <option value="EUR">EUR</option>
          <option value="USD">USD</option>
          <option value="JPY">JPY</option>
        </select>

        <label htmlFor="amount">Amount:</label>
        <input
          type="number"
          id="amount"
          name="amount"
          value={amount}
          onChange={(e) => setAmount(e.target.value)}
        />

        <button type="submit" disabled={isPending}>
          {isPending ? 'Converting...' : 'Convert'}
        </button>
      </form>
      <p>{state.message}</p>
    </div>
  );
}

Asosiy nuqtalar:

• Biz shakl holatini boshqarish va Server Action'ni chaqirish uchun useFormState hook'idan foydalanamiz.
• useTransition'dan olingan isPending holati yuborish tugmasini o'chirib qo'yadi va harakat bajarilayotganda "Konvertatsiya qilinmoqda..." xabarini ko'rsatadi, bu esa foydalanuvchiga fikr-mulohaza beradi.
• useFormState tomonidan qaytarilgan formAction funksiyasi avtomatik ravishda shaklni yuborishni boshqaradi va holatni Server Action'dan kelgan javob bilan yangilaydi.

3. Progressiv yangilanishlarni tushunish

Foydalanuvchi shaklni yuborganida, handleSubmit funksiyasi chaqiriladi. U shakldan FormData ob'ektini yaratadi va uni formAction funksiyasiga uzatadi. Keyin Server Action serverda bajariladi. Server Action'ga kiritilgan sun'iy kechikishlar tufayli siz quyidagilarni kuzatasiz:

1. Yuborish tugmasi deyarli darhol "Konvertatsiya qilinmoqda..." ga o'zgaradi.
2. Qisqa kechikishdan so'ng (250ms), kod valyuta kursini olishni simulyatsiya qiladi.
3. Konvertatsiya qilingan miqdor hisoblanadi va natija mijozga qaytariladi.
4. React komponentidagi state.message yangilanadi va konvertatsiya qilingan miqdorni ko'rsatadi.

Bu javoblarni oqimlash bizga ma'lumotlar mavjud bo'lganda foydalanuvchiga oraliq yangilanishlarni taqdim etishimizga qanday imkon berishini ko'rsatadi, bu esa yanada sezgir va qiziqarli foydalanuvchi tajribasiga olib keladi.

Progressiv shakl javobining afzalliklari

• Yaxshilangan foydalanuvchi tajribasi: Foydalanuvchilarga darhol fikr-mulohaza beradi, bu esa ilovani yanada sezgir va kamroq sekin his qilishiga yordam beradi.
• Seziladigan kechikishning kamayishi: Oraliq natijalarni ko'rsatish orqali, foydalanuvchilar umumiy operatsiya bir xil vaqtni olsa ham jarayonni tezroq deb qabul qilishadi.
• Yaxshilangan jalb qilish: Real vaqtda yangilanishlarni taqdim etish orqali foydalanuvchilarni jalb qiladi va sezilgan kechikishlar tufayli ularning shaklni tark etishini oldini oladi.
• Konversiya stavkalarining oshishi: Silliqroq va sezgirroq foydalanuvchi tajribasi, ayniqsa murakkab shakllar uchun yuqori konversiya stavkalariga olib kelishi mumkin.

Ilg'or usullar

1. Tezkor interfeys yangilanishlari uchun `useOptimistic` dan foydalanish

useOptimistic hook'i sizga Server Action tugashidan oldin interfeysni optimistik tarzda yangilash imkonini beradi. Bu yanada tezroq seziladigan javob vaqtini ta'minlashi mumkin, chunki interfeys kutilgan natijani darhol aks ettiradi.

import { useOptimistic } from 'react';

function MyComponent() {
  const [optimisticState, addOptimistic] = useOptimistic(
    initialState,
    (state, newUpdate) => {
      // Return the new state based on the update
      return { ...state, ...newUpdate };
    }
  );

  const handleClick = async () => {
    addOptimistic({ someValue: 'optimistic update' });
    await myServerAction();
  };

  return (
    <div>
      <p>{optimisticState.someValue}</p>
      <button onClick={handleClick}>Update</button>
    </div>
  );
}

Valyuta konverteri misolida, siz konvertatsiya qilingan miqdorni joriy valyuta kursi asosida optimistik tarzda yangilab, serverda haqiqiy hisob-kitob tugashidan oldin foydalanuvchiga darhol oldindan ko'rish imkoniyatini berishingiz mumkin. Agar server xato qaytarsa, siz optimistik yangilanishni bekor qilishingiz mumkin.

2. Xatolarni qayta ishlash va zaxira mexanizmlarini joriy etish

Server Action ishlamay qolganda yoki tarmoq aloqasi uzilganda vaziyatlarni boshqarish uchun mustahkam xatolarni qayta ishlash va zaxira mexanizmlarini joriy etish juda muhim. Xatolarni ushlash va mijozga tegishli xato xabarini qaytarish uchun Server Action ichidagi try...catch blokidan foydalanishingiz mumkin.

// server/actions.ts

export const convertCurrency = async (prevState: any, formData: FormData) => {
  // ...
  try {
    // ...
  } catch (error: any) {
    console.error(error);
    return { message: 'An error occurred while converting the currency. Please try again later.' };
  }
};

Mijoz tomonida siz foydalanuvchiga xato xabarini ko'rsatishingiz va operatsiyani qayta urinish yoki qo'llab-quvvatlash xizmatiga murojaat qilish imkoniyatlarini taqdim etishingiz mumkin.

3. Unumdorlik uchun valyuta kurslarini keshlash

Tashqi API'dan valyuta kurslarini olish unumdorlikda muammo bo'lishi mumkin. Unumdorlikni yaxshilash uchun siz Redis yoki Memcached kabi keshlash mexanizmidan foydalanib valyuta kurslarini keshlashingiz mumkin. Next.js'dagi unstable_cache (misolda ishlatilganidek) o'rnatilgan keshlash yechimini taqdim etadi. Valyuta kurslari yangi bo'lishini ta'minlash uchun keshni vaqti-vaqti bilan bekor qilishni unutmang.

4. Xalqarolashtirish masalalari

Global auditoriya uchun ilovalar yaratayotganda, xalqarolashtirishni (i18n) hisobga olish muhim. Bunga quyidagilar kiradi:

• Raqamlarni formatlash: Turli mahalliy sozlamalar uchun mos raqam formatlaridan foydalaning (masalan, kasr ajratuvchi sifatida vergul yoki nuqtadan foydalanish).
• Valyutani formatlash: Foydalanuvchining mahalliy sozlamalariga muvofiq valyuta belgilarini va formatlarini ko'rsating.
• Sana va vaqtni formatlash: Turli mahalliy sozlamalar uchun mos sana va vaqt formatlaridan foydalaning.
• Mahalliylashtirish: Interfeysni turli tillarga tarjima qiling.

Intl va react-intl kabi kutubxonalar React ilovalaringizda i18n'ni amalga oshirishga yordam beradi.

Haqiqiy dunyo misollari va qo'llash holatlari

• Elektron tijorat: Foydalanuvchi savatga mahsulot qo'shganda real vaqtda yetkazib berish narxlari va taxminiy muddatlarini ko'rsatish.
• Moliyaviy ilovalar: Real vaqtda aksiya kotirovkalari va portfel yangilanishlarini taqdim etish.
• Sayohat bron qilish: Real vaqtda parvoz narxlari va mavjudligini ko'rsatish.
• Ma'lumotlarni vizualizatsiya qilish: Diagrammalar va grafiklarga ma'lumotlar yangilanishlarini oqimlash.
• Hamkorlik vositalari: Hujjatlar va loyihalarga real vaqtda yangilanishlarni ko'rsatish.

Xulosa

React Server Action javoblarini oqimlash sizning React ilovalaringizdagi foydalanuvchi tajribasini yaxshilashning kuchli usulini taklif etadi. Progressiv shakl javoblarini taqdim etish orqali siz foydalanuvchilarni jalb qiladigan va konversiya stavkalarini yaxshilaydigan tezroq, sezgirroq va qiziqarliroq shakllarni yaratishingiz mumkin. Javoblarni oqimlashni optimistik yangilanishlar va keshlash kabi usullar bilan birlashtirib, siz haqiqatan ham ajoyib foydalanuvchi tajribalarini yaratishingiz mumkin.

React Server Actions rivojlanishda davom etar ekan, biz yanada kuchliroq xususiyatlar va imkoniyatlar paydo bo'lishini kutishimiz mumkin, bu esa murakkab va dinamik veb-ilovalarni ishlab chiqishni yanada soddalashtiradi.

Qo'shimcha o'rganish

• Next.js Server Actions Hujjatlari
• React Rasmiy Hujjatlari
• Streams API

Ushbu qo'llanma React Server Action javoblarini oqimlash va uning progressiv shakl javoblariga qo'llanilishi haqida keng qamrovli ma'lumot beradi. Bu yerda muhokama qilingan tushunchalar va usullarni tushunib, siz tezroq, sezgirroq va qiziqarliroq veb-ilovalarni yaratish uchun ushbu kuchli xususiyatdan foydalanishingiz mumkin.