React Server Actions: Poenostavljena strežniška obdelava obrazcev

React Server Actions, predstavljene v React 18 in bistveno izboljšane v Next.js, ponujajo revolucionaren pristop k obdelavi oddanih obrazcev in mutacij podatkov neposredno na strežniku. Ta zmogljiva funkcija poenostavlja razvojni proces, povečuje varnost in izboljšuje zmogljivost v primerjavi s tradicionalnim pridobivanjem in manipulacijo podatkov na strani odjemalca.

Kaj so React Server Actions?

Server Actions so asinhrone funkcije, ki se izvajajo na strežniku in jih je mogoče klicati neposredno iz React komponent. Omogočajo vam izvajanje strežniških nalog, kot so:

• Oddaja obrazcev: Varna obdelava podatkov iz obrazcev na strežniku.
• Mutacije podatkov: Posodabljanje podatkovnih baz ali zunanjih API-jev.
• Avtentikacija: Obravnava prijav in registracij uporabnikov.
• Strežniška logika: Izvajanje kompleksne poslovne logike brez izpostavljanja odjemalcu.

Ključna prednost Server Actions je, da omogočajo pisanje strežniške kode znotraj vaših React komponent, s čimer odpade potreba po ločenih API poteh in zapleteni logiki za pridobivanje podatkov na strani odjemalca. Ta kolokacija uporabniškega vmesnika in strežniške logike vodi do bolj vzdržljive in učinkovite kode.

Prednosti uporabe React Server Actions

Uporaba React Server Actions prinaša več pomembnih prednosti:

Poenostavljen razvoj

Server Actions zmanjšajo količino ponavljajoče se kode, saj omogočajo obdelavo oddanih obrazcev in mutacij podatkov neposredno znotraj vaših React komponent. To odpravlja potrebo po ločenih API končnih točkah in zapleteni logiki za pridobivanje podatkov na strani odjemalca, kar poenostavi razvojni proces ter naredi vašo kodo lažjo za razumevanje in vzdrževanje. Vzemimo za primer preprost kontaktni obrazec. Brez Server Actions bi potrebovali ločeno API pot za obdelavo oddaje obrazca, odjemalski JavaScript za pošiljanje podatkov in logiko za obravnavo napak tako na odjemalcu kot na strežniku. S Server Actions je vse to mogoče obravnavati znotraj same komponente.

Povečana varnost

Z izvajanjem kode na strežniku Server Actions zmanjšajo napadalno površino vaše aplikacije. Občutljivi podatki in poslovna logika so ločeni od odjemalca, kar preprečuje zlonamernim uporabnikom, da bi z njimi manipulirali. Na primer, poverilnice za dostop do podatkovne baze ali API ključi niso nikoli izpostavljeni v odjemalski kodi. Vse interakcije s podatkovno bazo se dogajajo na strežniku, kar zmanjšuje tveganje za SQL injekcijo ali nepooblaščen dostop do podatkov.

Izboljšana zmogljivost

Server Actions lahko izboljšajo zmogljivost z zmanjšanjem količine JavaScripta, ki ga je treba prenesti in izvesti na odjemalcu. To je še posebej koristno za uporabnike na manj zmogljivih napravah ali s počasno internetno povezavo. Obdelava podatkov se zgodi na strežniku, odjemalcu pa se pošljejo le potrebne posodobitve uporabniškega vmesnika, kar vodi do hitrejšega nalaganja strani in bolj tekoče uporabniške izkušnje.

Optimistične posodobitve

Server Actions se brezhibno integrirajo z Reactovimi Suspense in Transitions, kar omogoča optimistične posodobitve. Optimistične posodobitve vam omogočajo, da takoj posodobite uporabniški vmesnik, še preden strežnik potrdi dejanje. To zagotavlja bolj odzivno in privlačno uporabniško izkušnjo, saj uporabnikom ni treba čakati na odgovor strežnika, da bi videli rezultate svojih dejanj. V e-trgovini je mogoče dodajanje izdelka v nakupovalno košarico prikazati takoj, medtem ko strežnik v ozadju potrjuje dodajanje.

Progresivna izboljšava

