M

MLOG

Čeština

Prozkoumejte React Server Actions, výkonnou funkci pro zpracování formulářů a datových mutací přímo na serveru, která zjednodušuje vývoj v Reactu a zvyšuje bezpečnost.

React Server Actions: Zjednodušené zpracování formulářů na straně serveru

React Server Actions, představené v React 18 a výrazně vylepšené v Next.js, nabízejí revoluční přístup ke zpracování odeslaných formulářů a datových mutací přímo na serveru. Tato výkonná funkce zjednodušuje vývojový proces, zvyšuje bezpečnost a zlepšuje výkon ve srovnání s tradičním načítáním a manipulací s daty na straně klienta.

Co jsou React Server Actions?

Server Actions jsou asynchronní funkce, které běží na serveru a mohou být vyvolány přímo z komponent Reactu. Umožňují vám provádět úkoly na straně serveru, jako jsou:

Klíčovou výhodou Server Actions je, že vám umožňují psát kód na straně serveru přímo ve vašich komponentách Reactu, čímž odpadá potřeba samostatných API tras a složité logiky pro načítání dat na straně klienta. Toto spojení UI a serverové logiky na jednom místě vede k lépe udržovatelné a efektivnější kódové základně.

Výhody použití React Server Actions

Použití React Server Actions poskytuje několik významných výhod:

Zjednodušený vývoj

Server Actions redukují opakující se kód (boilerplate) tím, že umožňují zpracovávat odeslané formuláře a datové mutace přímo ve vašich komponentách Reactu. Tím odpadá potřeba samostatných API koncových bodů a složité logiky pro načítání dat na straně klienta, což zefektivňuje vývojový proces a činí váš kód srozumitelnějším a snadněji udržovatelným. Vezměme si jednoduchý kontaktní formulář. Bez Server Actions byste potřebovali samostatnou API trasu pro zpracování formuláře, JavaScript na straně klienta pro odeslání dat a logiku pro zpracování chyb jak na klientovi, tak na serveru. Se Server Actions lze vše toto zařídit přímo v samotné komponentě.

Zvýšená bezpečnost

Spouštěním kódu na serveru Server Actions zmenšují prostor pro útok na vaši aplikaci. Citlivá data a obchodní logika jsou drženy mimo klienta, což zabraňuje škodlivým uživatelům v jejich manipulaci. Například přihlašovací údaje k databázi nebo API klíče nejsou nikdy odhaleny v kódu na straně klienta. Všechny interakce s databází probíhají na serveru, což zmírňuje riziko SQL injection nebo neoprávněného přístupu k datům.

Zlepšený výkon

Server Actions mohou zlepšit výkon snížením množství JavaScriptu, který je třeba stáhnout a spustit na straně klienta. To je obzvláště výhodné pro uživatele na méně výkonných zařízeních nebo s pomalým připojením k internetu. Zpracování dat probíhá na serveru a klientovi jsou zaslány pouze nezbytné aktualizace UI, což vede k rychlejšímu načítání stránek a plynulejšímu uživatelskému zážitku.

Optimistické aktualizace

Server Actions se bezproblémově integrují s React Suspense a Transitions, což umožňuje optimistické aktualizace. Optimistické aktualizace vám umožní okamžitě aktualizovat UI, ještě předtím, než server potvrdí akci. To poskytuje citlivější a poutavější uživatelský zážitek, protože uživatelé nemusí čekat na odpověď serveru, aby viděli výsledky svých akcí. V e-commerce může být přidání položky do nákupního košíku zobrazeno okamžitě, zatímco server na pozadí potvrzuje přidání.

Progresivní vylepšování

Server Actions podporují progresivní vylepšování (progressive enhancement), což znamená, že vaše aplikace může stále fungovat, i když je JavaScript zakázán nebo se nepodaří načíst. Když je JavaScript zakázán, formuláře se odešlou jako tradiční HTML formuláře a server zpracuje odeslání a přesměruje uživatele na novou stránku. Tím je zajištěno, že vaše aplikace zůstane přístupná všem uživatelům, bez ohledu na konfiguraci jejich prohlížeče nebo síťové podmínky. To je zvláště důležité pro přístupnost a SEO.

Jak používat React Server Actions

Abyste mohli používat React Server Actions, musíte používat framework, který je podporuje, jako je například Next.js. Zde je průvodce krok za krokem:

1. Definujte Server Action

Vytvořte asynchronní funkci, která poběží na serveru. Tato funkce by měla obsahovat logiku, kterou chcete na serveru spustit, například aktualizaci databáze nebo volání API. Označte funkci direktivou `"use server"` na začátku, abyste naznačili, že se jedná o Server Action. Tato direktiva říká kompilátoru Reactu, aby s funkcí zacházel jako s funkcí na straně serveru a automaticky se postaral o serializaci a deserializaci dat mezi klientem a serverem.

// 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 pro danou cestu
    return { message: 'Zpráva úspěšně uložena!' };
  } catch (e) {
    return { message: 'Uložení zprávy se nezdařilo' };
  }
}

