M

MLOG

Eesti

Avasta React Server Actions, võimas funktsioon vormide esitamise ja andmete muutmise käsitlemiseks otse serveris, lihtsustades Reacti arendust ja suurendades turvalisust.

React Server Actions: Serveripoolne vormitöötlus lihtsustatud

React Server Actions, mis võeti kasutusele React 18-s ja mida on Next.js-is oluliselt täiustatud, pakuvad revolutsioonilist lähenemisviisi vormide esitamise ja andmete muutmise käsitlemiseks otse serveris. See võimas funktsioon lihtsustab arendusprotsessi, suurendab turvalisust ja parandab jõudlust võrreldes traditsioonilise kliendipoolse andmete toomise ja manipuleerimisega.

Mis on React Server Actions?

Server Actions on asünkroonsed funktsioonid, mis töötavad serveris ja mida saab käivitada otse Reacti komponentidest. Need võimaldavad teil teha serveripoolseid toiminguid, näiteks:

Server Actions'i peamine eelis on see, et need võimaldavad teil kirjutada serveripoolset koodi oma Reacti komponentides, kõrvaldades vajaduse eraldi API marsruutide ja keeruka kliendipoolse andmete toomise loogika järele. See UI ja serveripoolse loogika koos paiknemine viib hallatavama ja tõhusama koodibaasini.

React Server Actions'i kasutamise eelised

React Server Actions'i kasutamine pakub mitmeid olulisi eeliseid:

Lihtsustatud arendus

Server Actions vähendavad boilerplaadi koodi, võimaldades teil käsitleda vormide esitamisi ja andmete muutmisi otse oma Reacti komponentides. See kõrvaldab vajaduse eraldi API lõpp-punktide ja keeruka kliendipoolse andmete toomise loogika järele, muutes arendusprotsessi sujuvamaks ja muutes teie koodi lihtsamini mõistetavaks ja hooldatavaks. Mõelge lihtsale kontaktivormile. Ilma Server Actions'ita vajaksite eraldi API marsruuti vormi esitamise käsitlemiseks, kliendipoolset JavaScripti andmete saatmiseks ja veakäsitlusloogikat nii kliendis kui ka serveris. Server Actions'iga saab seda kõike käsitleda komponendi sees.

Suurem turvalisus

Koodi serveris käitamise kaudu vähendavad Server Actions teie rakenduse rünnakupinda. Tundlikud andmed ja äriloogika hoitakse kliendi eest eemal, takistades pahatahtlikel kasutajatel neid rikkuda. Näiteks andmebaasi mandaate või API võtmeid ei avaldata kunagi kliendipoolses koodis. Kogu andmebaasi interaktsioon toimub serveris, vähendades SQL-i süstimise või volitamata juurdepääsu ohtu.

Parem jõudlus

Server Actions võib parandada jõudlust, vähendades JavaScripti hulka, mida on vaja kliendis alla laadida ja käivitada. See on eriti kasulik kasutajatele, kellel on madala võimsusega seadmed või aeglane internetiühendus. Andmetöötlus toimub serveris ja kliendile saadetakse ainult vajalikud UI värskendused, mille tulemuseks on kiirem lehe laadimine ja sujuvam kasutuskogemus.

Optimistlikud värskendused

Server Actions integreeruvad sujuvalt Reacti Suspense ja Transitions'iga, võimaldades optimistlikke värskendusi. Optimistlikud värskendused võimaldavad teil UI-d kohe värskendada, isegi enne, kui server on toimingu kinnitanud. See tagab reageerivama ja kaasahaaravama kasutuskogemuse, kuna kasutajad ei pea ootama serveri vastust, enne kui nad näevad oma toimingute tulemusi. E-kaubanduses saab ostukorvi lisatava elemendi kohe kuvada, samal ajal kui server kinnitab taustal lisamist.

Progressiivne täiustamine

Server Actions toetavad progressiivset täiustamist, mis tähendab, et teie rakendus võib endiselt toimida, isegi kui JavaScript on keelatud või seda ei õnnestu laadida. Kui JavaScript on keelatud, esitatakse vormid traditsiooniliste HTML-vormidena ja server käsitleb esitamist ja suunab kasutaja uuele lehele. See tagab, et teie rakendus jääb kättesaadavaks kõigile kasutajatele, olenemata nende brauseri konfiguratsioonist või võrgutingimustest. See on eriti oluline juurdepääsetavuse ja SEO jaoks.

Kuidas kasutada React Server Actions'it

React Server Actions'i kasutamiseks peate kasutama raamistikku, mis neid toetab, näiteks Next.js. Siin on samm-sammult juhend:

1. Defineeri Server Action

Looge asünkroonse funktsioon, mis töötab serveris. See funktsioon peaks käsitlema loogikat, mida soovite serveris käivitada, näiteks andmebaasi värskendamine või API kutsumine. Märgistage funktsioon direktiiviga `"use server"` ülaosas, et näidata, et see on Server Action. See direktiiv ütleb Reacti kompilaatorile, et funktsiooni tuleb käsitleda serveripoolse funktsioonina ning käsitseda automaatselt andmete serialiseerimist ja deserialiseerimist kliendi ja serveri vahel.

// 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('/'); // Clear the route cache
    return { message: 'Message saved successfully!' };
  } catch (e) {
    return { message: 'Failed to save message' };
  }
}

Selgitus:

2. Impordi ja kasuta Server Action'it oma komponendis