Server Actions podpirajo progresivno izboljšavo, kar pomeni, da vaša aplikacija lahko deluje tudi, če je JavaScript onemogočen ali se ne naloži. Ko je JavaScript onemogočen, se obrazci oddajo kot tradicionalni HTML obrazci, strežnik pa bo obdelal oddajo in uporabnika preusmeril na novo stran. To zagotavlja, da vaša aplikacija ostane dostopna vsem uporabnikom, ne glede na njihovo konfiguracijo brskalnika ali omrežne pogoje. To je še posebej pomembno za dostopnost in SEO.

Kako uporabljati React Server Actions

Za uporabo React Server Actions boste morali uporabljati ogrodje, ki jih podpira, kot je Next.js. Sledi vodnik po korakih:

1. Definirajte Server Action

Ustvarite asinhrono funkcijo, ki se bo izvajala na strežniku. Ta funkcija naj obravnava logiko, ki jo želite izvesti na strežniku, kot je posodabljanje podatkovne baze ali klicanje API-ja. Funkcijo na vrhu označite z direktivo `"use server"`, da označite, da gre za Server Action. Ta direktiva pove prevajalniku React, da naj funkcijo obravnava kot strežniško funkcijo in samodejno poskrbi za serializacijo in deserializacijo podatkov med odjemalcem in strežnikom.

// 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('/'); // Počisti predpomnilnik poti
    return { message: 'Sporočilo uspešno shranjeno!' };
  } catch (e) {
    return { message: 'Shranjevanje sporočila ni uspelo' };
  }
}

Pojasnilo:

• Direktiva `'use server'` označi to funkcijo kot Server Action.
• `revalidatePath('/')` počisti predpomnilnik poti in zagotovi, da se ob naslednji zahtevi pridobijo posodobljeni podatki. To je ključno za ohranjanje doslednosti podatkov.
• `saveMessage(message)` je zamenjava za vašo dejansko logiko interakcije s podatkovno bazo. Predpostavlja se, da imate funkcijo `saveMessage` definirano drugje za shranjevanje sporočila v vašo bazo.
• Funkcija vrne objekt stanja, ki se lahko uporabi za prikaz povratnih informacij uporabniku.

2. Uvozite in uporabite Server Action v svoji komponenti

Uvozite Server Action v svojo React komponento in jo uporabite kot `action` prop na elementu obrazca. Kljukico `useFormState` lahko uporabite za upravljanje stanja obrazca in prikazovanje povratnih informacij uporabniku.

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

      Sporočilo:
      
      Pošlji
      {state?.message && 
{state.message}
}
    
  );
}

Pojasnilo:

• Direktiva `'use client'` določa, da je to odjemalska komponenta (saj uporablja `useFormState`).
• `useFormState(createMessage, {message: ''})` inicializira stanje obrazca s Server Action `createMessage`. Drugi argument je začetno stanje.
• Prop `action` elementa `form` je nastavljen na `formAction`, ki ga vrne `useFormState`.
• Spremenljivka `state` vsebuje vrnjeno vrednost iz Server Action, ki se lahko uporabi za prikaz povratnih informacij uporabniku.

3. Obdelava podatkov obrazca

Znotraj Server Action lahko dostopate do podatkov obrazca z uporabo `FormData` API-ja. Ta API omogoča priročen način dostopa do vrednosti polj obrazca.

'use server'

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

  // ...
}

4. Obravnavanje napak

Uporabite bloke `try...catch` za obravnavanje napak, ki se lahko pojavijo med izvajanjem Server Action. V objektu stanja vrnite sporočilo o napaki, da ga prikažete uporabniku.

'use server'

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

  try {
    // ...
  } catch (e) {
    return { message: 'Shranjevanje sporočila ni uspelo' };
  }
}

5. Ponovno preverjanje podatkov

Ko Server Action uspešno spremeni podatke, boste morda morali ponovno preveriti predpomnilnik podatkov, da zagotovite, da uporabniški vmesnik odraža najnovejše spremembe. Uporabite funkciji `revalidatePath` ali `revalidateTag` iz `next/cache` za ponovno preverjanje določenih poti ali oznak.

'use server'

import { revalidatePath } from 'next/cache';

export async function createMessage(prevState, formData) {
  // ...
  revalidatePath('/'); // Počisti predpomnilnik poti
  // ...
}

