React Server Actions: Egyszerűsített szerveroldali űrlapfeldolgozás

A React Server Actions, amelyet a React 18-ban vezettek be és a Next.js jelentősen továbbfejlesztett, forradalmi megközelítést kínál az űrlapok beküldésének és az adatmódosításoknak közvetlenül a szerveren történő kezelésére. Ez a hatékony funkció egyszerűsíti a fejlesztési folyamatot, növeli a biztonságot és javítja a teljesítményt a hagyományos kliensoldali adatlekérdezéshez és -manipulációhoz képest.

Mik azok a React Server Actions?

A Server Actions (Szerverakciók) aszinkron funkciók, amelyek a szerveren futnak, és közvetlenül a React komponensekből hívhatók meg. Lehetővé teszik olyan szerveroldali feladatok elvégzését, mint például:

• Űrlapok beküldése: Az űrlapadatok biztonságos feldolgozása a szerveren.
• Adatmódosítások: Adatbázisok vagy külső API-k frissítése.
• Azonosítás: Felhasználói bejelentkezések és regisztrációk kezelése.
• Szerveroldali logika: Bonyolult üzleti logika végrehajtása anélkül, hogy az a kliensoldalon láthatóvá válna.

A Server Actions legfőbb előnye, hogy lehetővé teszi a szerveroldali kód írását a React komponenseken belül, kiküszöbölve a különálló API útvonalak és a bonyolult kliensoldali adatlekérési logika szükségességét. A felhasználói felület és a szerveroldali logika ezen együttes elhelyezése karbantarthatóbb és hatékonyabb kódbázishoz vezet.

A React Server Actions használatának előnyei

A React Server Actions használata számos jelentős előnnyel jár:

Egyszerűsített fejlesztés

A Server Actions csökkenti a felesleges kódot (boilerplate), mivel lehetővé teszi az űrlapok beküldésének és az adatmódosításoknak a közvetlen kezelését a React komponenseken belül. Ezzel feleslegessé válnak a különálló API végpontok és a bonyolult kliensoldali adatlekérési logika, ami egyszerűsíti a fejlesztési folyamatot, és a kódot könnyebben érthetővé és karbantarthatóvá teszi. Vegyünk egy egyszerű kapcsolatfelvételi űrlapot. Server Actions nélkül külön API útvonalra lenne szükség az űrlap beküldésének kezeléséhez, kliensoldali JavaScriptre az adatok elküldéséhez, valamint hibakezelési logikára a kliens- és a szerveroldalon is. A Server Actions segítségével mindez a komponensen belül kezelhető.

Fokozott biztonság

A kód szerveren történő futtatásával a Server Actions csökkenti az alkalmazás támadási felületét. Az érzékeny adatok és az üzleti logika távol maradnak a klienstől, megakadályozva, hogy rosszindulatú felhasználók manipulálhassák azokat. Például az adatbázis-hitelesítő adatok vagy API-kulcsok soha nem kerülnek ki a kliensoldali kódba. Minden adatbázis-interakció a szerveren történik, csökkentve az SQL-injekció vagy az illetéktelen adathozzáférés kockázatát.

Jobb teljesítmény

A Server Actions javíthatja a teljesítményt azáltal, hogy csökkenti a kliensre letöltendő és ott végrehajtandó JavaScript mennyiségét. Ez különösen előnyös a gyengébb teljesítményű eszközökkel vagy lassú internetkapcsolattal rendelkező felhasználók számára. Az adatfeldolgozás a szerveren történik, és csak a szükséges UI-frissítések kerülnek elküldésre a kliensnek, ami gyorsabb oldalbetöltést és zökkenőmentesebb felhasználói élményt eredményez.

Optimista frissítések

A Server Actions zökkenőmentesen integrálódik a React Suspense-szel és a Transitions-szel, lehetővé téve az optimista frissítéseket. Az optimista frissítésekkel azonnal frissítheti a felhasználói felületet, még mielőtt a szerver megerősítené a műveletet. Ez reszponzívabb és lebilincselőbb felhasználói élményt nyújt, mivel a felhasználóknak nem kell a szerver válaszára várniuk, hogy lássák cselekedeteik eredményét. Egy e-kereskedelmi alkalmazásban egy termék kosárba helyezése azonnal megjeleníthető, miközben a szerver a háttérben megerősíti a hozzáadást.

