Strömning av svar från React Server Actions: Progressiva formulärsvar för en förbättrad användarupplevelse

React Server Actions introducerar ett kraftfullt paradigmskifte i hur vi hanterar operationer på serversidan i våra React-applikationer. En av de mest spännande funktionerna är möjligheten att strömma svar progressivt, vilket gör att vi kan ge omedelbar feedback till användare redan innan hela operationen är klar. Detta är särskilt fördelaktigt för formulär, där vi kan skapa en mer responsiv och engagerande användarupplevelse genom att uppdatera gränssnittet allteftersom data blir tillgänglig.

Förstå React Server Actions

Server Actions är asynkrona funktioner som körs på servern, initierade från React-komponenter. De erbjuder flera fördelar jämfört med traditionella API-anrop:

• Förbättrad säkerhet: Server Actions körs direkt på servern, vilket minskar risken för att exponera känslig data eller logik för klienten.
• Minskad "boilerplate": De eliminerar behovet av separata API-rutter och logik för datahämtning på klienten.
• Förbättrad prestanda: De kan utnyttja serversidig rendering (SSR) och cachning för snabbare initiala laddningstider och förbättrad prestanda.
• Typsäkerhet: Med TypeScript ger Server Actions end-to-end typsäkerhet, vilket säkerställer datakonsistens mellan klienten och servern.

Kraften i svarsströmning

Traditionella formulärinskick innebär ofta att all data skickas till servern, man väntar på ett svar och uppdaterar sedan gränssnittet därefter. Detta kan leda till en upplevd fördröjning, särskilt för komplexa formulär eller långsamma nätverksanslutningar. Svarsströmning gör att servern kan skicka tillbaka data till klienten i delar (chunks), vilket gör att vi kan uppdatera gränssnittet progressivt allteftersom data blir tillgänglig.

Tänk dig ett formulär som beräknar ett komplext pris baserat på användarens inmatning. Istället för att vänta på att hela beräkningen ska slutföras kan servern strömma mellanliggande resultat tillbaka till klienten, vilket ger realtidsfeedback till användaren. Detta kan avsevärt förbättra användarupplevelsen och få applikationen att kännas mer responsiv.

Implementera progressiva formulärsvar med Server Actions

Låt oss gå igenom ett exempel på hur man implementerar progressiva formulärsvar med React Server Actions.

Exempel: En valutakonverterare i realtid

Vi skapar ett enkelt formulär för valutakonvertering som ger realtidsuppdateringar av växelkursen när användaren skriver in beloppet.

1. Sätta upp Server Action

Först definierar vi den Server Action som hanterar valutakonverteringen.

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

import { unstable_cache } from 'next/cache';

async function getExchangeRate(fromCurrency: string, toCurrency: string): Promise<number> {
  // Simulera hämtning av växelkurs från ett externt API
  console.log(`Fetching exchange rate for ${fromCurrency} to ${toCurrency}`);
  await new Promise(resolve => setTimeout(resolve, 500)); // Simulera nätverksfördröjning
  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: 'Vänligen ange giltig inmatning.' };
    }

    // Simulera strömning av svaret
    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: `Konverterat belopp: ${convertedAmount.toFixed(2)} ${toCurrency}` };
  } catch (e: any) {
    console.error(e);
    return { message: 'Misslyckades med att konvertera valutan.' };
  }
};

I det här exemplet hämtar convertCurrency Server Action växelkursen (simulerat med en fördröjning) och beräknar det konverterade beloppet. Vi har lagt till artificiella fördröjningar med setTimeout för att simulera nätverkslatens och demonstrera strömningseffekten.

2. Implementera React-komponenten

Därefter skapar vi React-komponenten som använder vår Server Action.

// 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>Valutakonverterare i realtid</h2>
      <form action={handleSubmit}>
        <label htmlFor="fromCurrency">Från:</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">Till:</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">Belopp:</label>
        <input
          type="number"
          id="amount"
          name="amount"
          value={amount}
          onChange={(e) => setAmount(e.target.value)}
        />

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

Viktiga punkter:

• Vi använder useFormState-hooken för att hantera formulärets tillstånd och anropa vår Server Action.
• isPending-tillståndet från useTransition inaktiverar skicka-knappen och visar meddelandet "Konverterar..." medan åtgärden körs, vilket ger användaren feedback.
• formAction-funktionen som returneras av useFormState hanterar automatiskt formulärinskicket och uppdaterar tillståndet med svaret från vår Server Action.

3. Förstå de progressiva uppdateringarna

När användaren skickar in formuläret anropas handleSubmit-funktionen. Den skapar ett FormData-objekt från formuläret och skickar det till formAction-funktionen. Vår Server Action exekverar sedan på servern. På grund av de artificiella fördröjningarna som införts i vår Server Action kommer du att observera följande:

1. Skicka-knappen ändras till "Konverterar..." nästan omedelbart.
2. Efter en kort fördröjning (250ms) simulerar koden hämtningen av växelkursen.
3. Det konverterade beloppet beräknas och resultatet skickas tillbaka till klienten.
4. state.message i React-komponenten uppdateras och visar det konverterade beloppet.