Napredna uporaba

Mutiranje podatkov

Server Actions so še posebej primerne za mutiranje podatkov, kot je posodabljanje podatkovnih baz ali zunanjih API-jev. Uporabite jih lahko za obravnavo kompleksnih mutacij podatkov, ki zahtevajo strežniško logiko, kot so preverjanje podatkov, izvajanje izračunov ali interakcija z več viri podatkov. Predstavljajte si scenarij, kjer morate posodobiti profil uporabnika in poslati potrditveno e-pošto. Server Action lahko obravnava tako posodobitev baze podatkov kot postopek pošiljanja e-pošte v eni sami, atomski operaciji.

Avtentikacija in avtorizacija

Server Actions se lahko uporabljajo za avtentikacijo in avtorizacijo. Z izvajanjem preverjanj avtentikacije in avtorizacije na strežniku lahko zagotovite, da imajo samo pooblaščeni uporabniki dostop do občutljivih podatkov in funkcionalnosti. Server Actions lahko uporabite za obravnavo prijav, registracij in ponastavitev gesel uporabnikov. Na primer, Server Action lahko preveri poverilnice uporabnika v podatkovni bazi in vrne žeton, ki se lahko uporabi za avtentikacijo nadaljnjih zahtev.

Robne funkcije (Edge Functions)

Server Actions je mogoče namestiti kot robne funkcije, ki se izvajajo na globalnem omrežju strežnikov blizu vaših uporabnikov. To lahko znatno zmanjša zakasnitev in izboljša zmogljivost, zlasti za uporabnike na geografsko razpršenih lokacijah. Robne funkcije so idealne za obravnavo Server Actions, ki zahtevajo nizko zakasnitev, kot so posodobitve podatkov v realnem času ali dostava prilagojene vsebine. Next.js ponuja vgrajeno podporo za namestitev Server Actions kot robnih funkcij.

Pretakanje (Streaming)

Server Actions podpirajo pretakanje, kar omogoča pošiljanje podatkov odjemalcu v delih, ko postanejo na voljo. To lahko izboljša zaznano zmogljivost vaše aplikacije, zlasti pri Server Actions, ki se izvajajo dolgo časa. Pretakanje je še posebej uporabno za obravnavo velikih naborov podatkov ali kompleksnih izračunov. Na primer, lahko rezultate iskanja pretakate odjemalcu, ko se pridobivajo iz podatkovne baze, kar zagotavlja bolj odzivno uporabniško izkušnjo.

Najboljše prakse

Sledi nekaj najboljših praks, ki jih je treba upoštevati pri uporabi React Server Actions:

• Ohranite Server Actions majhne in osredotočene: Vsaka Server Action naj opravi eno, dobro definirano nalogo. To naredi vašo kodo lažjo za razumevanje, testiranje in vzdrževanje.
• Uporabljajte opisna imena: Izberite imena, ki jasno kažejo namen Server Action. Na primer, `ustvariKomentar` ali `posodobiProfilUporabnika` so boljša od splošnih imen, kot je `obdelajPodatke`.
• Preverjajte podatke na strežniku: Vedno preverjajte podatke na strežniku, da preprečite zlonamernim uporabnikom vnos neveljavnih podatkov v vašo aplikacijo. To vključuje preverjanje tipov podatkov, formatov in obsegov.
• Elegantno obravnavajte napake: Uporabite bloke `try...catch` za obravnavo napak in zagotovite informativna sporočila o napakah uporabniku. Izogibajte se izpostavljanju občutljivih informacij o napakah odjemalcu.
• Uporabljajte optimistične posodobitve: Zagotovite bolj odzivno uporabniško izkušnjo s takojšnjim posodabljanjem uporabniškega vmesnika, še preden strežnik potrdi dejanje.
• Po potrebi ponovno preverjajte podatke: Zagotovite, da uporabniški vmesnik odraža najnovejše spremembe s ponovnim preverjanjem predpomnilnika podatkov po tem, ko je Server Action spremenila podatke.

Primeri iz resničnega sveta

Poglejmo si nekaj primerov iz resničnega sveta, kako se lahko React Server Actions uporabljajo v različnih vrstah aplikacij:

