React Server Actions: Pojednostavljena obrada obrazaca na strani poslužitelja

React Server Actions, predstavljene u Reactu 18 i značajno poboljšane u Next.js-u, nude revolucionaran pristup rukovanju podacima obrazaca i mutacijama podataka izravno na poslužitelju. Ova moćna značajka pojednostavljuje proces razvoja, povećava sigurnost i poboljšava performanse u usporedbi s tradicionalnim dohvaćanjem i manipulacijom podataka na strani klijenta.

Što su React Server Actions?

Server Actions su asinkrone funkcije koje se izvršavaju na poslužitelju i mogu se pozvati izravno iz React komponenata. Omogućuju vam obavljanje zadataka na strani poslužitelja, kao što su:

• Podnošenje obrazaca: Sigurna obrada podataka s obrasca na poslužitelju.
• Mutacije podataka: Ažuriranje baza podataka ili vanjskih API-ja.
• Autentifikacija: Rukovanje prijavama i registracijom korisnika.
• Logika na strani poslužitelja: Izvršavanje složene poslovne logike bez izlaganja klijentu.

Ključna prednost Server Actions je u tome što vam omogućuju pisanje koda na strani poslužitelja unutar vaših React komponenata, eliminirajući potrebu za odvojenim API rutama i složenom logikom dohvaćanja podataka na strani klijenta. Ovo su-lociranje korisničkog sučelja i logike na strani poslužitelja dovodi do održivije i učinkovitije baze koda.

Prednosti korištenja React Server Actions

Korištenje React Server Actions pruža nekoliko značajnih prednosti:

Pojednostavljeni razvoj

Server Actions smanjuju količinu ponavljajućeg koda (boilerplate) omogućujući vam rukovanje podacima obrazaca i mutacijama podataka izravno unutar vaših React komponenata. To eliminira potrebu za odvojenim API krajnjim točkama i složenom logikom dohvaćanja podataka na strani klijenta, pojednostavljujući proces razvoja i čineći vaš kod lakšim za razumijevanje i održavanje. Uzmimo za primjer jednostavan kontaktni obrazac. Bez Server Actions, trebali biste odvojenu API rutu za obradu obrasca, JavaScript na strani klijenta za slanje podataka i logiku za rukovanje pogreškama i na klijentu i na poslužitelju. Sa Server Actions, sve se to može riješiti unutar same komponente.

Poboljšana sigurnost

Izvršavanjem koda na poslužitelju, Server Actions smanjuju površinu napada vaše aplikacije. Osjetljivi podaci i poslovna logika čuvaju se podalje od klijenta, sprječavajući zlonamjerne korisnike da ih mijenjaju. Na primjer, vjerodajnice za bazu podataka ili API ključevi nikada se ne izlažu u kodu na strani klijenta. Sve interakcije s bazom podataka odvijaju se na poslužitelju, čime se smanjuje rizik od SQL injekcije ili neovlaštenog pristupa podacima.

Poboljšane performanse

Server Actions mogu poboljšati performanse smanjenjem količine JavaScripta koji se treba preuzeti i izvršiti na klijentu. To je posebno korisno za korisnike na uređajima slabijih performansi ili s sporom internetskom vezom. Obrada podataka događa se na poslužitelju, a klijentu se šalju samo potrebna ažuriranja korisničkog sučelja, što rezultira bržim učitavanjem stranica i fluidnijim korisničkim iskustvom.

Optimistična ažuriranja

Server Actions se besprijekorno integriraju s Reactovim Suspense i Transitions, omogućujući optimistična ažuriranja. Optimistična ažuriranja omogućuju vam da odmah ažurirate korisničko sučelje, čak i prije nego što je poslužitelj potvrdio radnju. To pruža responzivnije i privlačnije korisničko iskustvo, jer korisnici ne moraju čekati odgovor poslužitelja da bi vidjeli rezultate svojih akcija. U e-trgovini, dodavanje artikla u košaricu može se odmah prikazati dok poslužitelj u pozadini potvrđuje dodavanje.

Progresivno poboljšanje

