Strujanje odgovora React poslužiteljskih akcija: Progresivni odgovor obrasca za poboljšano korisničko iskustvo

React poslužiteljske akcije (React Server Actions) uvode snažnu promjenu paradigme u načinu na koji obrađujemo operacije na strani poslužitelja unutar naših React aplikacija. Jedna od najuzbudljivijih značajki je mogućnost progresivnog strujanja odgovora, što nam omogućuje da korisnicima pružimo trenutnu povratnu informaciju čak i prije nego što se cijela operacija završi. To je posebno korisno za obrasce, gdje možemo stvoriti responzivnije i privlačnije korisničko iskustvo ažuriranjem korisničkog sučelja kako podaci postaju dostupni.

Razumijevanje React poslužiteljskih akcija

Poslužiteljske akcije su asinkrone funkcije koje se izvode na poslužitelju, a pokreću se iz React komponenti. Nude nekoliko prednosti u odnosu na tradicionalne API pozive:

• Poboljšana sigurnost: Poslužiteljske akcije izvode se izravno na poslužitelju, smanjujući rizik od izlaganja osjetljivih podataka ili logike klijentu.
• Smanjen 'boilerplate' kod: Uklanjaju potrebu za zasebnim API rutama i logikom dohvaćanja podataka na klijentu.
• Poboljšane performanse: Mogu iskoristiti renderiranje na strani poslužitelja (SSR) i predmemoriranje za brže početno učitavanje i poboljšane performanse.
• Tipska sigurnost: Uz TypeScript, poslužiteljske akcije pružaju end-to-end tipsku sigurnost, osiguravajući dosljednost podataka između klijenta i poslužitelja.

Moć strujanja odgovora

Tradicionalno slanje obrazaca često uključuje slanje svih podataka poslužitelju, čekanje odgovora, a zatim ažuriranje korisničkog sučelja. To može dovesti do percipiranog kašnjenja, posebno kod složenih obrazaca ili sporih mrežnih veza. Strujanje odgovora omogućuje poslužitelju da šalje podatke klijentu u dijelovima, što nam omogućuje progresivno ažuriranje korisničkog sučelja kako podaci postaju dostupni.

Zamislite obrazac koji izračunava složenu cijenu na temelju korisničkog unosa. Umjesto čekanja da se cijeli izračun završi, poslužitelj može strujati međurezultate natrag klijentu, pružajući korisniku povratne informacije u stvarnom vremenu. To može značajno poboljšati korisničko iskustvo i učiniti aplikaciju responzivnijom.

Implementacija progresivnog odgovora obrasca s poslužiteljskim akcijama

Prođimo kroz primjer kako implementirati progresivni odgovor obrasca s React poslužiteljskim akcijama.

Primjer: Konverter valuta u stvarnom vremenu

Napravit ćemo jednostavan obrazac za konverziju valuta koji pruža ažuriranja tečaja u stvarnom vremenu dok korisnik upisuje iznos.

1. Postavljanje poslužiteljske akcije

Prvo, definiramo poslužiteljsku akciju koja obrađuje konverziju valuta.

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

import { unstable_cache } from 'next/cache';

async function getExchangeRate(fromCurrency: string, toCurrency: string): Promise<number> {
  // Simulacija dohvaćanja tečaja s vanjskog API-ja
  console.log(`Fetching exchange rate for ${fromCurrency} to ${toCurrency}`);
  await new Promise(resolve => setTimeout(resolve, 500)); // Simulacija mrežnog kašnjenja
  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.' };
    }

    // Simulacija strujanja odgovora
    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.' };
  }
};

U ovom primjeru, poslužiteljska akcija convertCurrency dohvaća tečaj (simulirano s kašnjenjem) i izračunava konvertirani iznos. Dodali smo umjetna kašnjenja koristeći setTimeout kako bismo simulirali mrežnu latenciju i demonstrirali efekt strujanja.

2. Implementacija React komponente

Zatim, stvaramo React komponentu koja koristi poslužiteljsku akciju.

// 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>Konverter valuta u stvarnom vremenu</h2>
      <form onSubmit={handleSubmit}>
        <label htmlFor="fromCurrency">Iz:</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">U:</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">Iznos:</label>
        <input
          type="number"
          id="amount"
          name="amount"
          value={amount}
          onChange={(e) => setAmount(e.target.value)}
        />

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

Ključne točke:

• Koristimo useFormState hook za upravljanje stanjem obrasca i pozivanje poslužiteljske akcije.
• Stanje isPending iz useTransition onemogućuje gumb za slanje i prikazuje poruku "Konvertiram..." dok se akcija izvodi, dajući korisniku povratnu informaciju.
• Funkcija formAction koju vraća useFormState automatski obrađuje slanje obrasca i ažurira stanje s odgovorom iz poslužiteljske akcije.

3. Razumijevanje progresivnih ažuriranja

Kada korisnik pošalje obrazac, poziva se funkcija handleSubmit. Ona stvara FormData objekt iz obrasca i prosljeđuje ga funkciji formAction. Poslužiteljska akcija se zatim izvršava na poslužitelju. Zbog umjetnih kašnjenja uvedenih u poslužiteljsku akciju, primijetit ćete sljedeće:

1. Gumb za slanje se gotovo odmah mijenja u "Konvertiram...".
2. Nakon kratkog kašnjenja (250ms), kod simulira dohvaćanje tečaja.
3. Konvertirani iznos se izračunava i rezultat se šalje natrag klijentu.
4. state.message u React komponenti se ažurira, prikazujući konvertirani iznos.