Progresszív javítás (Progressive Enhancement)

A Server Actions támogatja a progresszív javítást (progressive enhancement), ami azt jelenti, hogy az alkalmazás akkor is működőképes marad, ha a JavaScript le van tiltva vagy nem töltődik be. Ha a JavaScript le van tiltva, az űrlapok hagyományos HTML-űrlapként kerülnek beküldésre, és a szerver kezeli a beküldést, majd átirányítja a felhasználót egy új oldalra. Ez biztosítja, hogy az alkalmazás minden felhasználó számára elérhető maradjon, böngészőkonfigurációtól vagy hálózati körülményektől függetlenül. Ez különösen fontos az akadálymentesítés és a SEO szempontjából.

Hogyan használjuk a React Server Actions-t?

A React Server Actions használatához olyan keretrendszerre van szükség, amely támogatja őket, mint például a Next.js. Íme egy lépésről lépésre útmutató:

1. A szerverakció definiálása

Hozzon létre egy aszinkron funkciót, amely a szerveren fog futni. Ennek a funkciónak kell kezelnie a szerveren végrehajtani kívánt logikát, például egy adatbázis frissítését vagy egy API hívását. Jelölje meg a funkciót a `"use server"` direktívával a tetején, hogy jelezze, ez egy szerverakció. Ez a direktíva utasítja a React fordítót, hogy a funkciót szerveroldali funkcióként kezelje, és automatikusan kezelje az adatok szerializálását és deszerializálását a kliens és a szerver között.

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

Magyarázat:

• A `'use server'` direktíva jelöli meg ezt a funkciót szerverakcióként.
• A `revalidatePath('/')` törli az útvonal-gyorsítótárat, biztosítva, hogy a következő kéréskor a frissített adatok kerüljenek lekérésre. Ez kulcsfontosságú az adatkonzisztencia fenntartásához.
• A `saveMessage(message)` egy helyettesítő a tényleges adatbázis-interakciós logikád számára. Feltételezi, hogy máshol definiáltál egy `saveMessage` funkciót az üzenet adatbázisba mentésének kezelésére.
• A funkció egy állapotobjektumot ad vissza, amellyel visszajelzést lehet megjeleníteni a felhasználónak.

2. A szerverakció importálása és használata a komponensben

Importálja a szerverakciót a React komponensébe, és használja azt egy űrlap elem `action` prop-jaként. A `useFormState` hook segítségével kezelhető az űrlap állapota és jeleníthető meg visszajelzés a felhasználónak.

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

      Message:
      
      Submit
      {state?.message && 
{state.message}
}
    
  );
}

Magyarázat:

• A `'use client'` direktíva jelzi, hogy ez egy kliens komponens (mivel `useFormState`-et használ).
• A `useFormState(createMessage, {message: ''})` inicializálja az űrlap állapotát a `createMessage` szerverakcióval. A második argumentum a kezdeti állapot.
• A `form` elem `action` prop-ja a `useFormState` által visszaadott `formAction`-re van beállítva.
• A `state` változó tartalmazza a szerverakció visszatérési értékét, amelyet visszajelzés megjelenítésére lehet használni a felhasználónak.

3. Űrlapadatok kezelése

A szerverakción belül a `FormData` API segítségével érheti el az űrlapadatokat. Ez az API kényelmes módot biztosít az űrlapmezők értékeinek elérésére.

'use server'

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

  // ...
}

4. Hibakezelés

Használjon `try...catch` blokkokat a szerverakció végrehajtása során esetlegesen fellépő hibák kezelésére. Adjon vissza egy hibaüzenetet az állapotobjektumban, hogy megjelenítse azt a felhasználónak.

'use server'

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

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

5. Adatok újraérvényesítése

Miután egy szerverakció sikeresen módosította az adatokat, szükség lehet az adat-gyorsítótár újraérvényesítésére, hogy a felhasználói felület a legfrissebb változásokat tükrözze. Használja a `revalidatePath` vagy `revalidateTag` funkciókat a `next/cache`-ből a konkrét útvonalak vagy címkék újraérvényesítéséhez.

'use server'

import { revalidatePath } from 'next/cache';

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

Haladó használat

Adatok módosítása