Server Actions podržavaju progresivno poboljšanje (progressive enhancement), što znači da vaša aplikacija može funkcionirati čak i ako je JavaScript onemogućen ili se ne uspije učitati. Kada je JavaScript onemogućen, obrasci će se slati kao tradicionalni HTML obrasci, a poslužitelj će obraditi podnošenje i preusmjeriti korisnika na novu stranicu. To osigurava da vaša aplikacija ostaje dostupna svim korisnicima, bez obzira na konfiguraciju njihovog preglednika ili mrežne uvjete. To je posebno važno za pristupačnost i SEO.

Kako koristiti React Server Actions

Da biste koristili React Server Actions, trebate koristiti framework koji ih podržava, kao što je Next.js. Slijedi vodič korak po korak:

1. Definirajte Server Action

Stvorite asinkronu funkciju koja će se izvršavati na poslužitelju. Ova funkcija treba rukovati logikom koju želite izvršiti na poslužitelju, kao što je ažuriranje baze podataka ili pozivanje API-ja. Označite funkciju direktivom "use server" na vrhu kako biste naznačili da je to Server Action. Ova direktiva govori React kompajleru da tretira funkciju kao funkciju na strani poslužitelja i da automatski rukuje serijalizacijom i deserijalizacijom podataka između klijenta i poslužitelja.

// 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('/'); // Očisti predmemoriju rute
    return { message: 'Poruka uspješno spremljena!' };
  } catch (e) {
    return { message: 'Spremanje poruke nije uspjelo' };
  }
}

Objašnjenje:

• Direktiva `'use server'` označava ovu funkciju kao Server Action.
• `revalidatePath('/')` čisti predmemoriju rute, osiguravajući da se ažurirani podaci dohvate pri sljedećem zahtjevu. To je ključno za održavanje konzistentnosti podataka.
• `saveMessage(message)` je rezervirano mjesto za vašu stvarnu logiku interakcije s bazom podataka. Pretpostavlja se da imate `saveMessage` funkciju definiranu negdje drugdje za spremanje poruke u vašu bazu podataka.
• Funkcija vraća objekt stanja koji se može koristiti za prikaz povratnih informacija korisniku.

2. Uvezite i koristite Server Action u svojoj komponenti

Uvezite Server Action u svoju React komponentu i koristite je kao `action` svojstvo na elementu obrasca. `useFormState` hook može se koristiti za upravljanje stanjem obrasca i prikaz povratnih informacija korisniku.

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

      Poruka:
      
      Pošalji
      {state?.message && 
{state.message}
}
    
  );
}

Objašnjenje:

• Direktiva `'use client'` specificira da je ovo klijentska komponenta (jer koristi `useFormState`).
• `useFormState(createMessage, {message: ''})` inicijalizira stanje obrasca s `createMessage` Server Action. Drugi argument je početno stanje.
• Svojstvo `action` elementa `form` postavljeno je na `formAction` koji vraća `useFormState`.
• Varijabla `state` sadrži povratnu vrijednost iz Server Action, koja se može koristiti za prikaz povratnih informacija korisniku.

3. Rukovanje podacima obrasca

Unutar Server Action, možete pristupiti podacima obrasca pomoću `FormData` API-ja. Ovaj API pruža praktičan način za pristup vrijednostima polja obrasca.

'use server'

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

  // ...
}

4. Rukovanje pogreškama

Koristite `try...catch` blokove za rukovanje pogreškama koje se mogu pojaviti tijekom izvršavanja Server Action. Vratite poruku o pogrešci u objektu stanja kako biste je prikazali korisniku.

'use server'

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

  try {
    // ...
  } catch (e) {
    return { message: 'Spremanje poruke nije uspjelo' };
  }
}

5. Ponovno validiranje podataka

Nakon što je Server Action uspješno mutirao podatke, možda ćete trebati ponovno validirati predmemoriju podataka kako biste osigurali da korisničko sučelje odražava najnovije promjene. Koristite funkcije `revalidatePath` ili `revalidateTag` iz `next/cache` za ponovno validiranje određenih staza ili oznaka.

'use server'