Vysvětlení:

2. Importujte a použijte Server Action ve vaší komponentě

Importujte Server Action do vaší komponenty Reactu a použijte ji jako `action` prop na prvku formuláře. Hook `useFormState` lze použít ke správě stavu formuláře a zobrazení zpětné vazby uživateli.

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

  );
}

Vysvětlení:

3. Zpracování dat formuláře

Uvnitř Server Action můžete přistupovat k datům formuláře pomocí `FormData` API. Toto API poskytuje pohodlný způsob přístupu k hodnotám polí formuláře.

'use server'

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

  // ...
}

4. Zpracování chyb

Použijte bloky `try...catch` pro zpracování chyb, které mohou nastat během provádění Server Action. Vraťte chybovou zprávu ve stavovém objektu, aby se zobrazila uživateli.

'use server'

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

  try {
    // ...
  } catch (e) {
    return { message: 'Uložení zprávy se nezdařilo' };
  }
}

5. Revalidace dat

Poté, co Server Action úspěšně změnila data, může být nutné revalidovat datovou cache, aby se zajistilo, že UI odráží nejnovější změny. Použijte funkce `revalidatePath` nebo `revalidateTag` z `next/cache` k revalidaci konkrétních cest nebo tagů.

'use server'

import { revalidatePath } from 'next/cache';

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

Pokročilé použití

Mutace dat

Server Actions jsou obzvláště vhodné pro mutaci dat, jako je aktualizace databází nebo externích API. Můžete je použít ke zpracování složitých datových mutací, které vyžadují logiku na straně serveru, jako je validace dat, provádění výpočtů nebo interakce s více zdroji dat. Představte si scénář, kdy potřebujete aktualizovat profil uživatele a odeslat potvrzovací e-mail. Server Action může zvládnout jak aktualizaci databáze, tak proces odeslání e-mailu v jediné atomické operaci.

Autentizace a autorizace

Server Actions lze použít ke zpracování autentizace a autorizace. Prováděním kontrol autentizace a autorizace na serveru můžete zajistit, že pouze oprávnění uživatelé mají přístup k citlivým datům a funkcím. Můžete je použít ke zpracování přihlášení, registrace a resetování hesla uživatelů. Například Server Action může ověřit přihlašovací údaje uživatele vůči databázi a vrátit token, který lze použít k autentizaci následných požadavků.

Edge Functions

Server Actions lze nasadit jako Edge Functions, které běží na globální síti serverů blízko vašich uživatelů. To může výrazně snížit latenci a zlepšit výkon, zejména pro uživatele v geograficky rozptýlených lokalitách. Edge Functions jsou ideální pro zpracování Server Actions, které vyžadují nízkou latenci, jako jsou aktualizace dat v reálném čase nebo doručování personalizovaného obsahu. Next.js poskytuje vestavěnou podporu pro nasazení Server Actions jako Edge Functions.

Streaming

Server Actions podporují streaming, což vám umožňuje posílat data klientovi po částech, jakmile jsou k dispozici. To může zlepšit vnímaný výkon vaší aplikace, zejména u Server Actions, jejichž provedení trvá dlouho. Streaming je obzvláště užitečný pro zpracování velkých datových sad nebo složitých výpočtů. Můžete například streamovat výsledky vyhledávání klientovi, jak jsou načítány z databáze, a poskytnout tak citlivější uživatelský zážitek.

Osvědčené postupy

Zde jsou některé osvědčené postupy, které je třeba dodržovat při používání React Server Actions:

Příklady z reálného světa

Podívejme se na některé příklady z reálného světa, jak lze React Server Actions použít v různých typech aplikací:

E-commerce aplikace

Aplikace sociálních médií

Systém pro správu obsahu (CMS)

Aspekty internacionalizace

Při vývoji aplikací pro globální publikum je nezbytné zvážit internacionalizaci (i18n) a lokalizaci (l10n). Zde jsou některé aspekty pro použití React Server Actions v internacionalizovaných aplikacích:

Například při zpracování formuláře, který vyžaduje zadání data, může Server Action použít `Intl.DateTimeFormat` API k parsování data podle lokality uživatele, což zajistí správnou interpretaci data bez ohledu na regionální nastavení uživatele.

Závěr

React Server Actions jsou mocným nástrojem pro zjednodušení zpracování formulářů na straně serveru a datových mutací v aplikacích Reactu. Tím, že vám umožňují psát kód na straně serveru přímo ve vašich komponentách Reactu, redukují Server Actions opakující se kód, zvyšují bezpečnost, zlepšují výkon a umožňují optimistické aktualizace. Dodržováním osvědčených postupů uvedených v této příručce můžete využít Server Actions k budování robustnějších, škálovatelnějších a udržovatelnějších aplikací v Reactu. Jak se React neustále vyvíjí, Server Actions budou nepochybně hrát stále důležitější roli v budoucnosti webového vývoje.