React Server Actions: Förenklad Server-Side Form Processing

React Server Actions, introducerat i React 18 och väsentligt förbättrat i Next.js, erbjuder en revolutionerande metod för att hantera formulärinsändningar och datamutationer direkt på servern. Denna kraftfulla funktion förenklar utvecklingsprocessen, förbättrar säkerheten och förbättrar prestandan jämfört med traditionell datainhämtning och manipulation på klientsidan.

Vad är React Server Actions?

Server Actions är asynkrona funktioner som körs på servern och kan anropas direkt från React-komponenter. De låter dig utföra server-sidauppgifter, såsom:

Formulärinsändningar: Bearbeta formulärdata säkert på servern.
Datamutationer: Uppdatera databaser eller externa API:er.
Autentisering: Hantera användarlogin och registrering.
Server-Side Logik: Utför komplex affärslogik utan att exponera den för klienten.

Den stora fördelen med Server Actions är att de gör det möjligt att skriva server-side-kod i dina React-komponenter, vilket eliminerar behovet av separata API-routrar och komplex logik för datainhämtning på klientsidan. Denna samlokalisering av UI och server-side-logik leder till en mer underhållbar och effektiv kodbas.

Fördelar med att använda React Server Actions

Att använda React Server Actions ger flera betydande fördelar:

Förenklad Utveckling

Server Actions minskar mängden boilerplate-kod genom att låta dig hantera formulärinsändningar och datamutationer direkt i dina React-komponenter. Detta eliminerar behovet av separata API-slutpunkter och komplex logik för datainhämtning på klientsidan, vilket effektiviserar utvecklingsprocessen och gör din kod enklare att förstå och underhålla. Tänk på ett enkelt kontaktformulär. Utan Server Actions skulle du behöva en separat API-rutt för att hantera formulärinsändningen, JavaScript på klientsidan för att skicka data och felhanteringslogik på både klienten och servern. Med Server Actions kan allt detta hanteras inom själva komponenten.

Förbättrad Säkerhet

Genom att köra kod på servern minskar Server Actions din applikations attackyta. Känslig data och affärslogik hålls borta från klienten, vilket förhindrar att skadliga användare manipulerar dem. Till exempel exponeras aldrig databasautentiseringsuppgifter eller API-nycklar i klientsidans kod. Alla databasinteraktioner sker på servern, vilket minskar risken för SQL-injektion eller obehörig dataåtkomst.

Förbättrad Prestanda

Server Actions kan förbättra prestandan genom att minska mängden JavaScript som behöver laddas ner och köras på klienten. Detta är särskilt fördelaktigt för användare på enheter med låg effekt eller med långsamma internetanslutningar. Databearbetning sker på servern, och endast de nödvändiga UI-uppdateringarna skickas till klienten, vilket resulterar i snabbare sidladdningar och en smidigare användarupplevelse.

Optimistiska Uppdateringar

Server Actions integreras sömlöst med Reacts Suspense och Transitions, vilket möjliggör optimistiska uppdateringar. Optimistiska uppdateringar låter dig uppdatera UI:n omedelbart, även innan servern har bekräftat åtgärden. Detta ger en mer responsiv och engagerande användarupplevelse, eftersom användare inte behöver vänta på att servern ska svara innan de ser resultatet av sina åtgärder. I e-handel kan tillägg av en vara till en kundvagn visas omedelbart medan servern bekräftar tillägget i bakgrunden.

Progressiv Förbättring

Server Actions stöder progressiv förbättring, vilket innebär att din applikation fortfarande kan fungera även om JavaScript är inaktiverat eller inte lyckas laddas. När JavaScript är inaktiverat skickas formulär in som traditionella HTML-formulär, och servern hanterar insändningen och omdirigerar användaren till en ny sida. Detta säkerställer att din applikation förblir tillgänglig för alla användare, oavsett deras webbläsarkonfiguration eller nätverksförhållanden. Detta är särskilt viktigt för tillgänglighet och SEO.

Hur man använder React Server Actions

För att använda React Server Actions måste du använda ett ramverk som stöder dem, till exempel Next.js. Här är en steg-för-steg-guide:

1. Definiera Server Action

Skapa en asynkron funktion som kommer att köras på servern. Denna funktion bör hantera den logik du vill köra på servern, till exempel att uppdatera en databas eller anropa ett API. Markera funktionen med direktivet `"use server"` högst upp för att indikera att det är en Server Action. Detta direktiv talar om för React-kompilatorn att behandla funktionen som en server-side-funktion och att automatiskt hantera serialiseringen och deserialiseringen av data mellan klienten och servern.