import { revalidatePath } from 'next/cache';

export async function createMessage(prevState, formData) {
  // ...
  revalidatePath('/'); // Očisti predmemoriju rute
  // ...
}

Napredna upotreba

Mutiranje podataka

Server Actions su posebno pogodne za mutiranje podataka, kao što je ažuriranje baza podataka ili vanjskih API-ja. Možete koristiti Server Actions za rukovanje složenim mutacijama podataka koje zahtijevaju logiku na strani poslužitelja, kao što je validacija podataka, izvođenje izračuna ili interakcija s više izvora podataka. Razmotrite scenarij u kojem trebate ažurirati korisnički profil i poslati potvrdni e-mail. Server Action može obraditi i ažuriranje baze podataka i proces slanja e-pošte u jednoj, atomskoj operaciji.

Autentifikacija i autorizacija

Server Actions se mogu koristiti za rukovanje autentifikacijom i autorizacijom. Obavljanjem provjera autentifikacije i autorizacije na poslužitelju, možete osigurati da samo ovlašteni korisnici imaju pristup osjetljivim podacima i funkcionalnostima. Možete koristiti Server Actions za rukovanje prijavama korisnika, registracijom i poništavanjem lozinke. Na primjer, Server Action može provjeriti korisničke vjerodajnice u bazi podataka i vratiti token koji se može koristiti za autentifikaciju kasnijih zahtjeva.

Rubne funkcije (Edge Functions)

Server Actions se mogu postaviti kao rubne funkcije (Edge Functions), koje se izvršavaju na globalnoj mreži poslužitelja blizu vaših korisnika. To može značajno smanjiti latenciju i poboljšati performanse, posebno za korisnike na geografski raspršenim lokacijama. Rubne funkcije su idealne za rukovanje Server Actions koje zahtijevaju nisku latenciju, kao što su ažuriranja podataka u stvarnom vremenu ili isporuka personaliziranog sadržaja. Next.js pruža ugrađenu podršku za postavljanje Server Actions kao rubnih funkcija.

Strujanje (Streaming)

Server Actions podržavaju strujanje (streaming), što vam omogućuje slanje podataka klijentu u dijelovima kako postaju dostupni. To može poboljšati percipirane performanse vaše aplikacije, posebno za Server Actions kojima je potrebno dugo vrijeme za izvršavanje. Strujanje je posebno korisno za rukovanje velikim skupovima podataka ili složenim izračunima. Na primjer, možete strujati rezultate pretraživanja klijentu kako se dohvaćaju iz baze podataka, pružajući responzivnije korisničko iskustvo.

Najbolje prakse

Ovo su neke od najboljih praksi koje treba slijediti pri korištenju React Server Actions:

• Neka Server Actions budu male i fokusirane: Svaka Server Action treba obavljati jedan, dobro definiran zadatak. To čini vaš kod lakšim za razumijevanje, testiranje i održavanje.
• Koristite opisna imena: Odaberite imena koja jasno ukazuju na svrhu Server Action. Na primjer, `createComment` ili `updateUserProfile` su bolji od generičkih imena poput `processData`.
• Validirajte podatke na poslužitelju: Uvijek validirajte podatke na poslužitelju kako biste spriječili zlonamjerne korisnike da unose nevažeće podatke u vašu aplikaciju. To uključuje validaciju tipova podataka, formata i raspona.
• Elegantno rukujte pogreškama: Koristite `try...catch` blokove za rukovanje pogreškama i pružite informativne poruke o pogreškama korisniku. Izbjegavajte izlaganje osjetljivih informacija o pogreškama klijentu.
• Koristite optimistična ažuriranja: Pružite responzivnije korisničko iskustvo trenutnim ažuriranjem korisničkog sučelja, čak i prije nego što je poslužitelj potvrdio radnju.
• Ponovno validirajte podatke po potrebi: Osigurajte da korisničko sučelje odražava najnovije promjene ponovnim validiranjem predmemorije podataka nakon što je Server Action mutirao podatke.

Primjeri iz stvarnog svijeta