Importige Server Action oma Reacti komponenti ja kasutage seda vormielemendi `action` rekvisiidina. `useFormState` konksu saab kasutada vormi oleku haldamiseks ja kasutajale tagasiside kuvamiseks.

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

      
      
      
      {state?.message && 
{state.message}
}
    

  );
}

Selgitus:

3. Käsitle vormiandmeid

Server Actioni sees pääsete vormiandmetele juurde `FormData` API abil. See API pakub mugava viisi vormiväljade väärtustele juurdepääsuks.

'use server'

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

  // ...
}

4. Käsitle vigu

Kasutage `try...catch` plokke, et käsitleda vigu, mis võivad Server Actioni käivitamise ajal tekkida. Tagastage olekuobjektis veateade, et seda kasutajale kuvada.

'use server'

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

  try {
    // ...
  } catch (e) {
    return { message: 'Failed to save message' };
  }
}

5. Revalidateeri andmed

Pärast seda, kui Server Action on andmeid edukalt muutnud, peate võib-olla andmete vahemälu uuesti valideerima, et tagada, et UI kajastab uusimaid muudatusi. Kasutage funktsioone `revalidatePath` või `revalidateTag` teegist `next/cache`, et uuesti valideerida konkreetseid radu või silte.

'use server'

import { revalidatePath } from 'next/cache';

export async function createMessage(prevState, formData) {
  // ...
  revalidatePath('/'); // Clear the route cache
  // ...
}

Täpsem kasutamine

Andmete muutmine

Server Actions sobivad eriti hästi andmete muutmiseks, näiteks andmebaaside või väliste API-de värskendamiseks. Saate kasutada Server Actions'it keerukate andmete muutmiste käsitlemiseks, mis nõuavad serveripoolset loogikat, näiteks andmete valideerimine, arvutuste tegemine või suhtlemine mitme andmeallikaga. Mõelge stsenaariumile, kus peate värskendama kasutaja profiili ja saatma kinnitusmeili. Server Action saab käsitleda nii andmebaasi värskendamist kui ka meili saatmise protsessi ühes aatomioperatsioonis.

Autentimine ja autoriseerimine

Server Actions'it saab kasutada autentimise ja autoriseerimise käsitlemiseks. Autentimise ja autoriseerimise kontrollide tegemisega serveris saate tagada, et ainult volitatud kasutajatel on juurdepääs tundlikele andmetele ja funktsioonidele. Saate kasutada Server Actions'it kasutajate sisselogimiste, registreerimiste ja parooli lähtestamiste käsitlemiseks. Näiteks saab Server Action kontrollida kasutaja mandaate andmebaasi vastu ja tagastada tokeni, mida saab kasutada järgnevate päringute autentimiseks.

Edge funktsioonid

Server Actions'it saab juurutada Edge funktsioonidena, mis töötavad teie kasutajatele lähedasel globaalses serverite võrgus. See võib oluliselt vähendada latentsust ja parandada jõudlust, eriti geograafiliselt hajutatud asukohtades asuvate kasutajate jaoks. Edge funktsioonid sobivad ideaalselt Server Actions'i käsitlemiseks, mis nõuavad madalat latentsust, näiteks reaalajas andmete värskendused või isikupärastatud sisu edastamine. Next.js pakub sisseehitatud tuge Server Actions'i juurutamiseks Edge funktsioonidena.

Voogedastus

Server Actions toetavad voogedastust, mis võimaldab teil saata andmeid kliendile tükkidena, kui need kättesaadavaks saavad. See võib parandada teie rakenduse tajutavat jõudlust, eriti Server Actions'i puhul, mille käivitamine võtab kaua aega. Voogedastus on eriti kasulik suurte andmekogumite või keerukate arvutuste käsitlemiseks. Näiteks saate otsingutulemused kliendile voogesitada, kui need andmebaasist kätte saadakse, pakkudes reageerivamat kasutuskogemust.

Parimad praktikad

Siin on mõned parimad praktikad, mida React Server Actions'i kasutamisel järgida:

Reaalse maailma näited

Vaatleme mõningaid reaalseid näiteid selle kohta, kuidas React Server Actions'it saab kasutada erinevat tüüpi rakendustes:

E-kaubanduse rakendus

Sotsiaalmeedia rakendus

Sisuhaldussüsteem (CMS)

Rahvusvahelistamise kaalutlused

Ülemaailmsele publikule rakenduste arendamisel on oluline arvestada rahvusvahelistamise (i18n) ja lokaliseerimise (l10n). Siin on mõned kaalutlused React Server Actions'i kasutamisel rahvusvahelistatud rakendustes:

Näiteks kuupäevasisestust nõudva vormi töötlemisel saab Server Action kasutada `Intl.DateTimeFormat` API-t kuupäeva parsimiseks vastavalt kasutaja lokaadile, tagades, et kuupäeva tõlgendatakse õigesti olenemata kasutaja piirkondlikest seadetest.

Järeldus

React Server Actions on võimas tööriist serveripoolse vormitöötluse ja andmete muutmise lihtsustamiseks Reacti rakendustes. Võimaldades teil kirjutada serveripoolset koodi otse oma Reacti komponentides, vähendavad Server Actions boilerplaadi koodi, suurendavad turvalisust, parandavad jõudlust ja võimaldavad optimistlikke värskendusi. Järgides selles juhendis toodud parimaid praktikaid, saate kasutada Server Actions'it, et ehitada jõulisemaid, skaleeritavamaid ja hooldatavamaid Reacti rakendusi. Kuna React areneb pidevalt, mängivad Server Actions kahtlemata üha olulisemat rolli veebiarenduse tulevikus.