React Server Actions: Vereenvoudigde Server-Side Formulierverwerking

React Server Actions, geïntroduceerd in React 18 en aanzienlijk verbeterd in Next.js, bieden een revolutionaire aanpak voor het direct op de server afhandelen van formulierinzendingen en datamutaties. Deze krachtige functie vereenvoudigt het ontwikkelproces, verhoogt de beveiliging en verbetert de prestaties in vergelijking met traditionele client-side data fetching en manipulatie.

Wat zijn React Server Actions?

Server Actions zijn asynchrone functies die op de server draaien en direct vanuit React-componenten kunnen worden aangeroepen. Ze stellen u in staat om server-side taken uit te voeren, zoals:

• Formulierinzendingen: Verwerk formuliergegevens veilig op de server.
• Datamutaties: Werk databases of externe API's bij.
• Authenticatie: Behandel logins en registraties van gebruikers.
• Server-Side Logica: Voer complexe bedrijfslogica uit zonder deze bloot te stellen aan de client.

Het belangrijkste voordeel van Server Actions is dat ze u in staat stellen server-side code te schrijven binnen uw React-componenten, waardoor de noodzaak voor aparte API-routes en complexe client-side data fetching logica wordt geëlimineerd. Deze co-locatie van UI en server-side logica leidt tot een beter onderhoudbare en efficiëntere codebase.

Voordelen van het gebruik van React Server Actions

Het gebruik van React Server Actions biedt verschillende aanzienlijke voordelen:

Vereenvoudigde Ontwikkeling

Server Actions verminderen boilerplate code doordat u formulierinzendingen en datamutaties direct binnen uw React-componenten kunt afhandelen. Dit elimineert de noodzaak voor aparte API-eindpunten en complexe client-side data fetching logica, wat het ontwikkelproces stroomlijnt en uw code gemakkelijker te begrijpen en te onderhouden maakt. Neem een eenvoudig contactformulier. Zonder Server Actions zou u een aparte API-route nodig hebben om de formulierinzending af te handelen, client-side JavaScript om de gegevens te verzenden, en foutafhandelingslogica aan zowel de client- als serverzijde. Met Server Actions kan dit allemaal binnen het component zelf worden afgehandeld.

Verbeterde Beveiliging

Door code op de server uit te voeren, verkleinen Server Actions het aanvalsoppervlak van uw applicatie. Gevoelige gegevens en bedrijfslogica worden weggehouden van de client, waardoor kwaadwillende gebruikers er niet mee kunnen knoeien. Bijvoorbeeld, databankgegevens of API-sleutels worden nooit blootgesteld in de client-side code. Alle database-interacties vinden plaats op de server, wat het risico op SQL-injectie of ongeautoriseerde gegevenstoegang beperkt.

Verbeterde Prestaties

Server Actions kunnen de prestaties verbeteren door de hoeveelheid JavaScript die op de client moet worden gedownload en uitgevoerd te verminderen. Dit is met name gunstig voor gebruikers op apparaten met weinig vermogen of met trage internetverbindingen. De gegevensverwerking vindt plaats op de server, en alleen de noodzakelijke UI-updates worden naar de client gestuurd, wat resulteert in snellere laadtijden en een soepelere gebruikerservaring.

Optimistische Updates

Server Actions integreren naadloos met React's Suspense en Transitions, wat optimistische updates mogelijk maakt. Optimistische updates stellen u in staat om de UI onmiddellijk bij te werken, zelfs voordat de server de actie heeft bevestigd. Dit zorgt voor een responsievere en boeiendere gebruikerservaring, omdat gebruikers niet hoeven te wachten op een reactie van de server voordat ze de resultaten van hun acties zien. In e-commerce kan het toevoegen van een item aan een winkelwagentje onmiddellijk worden weergegeven terwijl de server de toevoeging op de achtergrond bevestigt.

Progressive Enhancement