Pogledajmo neke primjere iz stvarnog svijeta o tome kako se React Server Actions mogu koristiti u različitim vrstama aplikacija:

Aplikacija za e-trgovinu

• Dodavanje artikla u košaricu: Server Action može obraditi dodavanje artikla u korisnikovu košaricu i ažurirati ukupan iznos u bazi podataka. Optimistična ažuriranja mogu se koristiti za trenutni prikaz artikla u košarici.
• Obrada plaćanja: Server Action može obraditi plaćanje putem treće strane (payment gateway). Server Action također može ažurirati status narudžbe u bazi podataka i poslati potvrdni e-mail korisniku.
• Slanje recenzije proizvoda: Server Action može obraditi slanje recenzije proizvoda i spremiti je u bazu podataka. Server Action također može izračunati prosječnu ocjenu za proizvod i ažurirati stranicu s detaljima proizvoda.

Aplikacija za društvene mreže

• Objavljivanje novog tvita: Server Action može obraditi objavljivanje novog tvita i spremiti ga u bazu podataka. Server Action također može ažurirati korisnikovu vremensku liniju i obavijestiti njegove pratitelje.
• Lajkanje objave: Server Action može obraditi lajkanje objave i ažurirati broj lajkova u bazi podataka. Optimistična ažuriranja mogu se koristiti za trenutni prikaz ažuriranog broja lajkova.
• Praćenje korisnika: Server Action može obraditi praćenje korisnika i ažurirati broj pratitelja i praćenih u bazi podataka.

Sustav za upravljanje sadržajem (CMS)

• Stvaranje novog blog posta: Server Action može obraditi stvaranje novog blog posta i spremiti ga u bazu podataka. Server Action također može generirati slug za post i ažurirati sitemap.
• Ažuriranje stranice: Server Action može obraditi ažuriranje stranice i spremiti promjene u bazu podataka. Server Action također može ponovno validirati predmemoriju stranice kako bi se osiguralo da se ažurirani sadržaj prikazuje korisnicima.
• Objavljivanje promjene: Server Action može obraditi objavljivanje promjene u bazi podataka i obavijestiti sve pretplatnike.

Razmatranja o internacionalizaciji

Pri razvoju aplikacija za globalnu publiku, ključno je uzeti u obzir internacionalizaciju (i18n) i lokalizaciju (l10n). Evo nekoliko razmatranja za korištenje React Server Actions u internacionaliziranim aplikacijama:

• Rukovanje različitim formatima datuma i vremena: Koristite `Intl` API za formatiranje datuma i vremena prema lokalnim postavkama korisnika.
• Rukovanje različitim formatima brojeva: Koristite `Intl` API za formatiranje brojeva prema lokalnim postavkama korisnika.
• Rukovanje različitim valutama: Koristite `Intl` API za formatiranje valuta prema lokalnim postavkama korisnika.
• Prevođenje poruka o pogreškama: Prevedite poruke o pogreškama na jezik korisnika.
• Podrška za jezike koji se pišu s desna na lijevo (RTL): Osigurajte da vaša aplikacija podržava RTL jezike, kao što su arapski i hebrejski.

Na primjer, pri obradi obrasca koji zahtijeva unos datuma, Server Action može koristiti `Intl.DateTimeFormat` API za parsiranje datuma prema lokalnim postavkama korisnika, osiguravajući da se datum ispravno interpretira bez obzira na regionalne postavke korisnika.

Zaključak

React Server Actions su moćan alat za pojednostavljivanje obrade obrazaca na strani poslužitelja i mutacija podataka u React aplikacijama. Omogućavajući vam pisanje koda na strani poslužitelja izravno unutar vaših React komponenata, Server Actions smanjuju količinu ponavljajućeg koda, povećavaju sigurnost, poboljšavaju performanse i omogućuju optimistična ažuriranja. Slijedeći najbolje prakse navedene u ovom vodiču, možete iskoristiti Server Actions za izgradnju robusnijih, skalabilnijih i održivijih React aplikacija. Kako se React nastavlja razvijati, Server Actions će nedvojbeno igrati sve važniju ulogu u budućnosti web razvoja.