React Server Actions: Vienkāršota veidlapu apstrāde servera pusē

React Server Actions, kas ieviestas React 18 un ievērojami uzlabotas Next.js, piedāvā revolucionāru pieeju veidlapu iesniegšanas un datu mutāciju apstrādei tieši serverī. Šī jaudīgā funkcija vienkāršo izstrādes procesu, uzlabo drošību un veiktspēju salīdzinājumā ar tradicionālo klienta puses datu ielādi un manipulāciju.

Kas ir React Server Actions?

Server Actions ir asinhronas funkcijas, kas darbojas serverī un var tikt izsauktas tieši no React komponentiem. Tās ļauj veikt servera puses uzdevumus, piemēram:

• Veidlapu iesniegšana: Droši apstrādājiet veidlapu datus serverī.
• Datu mutācijas: Atjauniniet datubāzes vai ārējos API.
• Autentifikācija: Apstrādājiet lietotāju pieteikšanos un reģistrāciju.
• Servera puses loģika: Izpildiet sarežģītu biznesa loģiku, neatklājot to klientam.

Galvenā Server Actions priekšrocība ir tā, ka tās ļauj rakstīt servera puses kodu jūsu React komponentos, novēršot nepieciešamību pēc atsevišķiem API maršrutiem un sarežģītas klienta puses datu ielādes loģikas. Šī lietotāja saskarnes un servera puses loģikas apvienošana vienuviet noved pie vieglāk uzturama un efektīvāka koda.

React Server Actions izmantošanas priekšrocības

React Server Actions izmantošana sniedz vairākas būtiskas priekšrocības:

Vienkāršota izstrāde

Server Actions samazina šablona koda daudzumu, ļaujot apstrādāt veidlapu iesniegšanu un datu mutācijas tieši jūsu React komponentos. Tas novērš nepieciešamību pēc atsevišķiem API galapunktiem un sarežģītas klienta puses datu ielādes loģikas, racionalizējot izstrādes procesu un padarot jūsu kodu vieglāk saprotamu un uzturamu. Apsveriet vienkāršu kontaktu veidlapu. Bez Server Actions jums būtu nepieciešams atsevišķs API maršruts, lai apstrādātu veidlapas iesniegšanu, klienta puses JavaScript, lai nosūtītu datus, un kļūdu apstrādes loģika gan klientā, gan serverī. Ar Server Actions to visu var apstrādāt pašā komponentā.

Uzlabota drošība

Izpildot kodu serverī, Server Actions samazina jūsu lietojumprogrammas uzbrukuma virsmu. Sensitīvi dati un biznesa loģika tiek turēti prom no klienta, neļaujot ļaundabīgiem lietotājiem tos mainīt. Piemēram, datubāzes akreditācijas dati vai API atslēgas nekad netiek atklātas klienta puses kodā. Visas datubāzes mijiedarbības notiek serverī, mazinot SQL injekciju vai nesankcionētas datu piekļuves risku.

Uzlabota veiktspēja

Server Actions var uzlabot veiktspēju, samazinot JavaScript daudzumu, kas jālejupielādē un jāizpilda klientā. Tas ir īpaši izdevīgi lietotājiem ar mazjaudīgām ierīcēm vai lēnu interneta savienojumu. Datu apstrāde notiek serverī, un klientam tiek nosūtīti tikai nepieciešamie lietotāja saskarnes atjauninājumi, tādējādi nodrošinot ātrāku lapu ielādi un plūstošāku lietotāja pieredzi.

Optimistiskie atjauninājumi

Server Actions nevainojami integrējas ar React Suspense un Transitions, nodrošinot optimistiskus atjauninājumus. Optimistiskie atjauninājumi ļauj nekavējoties atjaunināt lietotāja saskarni, pat pirms serveris ir apstiprinājis darbību. Tas nodrošina atsaucīgāku un saistošāku lietotāja pieredzi, jo lietotājiem nav jāgaida servera atbilde, pirms viņi redz savu darbību rezultātus. E-komercijā preces pievienošanu iepirkumu grozam var parādīt nekavējoties, kamēr serveris fonā apstiprina pievienošanu.

Progresīvā uzlabošana