Server Actions ondersteunen progressive enhancement, wat betekent dat uw applicatie nog steeds kan functioneren, zelfs als JavaScript is uitgeschakeld of niet laadt. Wanneer JavaScript is uitgeschakeld, worden formulieren verzonden als traditionele HTML-formulieren, en de server zal de inzending afhandelen en de gebruiker doorsturen naar een nieuwe pagina. Dit zorgt ervoor dat uw applicatie toegankelijk blijft voor alle gebruikers, ongeacht hun browserconfiguratie of netwerkomstandigheden. Dit is vooral belangrijk voor toegankelijkheid en SEO.

Hoe React Server Actions te Gebruiken

Om React Server Actions te gebruiken, moet u een framework gebruiken dat ze ondersteunt, zoals Next.js. Hier is een stapsgewijze handleiding:

1. Definieer de Server Action

Maak een asynchrone functie die op de server zal draaien. Deze functie moet de logica afhandelen die u op de server wilt uitvoeren, zoals het bijwerken van een database of het aanroepen van een API. Markeer de functie met de `"use server"`-richtlijn bovenaan om aan te geven dat het een Server Action is. Deze richtlijn vertelt de React-compiler om de functie als een server-side functie te behandelen en om automatisch de serialisatie en deserialisatie van gegevens tussen de client en de server af te handelen.

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

Uitleg:

• `'use server'`-richtlijn markeert deze functie als een Server Action.
• `revalidatePath('/')` wist de route-cache, zodat de bijgewerkte gegevens bij het volgende verzoek worden opgehaald. Dit is cruciaal voor het behouden van gegevensconsistentie.
• `saveMessage(message)` is een placeholder voor uw daadwerkelijke database-interactielogica. Het gaat ervan uit dat u ergens anders een `saveMessage`-functie hebt gedefinieerd om het opslaan van het bericht in uw database af te handelen.
• De functie retourneert een state-object dat kan worden gebruikt om feedback aan de gebruiker te tonen.

2. Importeer en Gebruik de Server Action in uw Component

Importeer de Server Action in uw React-component en gebruik deze als de `action`-prop op een formulierelement. De `useFormState`-hook kan worden gebruikt om de status van het formulier te beheren en feedback aan de gebruiker te tonen.

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

Uitleg:

• `'use client'`-richtlijn specificeert dat dit een Client Component is (omdat het `useFormState` gebruikt).
• `useFormState(createMessage, {message: ''})` initialiseert de formulierstatus met de `createMessage` Server Action. Het tweede argument is de initiële status.
• De `action`-prop van het `form`-element wordt ingesteld op de `formAction` die wordt geretourneerd door `useFormState`.
• De `state`-variabele bevat de returnwaarde van de Server Action, die kan worden gebruikt om feedback aan de gebruiker te tonen.

3. Verwerk Formuliergegevens

Binnen de Server Action kunt u de formuliergegevens benaderen met de `FormData` API. Deze API biedt een handige manier om de waarden van formuliervelden te benaderen.

'use server'

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

  // ...
}

4. Foutafhandeling

Gebruik `try...catch`-blokken om fouten af te handelen die kunnen optreden tijdens de uitvoering van de Server Action. Retourneer een foutmelding in het state-object om deze aan de gebruiker te tonen.

'use server'

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

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

5. Gegevens Her-valideren

Nadat een Server Action met succes gegevens heeft gemuteerd, moet u mogelijk de data-cache her-valideren om ervoor te zorgen dat de UI de laatste wijzigingen weergeeft. Gebruik de `revalidatePath`- of `revalidateTag`-functies van `next/cache` om specifieke paden of tags te her-valideren.

'use server'

import { revalidatePath } from 'next/cache';

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

Geavanceerd Gebruik

Data Muteren

