Reacti Server Action'i vastuse voogedastus: Progressiivne vormivastus parema kasutajakogemuse saavutamiseks

Reacti Server Actionid (serveri toimingud) toovad kaasa võimsa paradigmamuutuse selles, kuidas me oma Reacti rakendustes serveripoolseid operatsioone käsitleme. Üks põnevamaid funktsioone on võimalus vastuseid progressiivselt voogedastada, mis võimaldab meil anda kasutajatele kohest tagasisidet isegi enne, kui kogu operatsioon on lõpule viidud. See on eriti kasulik vormide puhul, kus saame luua reageerivama ja kaasavama kasutajakogemuse, uuendades kasutajaliidest andmete kättesaadavaks muutumisel.

Reacti Server Actionite mõistmine

Server Actionid on asünkroonsed funktsioonid, mis käivitatakse serveris ja algatatakse Reacti komponentidest. Need pakuvad traditsiooniliste API-kõnede ees mitmeid eeliseid:

• Täiustatud turvalisus: Server Actionid töötavad otse serveris, vähendades tundlike andmete või loogika kliendile paljastamise ohtu.
• Vähem korduvkoodi: Need kõrvaldavad vajaduse eraldi API marsruutide ja andmete pärimise loogika järele kliendi poolel.
• Parem jõudlus: Nad saavad kasutada serveripoolset renderdamist (SSR) ja vahemällu salvestamist kiiremate esialgsete laadimisaegade ja parema jõudluse saavutamiseks.
• Tüübiohutus: TypeScriptiga pakuvad Server Actionid täielikku tüübiohutust, tagades andmete järjepidevuse kliendi ja serveri vahel.

Vastuse voogedastuse võimsus

Traditsioonilised vormide esitamised hõlmavad sageli kõigi andmete saatmist serverisse, vastuse ootamist ja seejärel kasutajaliidese vastavat uuendamist. See võib põhjustada tajutavat viivitust, eriti keeruliste vormide või aeglaste võrguühenduste korral. Vastuse voogedastus võimaldab serveril saata andmeid kliendile tagasi osade kaupa, mis võimaldab meil kasutajaliidest andmete kättesaadavaks muutumisel progressiivselt uuendada.

Kujutage ette vormi, mis arvutab kasutaja sisendi põhjal keerulise hinna. Selle asemel, et oodata kogu arvutuse lõpuleviimist, saab server voogedastada vahetulemusi tagasi kliendile, pakkudes kasutajale reaalajas tagasisidet. See võib oluliselt parandada kasutajakogemust ja muuta rakenduse tundlikumaks.

Progressiivse vormivastuse rakendamine Server Actionitega

Vaatame läbi näite, kuidas rakendada progressiivset vormivastust Reacti Server Actionitega.

Näide: reaalajas valuutakonverter

Loome lihtsa valuutakonverteri vormi, mis pakub reaalajas vahetuskursi uuendusi, kui kasutaja summa sisestab.

1. Server Actioni seadistamine

Esmalt defineerime Server Actioni, mis tegeleb valuuta konverteerimisega.

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

import { unstable_cache } from 'next/cache';

async function getExchangeRate(fromCurrency: string, toCurrency: string): Promise<number> {
  // Simuleerime vahetuskursi pärimist välisest API-st
  console.log(`Fetching exchange rate for ${fromCurrency} to ${toCurrency}`);
  await new Promise(resolve => setTimeout(resolve, 500)); // Simuleerime võrguviivitust
  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.' };
    }

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

Selles näites hangib convertCurrency Server Action vahetuskursi (simuleeritud viivitusega) ja arvutab konverteeritud summa. Oleme lisanud kunstlikke viivitusi, kasutades setTimeout, et simuleerida võrgu latentsust ja demonstreerida voogedastuse efekti.

2. Reacti komponendi rakendamine

Järgmisena loome Reacti komponendi, mis kasutab Server Actionit.

// 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>Reaalajas Valuutakonverter</h2>
      <form action={handleSubmit}>
        <label htmlFor="fromCurrency">Kust:</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">Kuhu:</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">Summa:</label>
        <input
          type="number"
          id="amount"
          name="amount"
          value={amount}
          onChange={(e) => setAmount(e.target.value)}
        />

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

Põhipunktid:

• Me kasutame useFormState hook'i vormi oleku haldamiseks ja Server Actioni käivitamiseks.
• useTransition'ist saadav isPending olek keelab esitamisnupu ja näitab teadet "Konverteerin...", kui toiming on käimas, andes kasutajale tagasisidet.
• useFormState'i poolt tagastatud formAction funktsioon tegeleb automaatselt vormi esitamise ja oleku uuendamisega Server Actionist saadud vastusega.

3. Progressiivsete uuenduste mõistmine

Kui kasutaja vormi esitab, kutsutakse välja funktsioon handleSubmit. See loob vormist FormData objekti ja edastab selle formAction funktsioonile. Seejärel käivitatakse Server Action serveris. Server Actionis kasutusele võetud kunstlike viivituste tõttu märkate järgmist:

1. Esitamisnupp muutub peaaegu kohe tekstiks "Konverteerin...".
2. Pärast lühikest viivitust (250 ms) simuleerib kood vahetuskursi saamist.
3. Arvutatakse konverteeritud summa ja tulemus saadetakse kliendile tagasi.
4. Reacti komponendis uuendatakse state.message'it, kuvades konverteeritud summa.

See demonstreerib, kuidas vastuse voogedastus võimaldab meil pakkuda kasutajale vahepealseid uuendusi andmete kättesaadavaks muutumisel, mis viib reageerivama ja kaasavama kasutajakogemuseni.

Progressiivse vormivastuse eelised