A szerverakciók különösen alkalmasak adatok módosítására, például adatbázisok vagy külső API-k frissítésére. Használhatja a szerverakciókat bonyolult adatmódosítások kezelésére, amelyek szerveroldali logikát igényelnek, mint például adatellenőrzés, számítások elvégzése vagy több adatforrással való interakció. Vegyünk egy olyan forgatókönyvet, ahol frissítenie kell egy felhasználó profilját és egy megerősítő e-mailt kell küldenie. Egy szerverakció egyetlen, atomi műveletben képes kezelni mind az adatbázis-frissítést, mind az e-mail küldési folyamatot.

Azonosítás és jogosultságkezelés

A szerverakciók használhatók azonosítás és jogosultságkezelés kezelésére. Az azonosítási és jogosultsági ellenőrzések szerveren történő elvégzésével biztosíthatja, hogy csak az arra jogosult felhasználók férhessenek hozzá az érzékeny adatokhoz és funkciókhoz. Használhatja a szerverakciókat felhasználói bejelentkezések, regisztrációk és jelszó-visszaállítások kezelésére. Például egy szerverakció ellenőrizheti a felhasználói hitelesítő adatokat egy adatbázisban, és visszaadhat egy tokent, amely a későbbi kérések hitelesítésére használható.

Edge Functions

A szerverakciók Edge Functions-ként is telepíthetők, amelyek a felhasználókhoz közeli, globális szerverhálózaton futnak. Ez jelentősen csökkentheti a késleltetést és javíthatja a teljesítményt, különösen a földrajzilag szétszórt helyeken lévő felhasználók számára. Az Edge Functions ideálisak az alacsony késleltetést igénylő szerverakciók kezelésére, mint például a valós idejű adatfrissítések vagy a személyre szabott tartalom kézbesítése. A Next.js beépített támogatást nyújt a szerverakciók Edge Functions-ként történő telepítéséhez.

Streaming (adatfolyam)

A szerverakciók támogatják a streaminget, ami lehetővé teszi, hogy az adatokat darabokban küldje el a kliensnek, amint azok elérhetővé válnak. Ez javíthatja az alkalmazás érzékelt teljesítményét, különösen a hosszú ideig tartó szerverakciók esetében. A streaming különösen hasznos nagy adathalmazok vagy bonyolult számítások kezelésénél. Például a keresési eredményeket folyamatosan küldheti a kliensnek, amint azok lekérdeződnek az adatbázisból, így reszponzívabb felhasználói élményt nyújtva.

Bevált gyakorlatok

Íme néhány bevált gyakorlat, amelyet érdemes követni a React Server Actions használatakor:

• Legyenek a szerverakciók kicsik és fókuszáltak: Minden szerverakciónak egyetlen, jól definiált feladatot kell elvégeznie. Ez megkönnyíti a kód megértését, tesztelését és karbantartását.
• Használjon leíró neveket: Válasszon olyan neveket, amelyek egyértelműen jelzik a szerverakció célját. Például a `createComment` vagy az `updateUserProfile` jobb, mint az olyan általános nevek, mint a `processData`.
• Ellenőrizze az adatokat a szerveren: Mindig ellenőrizze az adatokat a szerveren, hogy megakadályozza, hogy rosszindulatú felhasználók érvénytelen adatokat juttassanak az alkalmazásba. Ez magában foglalja az adattípusok, formátumok és tartományok ellenőrzését.
• Kezelje a hibákat elegánsan: Használjon `try...catch` blokkokat a hibák kezelésére, és adjon informatív hibaüzeneteket a felhasználónak. Kerülje az érzékeny hiba-információk felfedését a kliens felé.
• Használjon optimista frissítéseket: Biztosítson reszponzívabb felhasználói élményt a felhasználói felület azonnali frissítésével, még mielőtt a szerver megerősítené a műveletet.
• Érvényesítse újra az adatokat szükség szerint: Biztosítsa, hogy a felhasználói felület a legfrissebb változásokat tükrözze az adat-gyorsítótár újraérvényesítésével, miután egy szerverakció módosította az adatokat.

Valós példák

Nézzünk néhány valós példát arra, hogyan használhatók a React Server Actions különböző típusú alkalmazásokban:

E-kereskedelmi alkalmazás