Server Actions zijn bijzonder geschikt voor het muteren van gegevens, zoals het bijwerken van databases of externe API's. U kunt Server Actions gebruiken om complexe datamutaties af te handelen die server-side logica vereisen, zoals het valideren van gegevens, het uitvoeren van berekeningen of het interageren met meerdere gegevensbronnen. Denk aan een scenario waarin u het profiel van een gebruiker moet bijwerken en een bevestigingsmail moet sturen. Een Server Action kan zowel de database-update als het e-mailverzendproces in een enkele, atomische operatie afhandelen.

Authenticatie en Autorisatie

Server Actions kunnen worden gebruikt voor authenticatie en autorisatie. Door authenticatie- en autorisatiecontroles op de server uit te voeren, kunt u ervoor zorgen dat alleen geautoriseerde gebruikers toegang hebben tot gevoelige gegevens en functionaliteit. U kunt Server Actions gebruiken om gebruikerslogins, registratie en wachtwoordresets af te handelen. Een Server Action kan bijvoorbeeld gebruikersgegevens verifiëren met een database en een token retourneren dat kan worden gebruikt om volgende verzoeken te authenticeren.

Edge Functions

Server Actions kunnen worden geïmplementeerd als Edge Functions, die draaien op een wereldwijd netwerk van servers dicht bij uw gebruikers. Dit kan de latentie aanzienlijk verminderen en de prestaties verbeteren, vooral voor gebruikers op geografisch verspreide locaties. Edge Functions zijn ideaal voor het afhandelen van Server Actions die een lage latentie vereisen, zoals real-time data-updates of gepersonaliseerde contentlevering. Next.js biedt ingebouwde ondersteuning voor het implementeren van Server Actions als Edge Functions.

Streaming

Server Actions ondersteunen streaming, waarmee u gegevens in brokken naar de client kunt sturen zodra ze beschikbaar komen. Dit kan de waargenomen prestaties van uw applicatie verbeteren, vooral voor Server Actions die lang duren om uit te voeren. Streaming is met name handig voor het verwerken van grote datasets of complexe berekeningen. U kunt bijvoorbeeld zoekresultaten naar de client streamen terwijl ze uit de database worden opgehaald, wat een responsievere gebruikerservaring biedt.

Best Practices

Hier zijn enkele best practices om te volgen bij het gebruik van React Server Actions:

• Houd Server Actions klein en gefocust: Elke Server Action moet één, goed gedefinieerde taak uitvoeren. Dit maakt uw code gemakkelijker te begrijpen, te testen en te onderhouden.
• Gebruik beschrijvende namen: Kies namen die het doel van de Server Action duidelijk aangeven. Bijvoorbeeld, `createComment` of `updateUserProfile` zijn beter dan generieke namen zoals `processData`.
• Valideer gegevens op de server: Valideer gegevens altijd op de server om te voorkomen dat kwaadwillende gebruikers ongeldige gegevens in uw applicatie injecteren. Dit omvat het valideren van gegevenstypen, formaten en bereiken.
• Handel fouten correct af: Gebruik `try...catch`-blokken om fouten af te handelen en informatieve foutmeldingen aan de gebruiker te geven. Vermijd het blootstellen van gevoelige foutinformatie aan de client.
• Gebruik optimistische updates: Zorg voor een responsievere gebruikerservaring door de UI onmiddellijk bij te werken, zelfs voordat de server de actie heeft bevestigd.
• Her-valideer gegevens indien nodig: Zorg ervoor dat de UI de laatste wijzigingen weergeeft door de data-cache te her-valideren nadat een Server Action gegevens heeft gemuteerd.

Praktijkvoorbeelden

Laten we enkele praktijkvoorbeelden bekijken van hoe React Server Actions kunnen worden gebruikt in verschillende soorten applicaties:

E-commerce Applicatie