Server Actions atbalsta progresīvo uzlabošanu, kas nozīmē, ka jūsu lietojumprogramma joprojām var darboties, pat ja JavaScript ir atspējots vai neizdodas ielādēt. Kad JavaScript ir atspējots, veidlapas tiks iesniegtas kā tradicionālas HTML veidlapas, un serveris apstrādās iesniegšanu un novirzīs lietotāju uz jaunu lapu. Tas nodrošina, ka jūsu lietojumprogramma paliek pieejama visiem lietotājiem neatkarīgi no viņu pārlūkprogrammas konfigurācijas vai tīkla apstākļiem. Tas ir īpaši svarīgi pieejamībai un SEO.

Kā izmantot React Server Actions

Lai izmantotu React Server Actions, jums būs nepieciešams ietvars, kas tos atbalsta, piemēram, Next.js. Šeit ir soli pa solim ceļvedis:

1. Definējiet Server Action

Izveidojiet asinhronu funkciju, kas darbosies serverī. Šai funkcijai ir jāapstrādā loģika, kuru vēlaties izpildīt serverī, piemēram, datubāzes atjaunināšana vai API izsaukšana. Atzīmējiet funkciju ar direktīvu \"use server\" augšpusē, lai norādītu, ka tā ir Server Action. Šī direktīva norāda React kompilatoram, ka funkcija jāuzskata par servera puses funkciju un automātiski jāapstrādā datu serializācija un deserializācija starp klientu un serveri.

// 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('/'); // Notīrīt maršruta kešatmiņu
    return { message: 'Ziņojums veiksmīgi saglabāts!' };
  } catch (e) {
    return { message: 'Neizdevās saglabāt ziņojumu' };
  }
}

Paskaidrojums:

• `'use server'` direktīva atzīmē šo funkciju kā Server Action.
• `revalidatePath('/')` notīra maršruta kešatmiņu, nodrošinot, ka atjauninātie dati tiek ielādēti nākamajā pieprasījumā. Tas ir būtiski datu konsekvences uzturēšanai.
• `saveMessage(message)` ir aizstājējs jūsu faktiskajai datubāzes mijiedarbības loģikai. Tas pieņem, ka jums ir `saveMessage` funkcija, kas definēta citur, lai apstrādātu ziņojuma saglabāšanu jūsu datubāzē.
• Funkcija atgriež stāvokļa objektu, ko var izmantot, lai parādītu atgriezenisko saiti lietotājam.

2. Importējiet un izmantojiet Server Action savā komponentā

Importējiet Server Action savā React komponentā un izmantojiet to kā `action` rekvizītu (prop) veidlapas elementā. `useFormState` āķi (hook) var izmantot, lai pārvaldītu veidlapas stāvokli un parādītu atgriezenisko saiti lietotājam.

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

      Ziņojums:
      
      Iesniegt
      {state?.message && 
{state.message}
}
    
  );
}

Paskaidrojums:

• `'use client'` direktīva norāda, ka šis ir klienta komponents (jo tas izmanto `useFormState`).
• `useFormState(createMessage, {message: ''})` inicializē veidlapas stāvokli ar `createMessage` Server Action. Otrais arguments ir sākotnējais stāvoklis.
• `form` elementa `action` rekvizīts (prop) ir iestatīts uz `formAction`, ko atgriež `useFormState`.
• `state` mainīgais satur atgriezto vērtību no Server Action, ko var izmantot, lai parādītu atgriezenisko saiti lietotājam.

3. Apstrādājiet veidlapas datus

Server Action iekšpusē jūs varat piekļūt veidlapas datiem, izmantojot `FormData` API. Šis API nodrošina ērtu veidu, kā piekļūt veidlapas lauku vērtībām.

'use server'

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

  // ...
}

4. Apstrādājiet kļūdas

Izmantojiet `try...catch` blokus, lai apstrādātu kļūdas, kas var rasties Server Action izpildes laikā. Atgrieziet kļūdas ziņojumu stāvokļa objektā, lai to parādītu lietotājam.

'use server'

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

  try {
    // ...
  } catch (e) {
    return { message: 'Neizdevās saglabāt ziņojumu' };
  }
}

5. Atkārtoti validējiet datus

Pēc tam, kad Server Action ir veiksmīgi mainījusi datus, jums var būt nepieciešams atkārtoti validēt datu kešatmiņu, lai nodrošinātu, ka lietotāja saskarne atspoguļo jaunākās izmaiņas. Izmantojiet `revalidatePath` vai `revalidateTag` funkcijas no `next/cache`, lai atkārtoti validētu konkrētus ceļus vai tagus.

'use server'

import { revalidatePath } from 'next/cache';

export async function createMessage(prevState, formData) {
  // ...
  revalidatePath('/'); // Notīrīt maršruta kešatmiņu
  // ...
}