// 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: 'Meddelande sparat!' };
  } catch (e) {
    return { message: 'Misslyckades med att spara meddelande' };
  }
}

Förklaring:

Direktivet `'use server'` markerar den här funktionen som en Server Action.
`revalidatePath('/')` rensar routens cache, vilket säkerställer att uppdaterade data hämtas vid nästa begäran. Detta är avgörande för att upprätthålla datakonsekvens.
`saveMessage(message)` är en platshållare för din faktiska databasinteraktionslogik. Det antar att du har en `saveMessage`-funktion definierad någon annanstans för att hantera att spara meddelandet i din databas.
Funktionen returnerar ett state-objekt som kan användas för att visa feedback till användaren.

2. Importera och använd Server Action i din komponent

Importera Server Action i din React-komponent och använd den som `action`-egenskapen på ett formulärelement. `useFormState`-hooken kan användas för att hantera formulärets tillstånd och visa feedback till användaren.

// 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 (
    
      Meddelande:
      
      
      {state?.message && {state.message}}
    
  );
}

Förklaring:

Direktivet `'use client'` anger att detta är en klientkomponent (eftersom den använder `useFormState`).
`useFormState(createMessage, {message: ''})` initierar formulärtillståndet med Server Action `createMessage`. Det andra argumentet är det initiala tillståndet.
Egenskapen `action` för `form`-elementet är inställd på `formAction` som returneras av `useFormState`.
Variabeln `state` innehåller returvärdet från Server Action, som kan användas för att visa feedback till användaren.

3. Hantera Formulärdata

Inuti Server Action kan du komma åt formulärdata med hjälp av `FormData`-API:et. Detta API ger ett bekvämt sätt att komma åt värdena för formulärfält.

'use server'

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

  // ...
}

4. Hantera Fel

Använd `try...catch`-block för att hantera fel som kan uppstå under körningen av Server Action. Returnera ett felmeddelande i state-objektet för att visa det för användaren.

'use server'

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

  try {
    // ...
  } catch (e) {
    return { message: 'Misslyckades med att spara meddelande' };
  }
}

5. Validera om Data

Efter att en Server Action framgångsrikt har muterat data kan du behöva validera datans cache igen för att säkerställa att UI:n återspeglar de senaste ändringarna. Använd funktionerna `revalidatePath` eller `revalidateTag` från `next/cache` för att validera specifika sökvägar eller taggar.

'use server'

import { revalidatePath } from 'next/cache';

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

Avancerad Användning

Mutera Data

Server Actions är särskilt väl lämpade för att mutera data, till exempel att uppdatera databaser eller externa API:er. Du kan använda Server Actions för att hantera komplexa datamutationer som kräver server-side-logik, till exempel att validera data, utföra beräkningar eller interagera med flera datakällor. Tänk på ett scenario där du behöver uppdatera en användares profil och skicka ett bekräftelsemejl. En Server Action kan hantera både databasuppdateringen och processen för att skicka e-post i en enda, atomisk operation.

Autentisering och Auktorisering

Server Actions kan användas för att hantera autentisering och auktorisering. Genom att utföra autentiserings- och auktoriseringskontroller på servern kan du säkerställa att endast behöriga användare har tillgång till känslig data och funktionalitet. Du kan använda Server Actions för att hantera användarlogin, registrering och lösenordsåterställningar. Till exempel kan en Server Action verifiera användaruppgifter mot en databas och returnera en token som kan användas för att autentisera efterföljande förfrågningar.

Edge Functions

Server Actions kan distribueras som Edge Functions, som körs på ett globalt nätverk av servrar nära dina användare. Detta kan avsevärt minska latensen och förbättra prestandan, särskilt för användare på geografiskt spridda platser. Edge Functions är idealiska för att hantera Server Actions som kräver låg latens, till exempel realtidsdatauppdateringar eller personlig innehållsleverans. Next.js tillhandahåller inbyggt stöd för att distribuera Server Actions som Edge Functions.

Strömning

Server Actions stöder strömning, vilket gör att du kan skicka data till klienten i bitar när den blir tillgänglig. Detta kan förbättra den upplevda prestandan för din applikation, särskilt för Server Actions som tar lång tid att köra. Strömning är särskilt användbart för att hantera stora datamängder eller komplexa beräkningar. Till exempel kan du strömma sökresultat till klienten när de hämtas från databasen, vilket ger en mer responsiv användarupplevelse.

Bästa Metoder

Här är några bästa metoder att följa när du använder React Server Actions:

Håll Server Actions små och fokuserade: Varje Server Action ska utföra en enda, väldefinierad uppgift. Detta gör din kod enklare att förstå, testa och underhålla.
Använd beskrivande namn: Välj namn som tydligt anger syftet med Server Action. Till exempel är `createComment` eller `updateUserProfile` bättre än generiska namn som `processData`.
Validera data på servern: Validera alltid data på servern för att förhindra att skadliga användare injicerar ogiltiga data i din applikation. Detta inkluderar att validera datatyper, format och intervall.
Hantera fel på ett snyggt sätt: Använd `try...catch`-block för att hantera fel och tillhandahålla informativ felmeddelanden till användaren. Undvik att exponera känslig felinformation för klienten.
Använd optimistiska uppdateringar: Ge en mer responsiv användarupplevelse genom att uppdatera UI:n omedelbart, även innan servern har bekräftat åtgärden.
Validera om data vid behov: Se till att UI:n återspeglar de senaste ändringarna genom att validera datan cache efter att en Server Action har muterat data.

Exempel från Verkliga Världen

Låt oss överväga några exempel från verkliga världen på hur React Server Actions kan användas i olika typer av applikationer:

E-handelsapplikation

Lägga till en vara i kundvagnen: En Server Action kan hantera att lägga till en vara i användarens kundvagn och uppdatera totala kundvagnen i databasen. Optimistiska uppdateringar kan användas för att omedelbart visa varan i kundvagnen.
Bearbeta en betalning: En Server Action kan hantera att bearbeta en betalning med hjälp av en tredjeparts betalningsgateway. Server Action kan också uppdatera orderstatus i databasen och skicka ett bekräftelsemejl till användaren.
Skicka in en produktrecension: En Server Action kan hantera att skicka in en produktrecension och spara den i databasen. Server Action kan också beräkna det genomsnittliga betyget för produkten och uppdatera produktdetaljsidan.

Social Media-applikation

Publicera en ny tweet: En Server Action kan hantera att publicera en ny tweet och spara den i databasen. Server Action kan också uppdatera användarens tidslinje och meddela sina följare.
Gilla ett inlägg: En Server Action kan hantera att gilla ett inlägg och uppdatera antalet gilla-markeringar i databasen. Optimistiska uppdateringar kan användas för att omedelbart visa det uppdaterade antalet gilla-markeringar.
Följa en användare: En Server Action kan hantera att följa en användare och uppdatera antalet följare och följer i databasen.

Innehållshanteringssystem (CMS)

Skapa ett nytt blogginlägg: En Server Action kan hantera att skapa ett nytt blogginlägg och spara det i databasen. Server Action kan också generera en slug för inlägget och uppdatera webbplatskartan.
Uppdatera en sida: En Server Action kan hantera att uppdatera en sida och spara den i databasen. Server Action kan också validera sidcachen på nytt för att säkerställa att det uppdaterade innehållet visas för användare.
Publicera en ändring: En Server Action kan hantera att publicera en ändring i databasen och meddela alla prenumeranter.

Internationella Överväganden

När du utvecklar applikationer för en global publik är det viktigt att överväga internationalisering (i18n) och lokalisering (l10n). Här är några överväganden för att använda React Server Actions i internationaliserade applikationer:

Hantera olika datum- och tidsformat: Använd `Intl`-API:et för att formatera datum och tider enligt användarens locale.
Hantera olika nummerformat: Använd `Intl`-API:et för att formatera nummer enligt användarens locale.
Hantera olika valutor: Använd `Intl`-API:et för att formatera valutor enligt användarens locale.
Översätta felmeddelanden: Översätt felmeddelanden till användarens språk.
Stöd för höger-till-vänster (RTL)-språk: Se till att din applikation stöder RTL-språk, till exempel arabiska och hebreiska.

Till exempel, när du bearbetar ett formulär som kräver en datuminmatning, kan en Server Action använda `Intl.DateTimeFormat`-API:et för att parsa datumet enligt användarens locale, vilket säkerställer att datumet tolkas korrekt oavsett användarens regionala inställningar.

Slutsats

React Server Actions är ett kraftfullt verktyg för att förenkla server-side form processing och datamutationer i React-applikationer. Genom att låta dig skriva server-side-kod direkt i dina React-komponenter minskar Server Actions boilerplate-kod, förbättrar säkerheten, förbättrar prestandan och möjliggör optimistiska uppdateringar. Genom att följa de bästa metoderna som beskrivs i den här guiden kan du utnyttja Server Actions för att bygga mer robusta, skalbara och underhållbara React-applikationer. Eftersom React fortsätter att utvecklas kommer Server Actions utan tvekan att spela en allt viktigare roll i framtiden för webbutveckling.