Aplikacija za e-trgovino

• Dodajanje izdelka v nakupovalno košarico: Server Action lahko obravnava dodajanje izdelka v uporabnikovo nakupovalno košarico in posodabljanje skupnega zneska v bazi podatkov. Optimistične posodobitve se lahko uporabijo za takojšen prikaz izdelka v košarici.
• Obdelava plačila: Server Action lahko obravnava obdelavo plačila z uporabo plačilnega prehoda tretje osebe. Server Action lahko tudi posodobi status naročila v bazi podatkov in pošlje potrditveno e-pošto uporabniku.
• Oddaja ocene izdelka: Server Action lahko obravnava oddajo ocene izdelka in jo shrani v bazo podatkov. Server Action lahko tudi izračuna povprečno oceno za izdelek in posodobi stran s podrobnostmi o izdelku.

Aplikacija za družbena omrežja

• Objavljanje novega tvita: Server Action lahko obravnava objavo novega tvita in ga shrani v bazo podatkov. Server Action lahko tudi posodobi uporabnikovo časovnico in obvesti njegove sledilce.
• Všečkanje objave: Server Action lahko obravnava všečkanje objave in posodobi število všečkov v bazi podatkov. Optimistične posodobitve se lahko uporabijo za takojšen prikaz posodobljenega števila všečkov.
• Sledenje uporabniku: Server Action lahko obravnava sledenje uporabniku in posodobi število sledilcev in sledenih v bazi podatkov.

Sistem za upravljanje vsebin (CMS)

• Ustvarjanje nove objave v blogu: Server Action lahko obravnava ustvarjanje nove objave v blogu in jo shrani v bazo podatkov. Server Action lahko tudi ustvari slug za objavo in posodobi sitemap.
• Posodabljanje strani: Server Action lahko obravnava posodabljanje strani in jo shrani v bazo podatkov. Server Action lahko tudi ponovno preveri predpomnilnik strani, da zagotovi, da se posodobljena vsebina prikaže uporabnikom.
• Objavljanje spremembe: Server Action lahko obravnava objavo spremembe v bazi podatkov in obvesti vse naročnike.

Upoštevanje internacionalizacije

Pri razvoju aplikacij za globalno občinstvo je bistveno upoštevati internacionalizacijo (i18n) in lokalizacijo (l10n). Sledi nekaj premislekov za uporabo React Server Actions v internacionaliziranih aplikacijah:

• Obravnavanje različnih formatov datumov in časov: Uporabite `Intl` API za formatiranje datumov in časov v skladu z jezikovnimi nastavitvami uporabnika.
• Obravnavanje različnih formatov številk: Uporabite `Intl` API za formatiranje številk v skladu z jezikovnimi nastavitvami uporabnika.
• Obravnavanje različnih valut: Uporabite `Intl` API za formatiranje valut v skladu z jezikovnimi nastavitvami uporabnika.
• Prevajanje sporočil o napakah: Prevedite sporočila o napakah v jezik uporabnika.
• Podpora za jezike z desne proti levi (RTL): Zagotovite, da vaša aplikacija podpira RTL jezike, kot sta arabščina in hebrejščina.

Na primer, pri obdelavi obrazca, ki zahteva vnos datuma, lahko Server Action uporabi `Intl.DateTimeFormat` API za razčlenitev datuma v skladu z jezikovnimi nastavitvami uporabnika, kar zagotavlja pravilno interpretacijo datuma ne glede na regionalne nastavitve uporabnika.

Zaključek

React Server Actions so močno orodje za poenostavitev strežniške obdelave obrazcev in mutacij podatkov v React aplikacijah. Z omogočanjem pisanja strežniške kode neposredno znotraj vaših React komponent, Server Actions zmanjšajo ponavljajočo se kodo, povečajo varnost, izboljšajo zmogljivost in omogočajo optimistične posodobitve. Z upoštevanjem najboljših praks, opisanih v tem vodniku, lahko izkoristite Server Actions za gradnjo bolj robustnih, skalabilnih in vzdržljivih React aplikacij. Ker se React še naprej razvija, bodo Server Actions nedvomno igrale vse pomembnejšo vlogo v prihodnosti spletnega razvoja.