Ovo pokazuje kako nam strujanje odgovora omogućuje pružanje međuažuriranja korisniku kako podaci postaju dostupni, što dovodi do responzivnijeg i privlačnijeg korisničkog iskustva.

Prednosti progresivnog odgovora obrasca

• Poboljšano korisničko iskustvo: Pruža trenutnu povratnu informaciju korisnicima, čineći aplikaciju responzivnijom i manje tromom.
• Smanjena percipirana latencija: Prikazivanjem međurezultata, korisnici percipiraju proces kao brži, čak i ako ukupna operacija traje isto vrijeme.
• Povećan angažman: Zadržava korisnike angažiranima pružanjem ažuriranja u stvarnom vremenu i sprječava ih da napuste obrazac zbog percipiranih kašnjenja.
• Povećane stope konverzije: Uglađenije i responzivnije korisničko iskustvo može dovesti do viših stopa konverzije, posebno kod složenih obrazaca.

Napredne tehnike

1. Korištenje `useOptimistic` za trenutna ažuriranja sučelja

Hook useOptimistic omogućuje vam optimistično ažuriranje korisničkog sučelja prije nego što se poslužiteljska akcija završi. To može pružiti još brže percipirano vrijeme odgovora, jer sučelje odmah odražava očekivani rezultat.

import { useOptimistic } from 'react';

function MyComponent() {
  const [optimisticState, addOptimistic] = useOptimistic(
    initialState,
    (state, newUpdate) => {
      // Vratite novo stanje na temelju ažuriranja
      return { ...state, ...newUpdate };
    }
  );

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

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

U primjeru konvertera valuta, mogli biste optimistično ažurirati konvertirani iznos na temelju trenutnog tečaja, pružajući korisniku trenutni pregled prije nego što se stvarni izračun završi na poslužitelju. Ako poslužitelj vrati grešku, možete poništiti optimistično ažuriranje.

2. Implementacija obrade grešaka i rezervnih mehanizama

Ključno je implementirati robusnu obradu grešaka i rezervne mehanizme za rukovanje slučajevima kada poslužiteljska akcija ne uspije ili je mrežna veza prekinuta. Možete koristiti try...catch blok unutar poslužiteljske akcije kako biste uhvatili greške i vratili odgovarajuću poruku o grešci klijentu.

// 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.' };
  }
};

Na strani klijenta, možete prikazati poruku o grešci korisniku i ponuditi opcije za ponovni pokušaj operacije ili kontaktiranje podrške.

3. Predmemoriranje tečajeva za performanse

Dohvaćanje tečajeva s vanjskog API-ja može biti usko grlo u performansama. Da biste poboljšali performanse, možete predmemorirati tečajeve koristeći mehanizam za predmemoriranje poput Redisa ili Memcacheda. unstable_cache iz Next.js-a (kao što je korišteno u primjeru) pruža ugrađeno rješenje za predmemoriranje. Ne zaboravite periodično poništavati predmemoriju kako biste osigurali da su tečajevi ažurni.

4. Razmatranja o internacionalizaciji

Prilikom izrade aplikacija za globalnu publiku, važno je uzeti u obzir internacionalizaciju (i18n). To uključuje:

• Formatiranje brojeva: Koristite odgovarajuće formate brojeva za različite lokalizacije (npr. korištenje zareza ili točaka kao decimalnih separatora).
• Formatiranje valuta: Prikazujte simbole i formate valuta prema lokalizaciji korisnika.
• Formatiranje datuma i vremena: Koristite odgovarajuće formate datuma i vremena za različite lokalizacije.
• Lokalizacija: Prevedite korisničko sučelje na različite jezike.

Knjižnice poput Intl i react-intl mogu vam pomoći implementirati i18n u vašim React aplikacijama.

Primjeri iz stvarnog svijeta i slučajevi upotrebe

• E-trgovina: Prikazivanje troškova dostave i procjena isporuke u stvarnom vremenu dok korisnik dodaje artikle u košaricu.
• Financijske aplikacije: Pružanje kotacija dionica i ažuriranja portfelja u stvarnom vremenu.
• Rezervacija putovanja: Prikazivanje cijena letova i dostupnosti u stvarnom vremenu.
• Vizualizacija podataka: Strujanje ažuriranja podataka na grafikone i dijagrame.
• Alati za suradnju: Prikazivanje ažuriranja dokumenata i projekata u stvarnom vremenu.

Zaključak

Strujanje odgovora React poslužiteljskih akcija nudi moćan način za poboljšanje korisničkog iskustva vaših React aplikacija. Pružanjem progresivnih odgovora obrazaca, možete stvoriti brže, responzivnije i privlačnije obrasce koji zadržavaju korisnike angažiranima i poboljšavaju stope konverzije. Kombiniranjem strujanja odgovora s tehnikama poput optimističnih ažuriranja i predmemoriranja, možete izgraditi zaista izvanredna korisnička iskustva.

Kako se React poslužiteljske akcije nastavljaju razvijati, možemo očekivati pojavu još moćnijih značajki i mogućnosti, dodatno pojednostavljujući razvoj složenih i dinamičnih web aplikacija.

Daljnje istraživanje

• Dokumentacija za Next.js poslužiteljske akcije
• Službena React dokumentacija
• Streams API

Ovaj vodič pruža sveobuhvatan pregled strujanja odgovora React poslužiteljskih akcija i njegove primjene na progresivne odgovore obrazaca. Razumijevanjem koncepata i tehnika o kojima se ovdje raspravlja, možete iskoristiti ovu moćnu značajku za izgradnju bržih, responzivnijih i privlačnijih web aplikacija.