M

MLOG

Slovenčina

Preskúmajte React Server Actions, výkonnú funkciu na spracovanie formulárov a dátových mutácií priamo na serveri, ktorá zjednodušuje vývoj v Reacte a zvyšuje bezpečnosť.

React Server Actions: Zjednodušené spracovanie formulárov na strane servera

React Server Actions, predstavené v React 18 a výrazne vylepšené v Next.js, ponúkajú revolučný prístup k spracovaniu odosielaných formulárov a dátových mutácií priamo na serveri. Táto výkonná funkcia zjednodušuje proces vývoja, zvyšuje bezpečnosť a zlepšuje výkon v porovnaní s tradičným získavaním a manipuláciou dát na strane klienta.

Čo sú React Server Actions?

Server Actions sú asynchrónne funkcie, ktoré bežia na serveri a môžu byť volané priamo z React komponentov. Umožňujú vám vykonávať úlohy na strane servera, ako napríklad:

Kľúčovou výhodou Server Actions je, že vám umožňujú písať kód na strane servera priamo vo vašich React komponentoch, čím eliminujú potrebu samostatných API ciest a zložitej logiky na získavanie dát na strane klienta. Toto umiestnenie UI a logiky na strane servera vedľa seba vedie k udržateľnejšej a efektívnejšej kódovej základni.

Výhody používania React Server Actions

Používanie React Server Actions poskytuje niekoľko významných výhod:

Zjednodušený vývoj

Server Actions redukujú množstvo stereotypného kódu (boilerplate) tým, že umožňujú spracovávať odoslané formuláre a dátové mutácie priamo vo vašich React komponentoch. Tým sa eliminuje potreba samostatných API koncových bodov a zložitej logiky na získavanie dát na strane klienta, čo zefektívňuje proces vývoja a robí váš kód ľahšie zrozumiteľným a udržiavateľným. Zoberme si jednoduchý kontaktný formulár. Bez Server Actions by ste potrebovali samostatnú API cestu na spracovanie odoslaného formulára, JavaScript na strane klienta na odoslanie dát a logiku na spracovanie chýb na strane klienta aj servera. S Server Actions sa toto všetko dá zvládnuť priamo v samotnom komponente.

Zvýšená bezpečnosť

Spúšťaním kódu na serveri Server Actions znižujú plochu možných útokov na vašu aplikáciu. Citlivé dáta a biznis logika sú držané mimo klienta, čo zabraňuje škodlivým používateľom v ich manipulácii. Napríklad, prihlasovacie údaje k databáze alebo API kľúče nie sú nikdy odhalené v kóde na strane klienta. Všetky interakcie s databázou prebiehajú na serveri, čím sa znižuje riziko SQL injection alebo neoprávneného prístupu k dátam.

Zlepšený výkon

Server Actions môžu zlepšiť výkon znížením množstva JavaScriptu, ktorý je potrebné stiahnuť a spustiť na strane klienta. To je obzvlášť výhodné pre používateľov na zariadeniach s nižším výkonom alebo s pomalým internetovým pripojením. Spracovanie dát prebieha na serveri a klientovi sa posielajú iba nevyhnutné aktualizácie UI, čo vedie k rýchlejšiemu načítaniu stránok a plynulejšiemu používateľskému zážitku.

Optimistické aktualizácie

Server Actions sa bezproblémovo integrujú s React Suspense a Transitions, čo umožňuje optimistické aktualizácie. Optimistické aktualizácie vám umožňujú okamžite aktualizovať UI, ešte predtým, ako server potvrdí akciu. To poskytuje responzívnejší a pútavejší používateľský zážitok, pretože používatelia nemusia čakať na odpoveď servera, aby videli výsledky svojich akcií. V e-commerce môže byť pridanie položky do nákupného košíka zobrazené okamžite, zatiaľ čo server na pozadí potvrdzuje pridanie.

Progresívne vylepšenie

Server Actions podporujú progresívne vylepšenie (progressive enhancement), čo znamená, že vaša aplikácia môže fungovať aj v prípade, že je JavaScript vypnutý alebo sa nenačíta. Keď je JavaScript vypnutý, formuláre sa odošlú ako tradičné HTML formuláre a server spracuje odoslanie a presmeruje používateľa na novú stránku. Tým sa zabezpečí, že vaša aplikácia zostane prístupná pre všetkých používateľov, bez ohľadu na konfiguráciu ich prehliadača alebo sieťové podmienky. Toto je obzvlášť dôležité pre prístupnosť a SEO.

Ako používať React Server Actions

Ak chcete používať React Server Actions, musíte používať framework, ktorý ich podporuje, napríklad Next.js. Tu je postup krok za krokom:

1. Definujte Server Action

Vytvorte asynchrónnu funkciu, ktorá sa spustí na serveri. Táto funkcia by mala obsahovať logiku, ktorú chcete vykonať na serveri, napríklad aktualizáciu databázy alebo volanie API. Označte funkciu direktívou `"use server"` na začiatku, aby ste naznačili, že ide o Server Action. Táto direktíva hovorí kompilátoru Reactu, aby zaobchádzal s funkciou ako s funkciou na strane servera a aby automaticky spracoval serializáciu a deserializáciu dát medzi klientom a serverom.

// 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('/'); // Vymaže cache pre cestu
    return { message: 'Správa úspešne uložená!' };
  } catch (e) {
    return { message: 'Nepodarilo sa uložiť správu' };
  }
}

Vysvetlenie:

2. Importujte a použite Server Action vo vašom komponente

Importujte Server Action do vášho React komponentu a použite ju ako `action` prop na elemente formulára. Hook `useFormState` možno použiť na správu stavu formulára a zobrazenie spätnej väzby používateľovi.

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

  );
}

Vysvetlenie:

3. Spracovanie dát z formulára

Vo vnútri Server Action môžete pristupovať k dátam z formulára pomocou `FormData` API. Toto API poskytuje pohodlný spôsob prístupu k hodnotám polí formulára.

'use server'

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

  // ...
}

4. Spracovanie chýb

Použite bloky `try...catch` na spracovanie chýb, ktoré môžu nastať počas vykonávania Server Action. Vráťte chybovú správu v stavovom objekte, aby sa zobrazila používateľovi.

'use server'

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

  try {
    // ...
  } catch (e) {
    return { message: 'Nepodarilo sa uložiť správu' };
  }
}

5. Revalidácia dát

Po úspešnej mutácii dát pomocou Server Action môže byť potrebné revalidovať dátovú cache, aby sa zabezpečilo, že UI odráža najnovšie zmeny. Použite funkcie `revalidatePath` alebo `revalidateTag` z `next/cache` na revalidáciu špecifických ciest alebo značiek.

'use server'

import { revalidatePath } from 'next/cache';

export async function createMessage(prevState, formData) {
  // ...
  revalidatePath('/'); // Vymaže cache pre cestu
  // ...
}

Pokročilé použitie

Mutácia dát

Server Actions sú obzvlášť vhodné na mutáciu dát, ako je aktualizácia databáz alebo externých API. Môžete použiť Server Actions na spracovanie zložitých dátových mutácií, ktoré vyžadujú logiku na strane servera, ako je validácia dát, vykonávanie výpočtov alebo interakcia s viacerými zdrojmi dát. Zoberme si scenár, kde potrebujete aktualizovať profil používateľa a poslať potvrdzovací e-mail. Server Action dokáže zvládnuť aktualizáciu databázy aj proces odoslania e-mailu v jedinej atomickej operácii.

Autentifikácia a autorizácia

Server Actions môžu byť použité na spracovanie autentifikácie a autorizácie. Vykonávaním kontrol autentifikácie a autorizácie na serveri môžete zabezpečiť, že prístup k citlivým dátam a funkcionalite majú iba oprávnení používatelia. Môžete použiť Server Actions na spracovanie prihlasovania používateľov, registrácie a resetovania hesla. Napríklad Server Action môže overiť prihlasovacie údaje používateľa v databáze a vrátiť token, ktorý sa dá použiť na autentifikáciu nasledujúcich požiadaviek.

Edge funkcie

Server Actions môžu byť nasadené ako Edge funkcie, ktoré bežia na globálnej sieti serverov blízko vašich používateľov. To môže výrazne znížiť latenciu a zlepšiť výkon, najmä pre používateľov v geograficky rozptýlených lokalitách. Edge funkcie sú ideálne na spracovanie Server Actions, ktoré vyžadujú nízku latenciu, ako sú aktualizácie dát v reálnom čase alebo doručovanie personalizovaného obsahu. Next.js poskytuje vstavanú podporu pre nasadenie Server Actions ako Edge funkcií.

Streaming

Server Actions podporujú streaming, ktorý vám umožňuje posielať dáta klientovi po častiach, ako sú dostupné. To môže zlepšiť vnímaný výkon vašej aplikácie, najmä pre Server Actions, ktorých vykonanie trvá dlho. Streaming je obzvlášť užitočný na spracovanie veľkých dátových súborov alebo zložitých výpočtov. Napríklad môžete streamovať výsledky vyhľadávania klientovi, ako sú získavané z databázy, čím poskytnete responzívnejší používateľský zážitok.

Najlepšie postupy

Tu sú niektoré najlepšie postupy, ktoré treba dodržiavať pri používaní React Server Actions:

Príklady z reálneho sveta

Pozrime sa na niekoľko príkladov z reálneho sveta, ako môžu byť React Server Actions použité v rôznych typoch aplikácií:

E-commerce aplikácia

Aplikácia sociálnych médií

Systém na správu obsahu (CMS)

Aspekty internacionalizácie

Pri vývoji aplikácií pre globálne publikum je nevyhnutné zvážiť internacionalizáciu (i18n) a lokalizáciu (l10n). Tu sú niektoré aspekty používania React Server Actions v internacionalizovaných aplikáciách:

Napríklad pri spracovaní formulára, ktorý vyžaduje zadanie dátumu, môže Server Action použiť `Intl.DateTimeFormat` API na parsovanie dátumu podľa lokality používateľa, čím sa zabezpečí, že dátum bude správne interpretovaný bez ohľadu na regionálne nastavenia používateľa.

Záver

React Server Actions sú výkonným nástrojom na zjednodušenie spracovania formulárov na strane servera a dátových mutácií v React aplikáciách. Tým, že vám umožňujú písať kód na strane servera priamo vo vašich React komponentoch, Server Actions redukujú stereotypný kód, zvyšujú bezpečnosť, zlepšujú výkon a umožňujú optimistické aktualizácie. Dodržiavaním najlepších postupov uvedených v tejto príručke môžete využiť Server Actions na budovanie robustnejších, škálovateľnejších a udržiavateľnejších React aplikácií. Ako sa React ďalej vyvíja, Server Actions budú nepochybne zohrávať čoraz dôležitejšiu úlohu v budúcnosti webového vývoja.