• Parem kasutajakogemus: Annab kasutajatele kohest tagasisidet, muutes rakenduse tundlikumaks ja vähem loiuks.
• Vähendatud tajutav latentsus: Näidates vahetulemusi, tajuvad kasutajad protsessi kiiremana, isegi kui kogu operatsioon võtab sama palju aega.
• Suurem kaasatus: Hoiab kasutajad kaasatuna, pakkudes reaalajas uuendusi ja vältides nende lahkumist vormist tajutavate viivituste tõttu.
• Suurenenud konversioonimäärad: Sujuvam ja reageerivam kasutajakogemus võib viia kõrgemate konversioonimääradeni, eriti keeruliste vormide puhul.

Täpsemad tehnikad

1. `useOptimistic` kasutamine koheseks kasutajaliidese uuendamiseks

Hook useOptimistic võimaldab teil kasutajaliidest optimistlikult uuendada enne Server Actioni lõpuleviimist. See võib pakkuda veelgi kiiremat tajutavat reageerimisaega, kuna kasutajaliides peegeldab oodatud tulemust kohe.

import { useOptimistic } from 'react';

function MyComponent() {
  const [optimisticState, addOptimistic] = useOptimistic(
    initialState,
    (state, newUpdate) => {
      // Tagasta uus olek uuenduse põhjal
      return { ...state, ...newUpdate };
    }
  );

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

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

Valuutakonverteri näites võiksite konverteeritud summa optimistlikult uuendada praeguse vahetuskursi põhjal, pakkudes kasutajale kohest eelvaadet enne, kui tegelik arvutus serveris lõpule viiakse. Kui server tagastab vea, saate optimistliku uuenduse tagasi pöörata.

2. Veakäsitluse ja varumehhanismide rakendamine

On ülioluline rakendada tugevat veakäsitlust ja varumehhanisme, et tulla toime juhtudega, kus Server Action ebaõnnestub või võrguühendus katkeb. Saate kasutada try...catch plokki Server Actioni sees vigade püüdmiseks ja kliendile sobiva veateate tagastamiseks.

// server/actions.ts

export const convertCurrency = async (prevState: any, formData: FormData) => {
  // ...
  try {
    // ...
  } catch (error: any) {
    console.error(error);
    return { message: 'Valuuta konverteerimisel ilmnes viga. Palun proovige hiljem uuesti.' };
  }
};

Kliendi poolel saate kuvada kasutajale veateate ja pakkuda võimalusi toimingu uuesti proovimiseks või toega ühenduse võtmiseks.

3. Vahetuskursside vahemällu salvestamine jõudluse parandamiseks

Vahetuskursside pärimine välisest API-st võib olla jõudluse kitsaskoht. Jõudluse parandamiseks saate vahetuskursid vahemällu salvestada, kasutades vahemällu salvestamise mehhanismi nagu Redis või Memcached. Next.js'i unstable_cache (nagu näites kasutatud) pakub sisseehitatud vahemällu salvestamise lahendust. Ärge unustage vahemälu perioodiliselt tühistada, et tagada vahetuskursside ajakohasus.

4. Rahvusvahelistamise kaalutlused

Globaalsele sihtrühmale rakenduste loomisel on oluline arvestada rahvusvahelistamisega (i18n). See hõlmab:

• Numbrite vormindamine: Kasutage erinevate lokaatide jaoks sobivaid numbrivorminguid (nt komade või punktide kasutamine komakohtadena).
• Valuuta vormindamine: Kuvage valuutasümboleid ja -vorminguid vastavalt kasutaja lokaadile.
• Kuupäeva ja kellaaja vormindamine: Kasutage erinevate lokaatide jaoks sobivaid kuupäeva ja kellaaja vorminguid.
• Lokaliseerimine: Tõlkige kasutajaliides erinevatesse keeltesse.

Teegid nagu Intl ja react-intl aitavad teil oma Reacti rakendustes i18n-i rakendada.

Reaalse maailma näited ja kasutusjuhud

• E-kaubandus: Reaalajas saatmiskulude ja tarneaja prognooside kuvamine, kui kasutaja lisab tooteid ostukorvi.
• Finantsrakendused: Reaalajas aktsiahindade ja portfelli uuenduste pakkumine.
• Reiside broneerimine: Reaalajas lennuhindade ja saadavuse näitamine.
• Andmete visualiseerimine: Andmeuuenduste voogedastamine diagrammidele ja graafikutele.
• Koostöövahendid: Reaalajas uuenduste kuvamine dokumentides ja projektides.

Kokkuvõte

Reacti Server Actioni vastuse voogedastus pakub võimsat viisi oma Reacti rakenduste kasutajakogemuse parandamiseks. Pakkudes progressiivseid vormivastuseid, saate luua kiiremaid, reageerivamaid ja kaasavamaid vorme, mis hoiavad kasutajad kaasatuna ja parandavad konversioonimäärasid. Kombineerides vastuse voogedastust tehnikatega nagu optimistlikud uuendused ja vahemällu salvestamine, saate luua tõeliselt erakordseid kasutajakogemusi.

Kuna React Server Actionid arenevad edasi, võime oodata veelgi võimsamaid funktsioone ja võimalusi, mis lihtsustavad veelgi keerukate ja dünaamiliste veebirakenduste arendamist.

Edasine uurimine

• Next.js Server Actionite dokumentatsioon
• Reacti ametlik dokumentatsioon
• Streams API

See juhend annab põhjaliku ülevaate Reacti Server Actioni vastuse voogedastusest ja selle rakendamisest progressiivsetele vormivastustele. Mõistes siin käsitletud kontseptsioone ja tehnikaid, saate seda võimsat funktsiooni ära kasutada kiiremate, reageerivamate ja kaasavamate veebirakenduste loomiseks.