Padziļināta lietošana

Datu mainīšana

Server Actions ir īpaši piemērotas datu mainīšanai, piemēram, datubāzu vai ārējo API atjaunināšanai. Jūs varat izmantot Server Actions, lai apstrādātu sarežģītas datu mutācijas, kas prasa servera puses loģiku, piemēram, datu validāciju, aprēķinu veikšanu vai mijiedarbību ar vairākiem datu avotiem. Apsveriet scenāriju, kurā jums ir jāatjaunina lietotāja profils un jānosūta apstiprinājuma e-pasts. Server Action var apstrādāt gan datubāzes atjaunināšanu, gan e-pasta sūtīšanas procesu vienā, atomārā operācijā.

Autentifikācija un autorizācija

Server Actions var izmantot, lai apstrādātu autentifikāciju un autorizāciju. Veicot autentifikācijas un autorizācijas pārbaudes serverī, jūs varat nodrošināt, ka tikai autorizētiem lietotājiem ir piekļuve sensitīviem datiem un funkcionalitātei. Jūs varat izmantot Server Actions, lai apstrādātu lietotāju pieteikšanos, reģistrāciju un paroles atiestatīšanu. Piemēram, Server Action var pārbaudīt lietotāja akreditācijas datus pret datubāzi un atgriezt žetonu (token), ko var izmantot, lai autentificētu turpmākos pieprasījumus.

Edge funkcijas

Server Actions var izvietot kā Edge funkcijas, kas darbojas globālā serveru tīklā tuvu jūsu lietotājiem. Tas var ievērojami samazināt latentumu un uzlabot veiktspēju, īpaši lietotājiem, kas atrodas ģeogrāfiski izkliedētās vietās. Edge funkcijas ir ideāli piemērotas Server Actions apstrādei, kam nepieciešams zems latentums, piemēram, reāllaika datu atjauninājumiem vai personalizēta satura piegādei. Next.js nodrošina iebūvētu atbalstu Server Actions izvietošanai kā Edge funkcijas.

Straumēšana (Streaming)

Server Actions atbalsta straumēšanu (streaming), kas ļauj nosūtīt datus klientam pa daļām, tiklīdz tie kļūst pieejami. Tas var uzlabot jūsu lietojumprogrammas uztverto veiktspēju, īpaši Server Actions gadījumā, kuru izpilde prasa ilgu laiku. Straumēšana ir īpaši noderīga, strādājot ar lielām datu kopām vai sarežģītiem aprēķiniem. Piemēram, jūs varat straumēt meklēšanas rezultātus klientam, tiklīdz tie tiek iegūti no datubāzes, nodrošinot atsaucīgāku lietotāja pieredzi.

Labākās prakses

Šeit ir dažas labākās prakses, kas jāievēro, izmantojot React Server Actions:

• Uzturiet Server Actions mazas un fokusētas: Katrai Server Action jāveic viens, labi definēts uzdevums. Tas padara jūsu kodu vieglāk saprotamu, testējamu un uzturamu.
• Izmantojiet aprakstošus nosaukumus: Izvēlieties nosaukumus, kas skaidri norāda Server Action mērķi. Piemēram, `createComment` vai `updateUserProfile` ir labāki par vispārīgiem nosaukumiem, piemēram, `processData`.
• Validējiet datus serverī: Vienmēr validējiet datus serverī, lai novērstu, ka ļaundabīgi lietotāji ievada nederīgus datus jūsu lietojumprogrammā. Tas ietver datu tipu, formātu un diapazonu validāciju.
• Apstrādājiet kļūdas saudzīgi: Izmantojiet `try...catch` blokus, lai apstrādātu kļūdas un sniegtu informatīvus kļūdu ziņojumus lietotājam. Izvairieties no sensitīvas kļūdu informācijas atklāšanas klientam.
• Izmantojiet optimistiskus atjauninājumus: Nodrošiniet atsaucīgāku lietotāja pieredzi, nekavējoties atjauninot lietotāja saskarni, pat pirms serveris ir apstiprinājis darbību.
• Atkārtoti validējiet datus pēc nepieciešamības: Pārliecinieties, ka lietotāja saskarne atspoguļo jaunākās izmaiņas, atkārtoti validējot datu kešatmiņu pēc tam, kad Server Action ir mainījusi datus.

Reālās dzīves piemēri

Apskatīsim dažus reālās dzīves piemērus, kā React Server Actions var izmantot dažāda veida lietojumprogrammās:

E-komercijas lietojumprogramma