• Termék hozzáadása a kosárhoz: Egy szerverakció kezelheti egy termék hozzáadását a felhasználó kosarához és a kosár végösszegének frissítését az adatbázisban. Optimista frissítésekkel azonnal megjeleníthető a termék a kosárban.
• Fizetés feldolgozása: Egy szerverakció kezelheti a fizetés feldolgozását egy harmadik féltől származó fizetési kapun keresztül. A szerverakció frissítheti a rendelés állapotát az adatbázisban, és megerősítő e-mailt küldhet a felhasználónak.
• Termékértékelés beküldése: Egy szerverakció kezelheti egy termékértékelés beküldését és annak adatbázisba mentését. A szerverakció kiszámíthatja a termék átlagos értékelését és frissítheti a termék részletes oldalát.

Közösségi média alkalmazás

• Új tweet közzététele: Egy szerverakció kezelheti egy új tweet közzétételét és annak adatbázisba mentését. A szerverakció frissítheti a felhasználó idővonalát és értesítheti a követőit.
• Bejegyzés kedvelése: Egy szerverakció kezelheti egy bejegyzés kedvelését és a kedvelések számának frissítését az adatbázisban. Optimista frissítésekkel azonnal megjeleníthető a frissített kedvelésszám.
• Felhasználó követése: Egy szerverakció kezelheti egy felhasználó követését és a követők, valamint a követettek számának frissítését az adatbázisban.

Tartalomkezelő rendszer (CMS)

• Új blogbejegyzés létrehozása: Egy szerverakció kezelheti egy új blogbejegyzés létrehozását és annak adatbázisba mentését. A szerverakció generálhat egy "slug"-ot a bejegyzéshez és frissítheti az oldaltérképet.
• Oldal frissítése: Egy szerverakció kezelheti egy oldal frissítését és annak adatbázisba mentését. A szerverakció újraérvényesítheti az oldal gyorsítótárát, hogy a frissített tartalom megjelenjen a felhasználóknak.
• Változtatás közzététele: Egy szerverakció kezelheti egy változtatás közzétételét az adatbázisban és értesítheti az összes feliratkozót.

Nemzetköziesítési szempontok

Amikor globális közönségnek fejlesztünk alkalmazásokat, elengedhetetlen figyelembe venni a nemzetköziesítést (i18n) és a lokalizációt (l10n). Íme néhány szempont a React Server Actions használatához nemzetköziesített alkalmazásokban:

• Különböző dátum- és időformátumok kezelése: Használja az `Intl` API-t a dátumok és idők formázásához a felhasználó területi beállításainak megfelelően.
• Különböző számformátumok kezelése: Használja az `Intl` API-t a számok formázásához a felhasználó területi beállításainak megfelelően.
• Különböző pénznemek kezelése: Használja az `Intl` API-t a pénznemek formázásához a felhasználó területi beállításainak megfelelően.
• Hibaüzenetek fordítása: Fordítsa le a hibaüzeneteket a felhasználó nyelvére.
• Jobbról balra író (RTL) nyelvek támogatása: Győződjön meg róla, hogy az alkalmazása támogatja az RTL nyelveket, mint például az arab és a héber.

Például egy olyan űrlap feldolgozásakor, amely dátumbevitelt igényel, egy szerverakció használhatja az `Intl.DateTimeFormat` API-t a dátum értelmezéséhez a felhasználó területi beállításai szerint, biztosítva, hogy a dátum helyesen kerüljön értelmezésre a felhasználó regionális beállításaitól függetlenül.

Összegzés

A React Server Actions egy hatékony eszköz a szerveroldali űrlapfeldolgozás és adatmódosítások egyszerűsítésére a React alkalmazásokban. Azáltal, hogy lehetővé teszik a szerveroldali kód írását közvetlenül a React komponenseken belül, a szerverakciók csökkentik a felesleges kódot, növelik a biztonságot, javítják a teljesítményt és lehetővé teszik az optimista frissítéseket. Az ebben az útmutatóban vázolt bevált gyakorlatok követésével kiaknázhatja a szerverakciók előnyeit, hogy robusztusabb, skálázhatóbb és karbantarthatóbb React alkalmazásokat építsen. Ahogy a React tovább fejlődik, a szerverakciók kétségtelenül egyre fontosabb szerepet fognak játszani a webfejlesztés jövőjében.