Detta visar hur svarsströmning gör det möjligt för oss att ge mellanliggande uppdateringar till användaren allteftersom data blir tillgänglig, vilket leder till en mer responsiv och engagerande användarupplevelse.

Fördelar med progressiva formulärsvar

• Förbättrad användarupplevelse: Ger omedelbar feedback till användare, vilket gör att applikationen känns mer responsiv och mindre trög.
• Minskad upplevd latens: Genom att visa mellanliggande resultat upplever användarna processen som snabbare, även om den totala operationen tar lika lång tid.
• Ökat engagemang: Håller användarna engagerade genom att ge realtidsuppdateringar och förhindrar att de överger formuläret på grund av upplevda fördröjningar.
• Ökade konverteringsgrader: En smidigare och mer responsiv användarupplevelse kan leda till högre konverteringsgrader, särskilt för komplexa formulär.

Avancerade tekniker

1. Använda `useOptimistic` för omedelbara UI-uppdateringar

useOptimistic-hooken låter dig optimistiskt uppdatera gränssnittet innan din Server Action har slutförts. Detta kan ge en ännu snabbare upplevd svarstid, eftersom gränssnittet omedelbart återspeglar det förväntade resultatet.

import { useOptimistic } from 'react';

function MyComponent() {
  const [optimisticState, addOptimistic] = useOptimistic(
    initialState,
    (state, newUpdate) => {
      // Returnera det nya tillståndet baserat på uppdateringen
      return { ...state, ...newUpdate };
    }
  );

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

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

I exemplet med valutakonverteraren skulle du optimistiskt kunna uppdatera det konverterade beloppet baserat på den aktuella växelkursen, vilket ger en omedelbar förhandsvisning till användaren innan den faktiska beräkningen slutförs på servern. Om servern returnerar ett fel kan du återställa den optimistiska uppdateringen.

2. Implementera felhantering och fallback-mekanismer

Det är avgörande att implementera robust felhantering och fallback-mekanismer för att hantera fall där en Server Action misslyckas eller nätverksanslutningen bryts. Du kan använda ett try...catch-block i din Server Action för att fånga fel och returnera ett lämpligt felmeddelande till klienten.

// server/actions.ts

export const convertCurrency = async (prevState: any, formData: FormData) => {
  // ...
  try {
    // ...
  } catch (error: any) {
    console.error(error);
    return { message: 'Ett fel inträffade vid konvertering av valutan. Försök igen senare.' };
  }
};

På klientsidan kan du visa felmeddelandet för användaren och erbjuda alternativ för att försöka igen eller kontakta support.

3. Cacha växelkurser för prestanda

Att hämta växelkurser från ett externt API kan vara en prestandaflaskhals. För att förbättra prestandan kan du cacha växelkurserna med en cachningsmekanism som Redis eller Memcached. unstable_cache från Next.js (som används i exemplet) erbjuder en inbyggd cachningslösning. Kom ihåg att invalidera cachen periodiskt för att säkerställa att växelkurserna är uppdaterade.

4. Internationaliseringsaspekter

När man bygger applikationer för en global publik är det viktigt att tänka på internationalisering (i18n). Detta inkluderar:

• Talformatering: Använd lämpliga talformat för olika locales (t.ex. använda kommatecken eller punkter som decimalavskiljare).
• Valutaformatering: Visa valutasymboler och format enligt användarens locale.
• Datum- och tidsformatering: Använd lämpliga datum- och tidsformat för olika locales.
• Lokalisering: Översätt gränssnittet till olika språk.

Bibliotek som Intl och react-intl kan hjälpa dig att implementera i18n i dina React-applikationer.

Verkliga exempel och användningsfall

• E-handel: Visa fraktkostnader och leveransberäkningar i realtid när användaren lägger till varor i sin varukorg.
• Finansiella applikationer: Tillhandahålla aktiekurser och portföljuppdateringar i realtid.
• Resebokning: Visa flygpriser och tillgänglighet i realtid.
• Datavisualisering: Strömma datauppdateringar till diagram och grafer.
• Samarbetsverktyg: Visa realtidsuppdateringar i dokument och projekt.

Slutsats

Strömning av svar från React Server Actions erbjuder ett kraftfullt sätt att förbättra användarupplevelsen i dina React-applikationer. Genom att tillhandahålla progressiva formulärsvar kan du skapa snabbare, mer responsiva och mer engagerande formulär som håller användarna engagerade och förbättrar konverteringsgraden. Genom att kombinera svarsströmning med tekniker som optimistiska uppdateringar och cachning kan du bygga verkligt exceptionella användarupplevelser.

Allteftersom React Server Actions fortsätter att utvecklas kan vi förvänta oss att ännu kraftfullare funktioner och möjligheter dyker upp, vilket ytterligare förenklar utvecklingen av komplexa och dynamiska webbapplikationer.

Vidare utforskning

• Next.js Server Actions Dokumentation
• React Officiell Dokumentation
• Streams API

Denna guide ger en omfattande översikt över strömning av svar från React Server Actions och dess tillämpning på progressiva formulärsvar. Genom att förstå de koncept och tekniker som diskuteras här kan du utnyttja denna kraftfulla funktion för att bygga snabbare, mer responsiva och mer engagerande webbapplikationer.