• Preces pievienošana iepirkumu grozam: Server Action var apstrādāt preces pievienošanu lietotāja iepirkumu grozam un atjaunināt groza kopsummu datubāzē. Optimistiskus atjauninājumus var izmantot, lai nekavējoties parādītu preci grozā.
• Maksājuma apstrāde: Server Action var apstrādāt maksājumu, izmantojot trešās puses maksājumu vārteju. Server Action var arī atjaunināt pasūtījuma statusu datubāzē un nosūtīt apstiprinājuma e-pastu lietotājam.
• Produkta atsauksmes iesniegšana: Server Action var apstrādāt produkta atsauksmes iesniegšanu un saglabāšanu datubāzē. Server Action var arī aprēķināt produkta vidējo vērtējumu un atjaunināt produkta detaļu lapu.

Sociālo mediju lietojumprogramma

• Jauna tvīta publicēšana: Server Action var apstrādāt jauna tvīta publicēšanu un saglabāšanu datubāzē. Server Action var arī atjaunināt lietotāja laika joslu un paziņot viņa sekotājiem.
• Ieraksta "patīk" atzīmēšana: Server Action var apstrādāt ieraksta "patīk" atzīmēšanu un atjaunināt "patīk" skaitu datubāzē. Optimistiskus atjauninājumus var izmantot, lai nekavējoties parādītu atjaunināto "patīk" skaitu.
• Sekošana lietotājam: Server Action var apstrādāt sekošanu lietotājam un atjaunināt sekotāju un sekoto skaitu datubāzē.

Satura pārvaldības sistēma (CMS)

• Jauna bloga ieraksta izveide: Server Action var apstrādāt jauna bloga ieraksta izveidi un saglabāšanu datubāzē. Server Action var arī ģenerēt saites aizstājvārdu (slug) ierakstam un atjaunināt vietnes karti (sitemap).
• Lapas atjaunināšana: Server Action var apstrādāt lapas atjaunināšanu un saglabāšanu datubāzē. Server Action var arī atkārtoti validēt lapas kešatmiņu, lai nodrošinātu, ka lietotājiem tiek parādīts atjauninātais saturs.
• Izmaiņu publicēšana: Server Action var apstrādāt izmaiņu publicēšanu datubāzē un paziņot visiem abonentiem.

Internacionalizācijas apsvērumi

Izstrādājot lietojumprogrammas globālai auditorijai, ir svarīgi ņemt vērā internacionalizāciju (i18n) un lokalizāciju (l10n). Šeit ir daži apsvērumi, izmantojot React Server Actions internacionalizētās lietojumprogrammās:

• Dažādu datuma un laika formātu apstrāde: Izmantojiet `Intl` API, lai formatētu datumus un laikus atbilstoši lietotāja lokalizācijai.
• Dažādu skaitļu formātu apstrāde: Izmantojiet `Intl` API, lai formatētu skaitļus atbilstoši lietotāja lokalizācijai.
• Dažādu valūtu apstrāde: Izmantojiet `Intl` API, lai formatētu valūtas atbilstoši lietotāja lokalizācijai.
• Kļūdu ziņojumu tulkošana: Tulkojiet kļūdu ziņojumus lietotāja valodā.
• Atbalsts valodām, kuras raksta no labās uz kreiso (RTL): Pārliecinieties, ka jūsu lietojumprogramma atbalsta RTL valodas, piemēram, arābu un ivritu.

Piemēram, apstrādājot veidlapu, kurā nepieciešams ievadīt datumu, Server Action var izmantot `Intl.DateTimeFormat` API, lai parsētu datumu atbilstoši lietotāja lokalizācijai, nodrošinot, ka datums tiek pareizi interpretēts neatkarīgi no lietotāja reģionālajiem iestatījumiem.

Noslēgums

React Server Actions ir jaudīgs rīks servera puses veidlapu apstrādes un datu mutāciju vienkāršošanai React lietojumprogrammās. Ļaujot rakstīt servera puses kodu tieši jūsu React komponentos, Server Actions samazina šablona kodu, uzlabo drošību, veiktspēju un nodrošina optimistiskus atjauninājumus. Ievērojot šajā ceļvedī izklāstītās labākās prakses, jūs varat izmantot Server Actions, lai veidotu stabilākas, mērogojamākas un vieglāk uzturamas React lietojumprogrammas. Tā kā React turpina attīstīties, Server Actions neapšaubāmi spēlēs arvien nozīmīgāku lomu tīmekļa izstrādes nākotnē.