• Een item toevoegen aan de winkelwagen: Een Server Action kan het toevoegen van een item aan de winkelwagen van de gebruiker en het bijwerken van het totaalbedrag in de database afhandelen. Optimistische updates kunnen worden gebruikt om het item onmiddellijk in de winkelwagen weer te geven.
• Een betaling verwerken: Een Server Action kan een betaling verwerken via een externe betalingsgateway. De Server Action kan ook de bestelstatus in de database bijwerken en een bevestigingsmail naar de gebruiker sturen.
• Een productrecensie indienen: Een Server Action kan het indienen van een productrecensie en het opslaan ervan in de database afhandelen. De Server Action kan ook de gemiddelde beoordeling voor het product berekenen en de productdetailpagina bijwerken.

Social Media Applicatie

• Een nieuwe tweet plaatsen: Een Server Action kan het plaatsen van een nieuwe tweet en het opslaan ervan in de database afhandelen. De Server Action kan ook de tijdlijn van de gebruiker bijwerken en hun volgers informeren.
• Een bericht liken: Een Server Action kan het liken van een bericht en het bijwerken van het aantal likes in de database afhandelen. Optimistische updates kunnen worden gebruikt om het bijgewerkte aantal likes onmiddellijk weer te geven.
• Een gebruiker volgen: Een Server Action kan het volgen van een gebruiker en het bijwerken van het aantal volgers en gevolgden in de database afhandelen.

Content Management Systeem (CMS)

• Een nieuwe blogpost maken: Een Server Action kan het maken van een nieuwe blogpost en het opslaan ervan in de database afhandelen. De Server Action kan ook een slug voor de post genereren en de sitemap bijwerken.
• Een pagina bijwerken: Een Server Action kan het bijwerken van een pagina en het opslaan ervan in de database afhandelen. De Server Action kan ook de paginacache her-valideren om ervoor te zorgen dat de bijgewerkte inhoud aan gebruikers wordt getoond.
• Een wijziging publiceren: Een Server Action kan het publiceren van een wijziging naar de database en het informeren van alle abonnees afhandelen.

Internationalisatieoverwegingen

Bij het ontwikkelen van applicaties voor een wereldwijd publiek is het essentieel om rekening te houden met internationalisatie (i18n) en lokalisatie (l10n). Hier zijn enkele overwegingen voor het gebruik van React Server Actions in geïnternationaliseerde applicaties:

• Omgaan met verschillende datum- en tijdnotaties: Gebruik de `Intl` API om datums en tijden op te maken volgens de locale van de gebruiker.
• Omgaan met verschillende getalnotaties: Gebruik de `Intl` API om getallen op te maken volgens de locale van de gebruiker.
• Omgaan met verschillende valuta's: Gebruik de `Intl` API om valuta's op te maken volgens de locale van de gebruiker.
• Foutmeldingen vertalen: Vertaal foutmeldingen naar de taal van de gebruiker.
• Ondersteuning van rechts-naar-links (RTL) talen: Zorg ervoor dat uw applicatie RTL-talen ondersteunt, zoals Arabisch en Hebreeuws.

Bijvoorbeeld, bij het verwerken van een formulier dat een datuminvoer vereist, kan een Server Action de `Intl.DateTimeFormat` API gebruiken om de datum te parsen volgens de locale van de gebruiker, zodat de datum correct wordt geïnterpreteerd, ongeacht de regionale instellingen van de gebruiker.

Conclusie

React Server Actions zijn een krachtig hulpmiddel voor het vereenvoudigen van server-side formulierverwerking en datamutaties in React-applicaties. Door u in staat te stellen server-side code rechtstreeks binnen uw React-componenten te schrijven, verminderen Server Actions boilerplate code, verhogen ze de beveiliging, verbeteren ze de prestaties en maken ze optimistische updates mogelijk. Door de best practices in deze gids te volgen, kunt u Server Actions benutten om robuustere, schaalbaardere en beter onderhoudbare React-applicaties te bouwen. Naarmate React blijft evolueren, zullen Server Actions ongetwijfeld een steeds belangrijkere rol spelen in de toekomst van webontwikkeling.