React Server Actions: Forenklet Formularbehandling på Serversiden

React Server Actions, introduceret i React 18 og væsentligt forbedret i Next.js, tilbyder en revolutionerende tilgang til håndtering af formularindsendelser og datamutationer direkte på serveren. Denne kraftfulde funktion forenkler udviklingsprocessen, forbedrer sikkerheden og øger ydeevnen sammenlignet med traditionel klient-side datahentning og manipulation.

Hvad er React Server Actions?

Server Actions er asynkrone funktioner, der kører på serveren og kan aktiveres direkte fra React-komponenter. De giver dig mulighed for at udføre server-side opgaver, såsom:

• Formularindsendelser: Behandle formulardata sikkert på serveren.
• Datamutationer: Opdater databaser eller eksterne API'er.
• Autentificering: Håndter brugerlogins og registrering.
• Server-Side Logik: Udfør kompleks forretningslogik uden at eksponere den for klienten.

Den vigtigste fordel ved Server Actions er, at de giver dig mulighed for at skrive server-side kode inden for dine React-komponenter, hvilket eliminerer behovet for separate API-ruter og kompleks klient-side datahentningslogik. Denne samlokalisering af UI og server-side logik fører til en mere vedligeholdelig og effektiv kodebase.

Fordele ved at Bruge React Server Actions

Brug af React Server Actions giver flere betydelige fordele:

Forenklet Udvikling

Server Actions reducerer boilerplate-kode ved at give dig mulighed for at håndtere formularindsendelser og datamutationer direkte i dine React-komponenter. Dette eliminerer behovet for separate API-endpoints og kompleks klient-side datahentningslogik, hvilket strømliner udviklingsprocessen og gør din kode lettere at forstå og vedligeholde. Overvej en simpel kontaktformular. Uden Server Actions ville du have brug for en separat API-rute til at håndtere formularindsendelsen, klient-side JavaScript til at sende dataene og fejlhåndteringslogik på både klient og server. Med Server Actions kan alt dette håndteres inden for selve komponenten.

Forbedret Sikkerhed

Ved at køre kode på serveren reducerer Server Actions angrebsoverfladen for din applikation. Sensitive data og forretningslogik holdes væk fra klienten, hvilket forhindrer ondsindede brugere i at manipulere dem. For eksempel er databaselegitimationsoplysninger eller API-nøgler aldrig eksponeret i klient-side koden. Alle databaseinteraktioner sker på serveren, hvilket reducerer risikoen for SQL-injektion eller uautoriseret dataadgang.

Forbedret Ydeevne

Server Actions kan forbedre ydeevnen ved at reducere mængden af JavaScript, der skal downloades og udføres på klienten. Dette er især fordelagtigt for brugere på lavtydende enheder eller med langsomme internetforbindelser. Databehandling sker på serveren, og kun de nødvendige UI-opdateringer sendes til klienten, hvilket resulterer i hurtigere sideindlæsninger og en jævnere brugeroplevelse.

Optimistiske Opdateringer

Server Actions integreres problemfrit med React's Suspense og Transitions, hvilket muliggør optimistiske opdateringer. Optimistiske opdateringer giver dig mulighed for at opdatere UI'en øjeblikkeligt, selv før serveren har bekræftet handlingen. Dette giver en mere responsiv og engagerende brugeroplevelse, da brugerne ikke behøver at vente på, at serveren svarer, før de ser resultaterne af deres handlinger. I e-handel kan tilføjelse af en vare til en indkøbskurv vises øjeblikkeligt, mens serveren bekræfter tilføjelsen i baggrunden.

Progressiv Forbedring

Server Actions understøtter progressiv forbedring, hvilket betyder, at din applikation stadig kan fungere, selvom JavaScript er deaktiveret eller ikke kan indlæses. Når JavaScript er deaktiveret, vil formularer blive indsendt som traditionelle HTML-formularer, og serveren vil håndtere indsendelsen og omdirigere brugeren til en ny side. Dette sikrer, at din applikation forbliver tilgængelig for alle brugere, uanset deres browserkonfiguration eller netværksforhold. Dette er især vigtigt for tilgængelighed og SEO.

Sådan Bruger du React Server Actions

For at bruge React Server Actions skal du bruge et framework, der understøtter dem, såsom Next.js. Her er en trin-for-trin guide:

1. Definer Server Action

Opret en asynkron funktion, der vil køre på serveren. Denne funktion skal håndtere den logik, du vil udføre på serveren, såsom at opdatere en database eller kalde en API. Marker funktionen med `'use server'` direktivet øverst for at angive, at det er en Server Action. Dette direktiv fortæller React-kompilatoren at behandle funktionen som en server-side funktion og automatisk håndtere serialisering og deserialisering af data mellem klienten og serveren.

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

              
                Copy
              
            
          

Forklaring:

• `'use server'` direktivet markerer denne funktion som en Server Action.
• `revalidatePath('/')` rydder route-cachen og sikrer, at de opdaterede data hentes ved næste anmodning. Dette er afgørende for at opretholde datakonsistens.
• `saveMessage(message)` er en pladsholder for din faktiske databaseinteraktionslogik. Det antager, at du har en `saveMessage` funktion defineret andetsteds til at håndtere lagring af meddelelsen i din database.
• Funktionen returnerer et state-objekt, der kan bruges til at vise feedback til brugeren.

2. Importer og Brug Server Action i Din Komponent

Importer Server Action i din React-komponent og brug den som `action` prop på et form-element. `useFormState` hook kan bruges til at administrere formens tilstand og vise feedback til brugeren.

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

              
                Copy
              
            
          

Forklaring:

• `'use client'` direktivet angiver, at dette er en Client Component (da den bruger `useFormState`).
• `useFormState(createMessage, {message: ''})` initialiserer formens tilstand med `createMessage` Server Action. Det andet argument er den indledende tilstand.
• `action` prop'en for `form` elementet er sat til `formAction` returneret af `useFormState`.
• `state` variablen indeholder returværdien fra Server Action, som kan bruges til at vise feedback til brugeren.

3. Håndter Formulardata

Inde i Server Action kan du få adgang til formulardataene ved hjælp af `FormData` API'en. Denne API giver en bekvem måde at få adgang til værdierne af formfelter.

            'use server'

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

  // ...
}
            

              
                Copy
              
            
          

4. Håndter Fejl

Brug `try...catch` blokke til at håndtere fejl, der kan opstå under udførelsen af Server Action. Returner en fejlmeddelelse i state-objektet for at vise det til brugeren.

            'use server'

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

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

              
                Copy
              
            
          

5. Revalider Data

Efter at en Server Action med succes har muteret data, kan det være nødvendigt at revalidere datacachen for at sikre, at UI'en afspejler de seneste ændringer. Brug `revalidatePath` eller `revalidateTag` funktionerne fra `next/cache` til at revalidere specifikke stier eller tags.

            'use server'

import { revalidatePath } from 'next/cache';

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

              
                Copy
              
            
          

Avanceret Brug

Mutering af Data

Server Actions er særligt velegnede til mutering af data, såsom at opdatere databaser eller eksterne API'er. Du kan bruge Server Actions til at håndtere komplekse datamutationer, der kræver server-side logik, såsom at validere data, udføre beregninger eller interagere med flere datakilder. Overvej et scenarie, hvor du skal opdatere en brugers profil og sende en bekræftelses-e-mail. En Server Action kan håndtere både databaseopdateringen og e-mail sendingsprocessen i en enkelt, atomisk operation.

Autentificering og Autorisation

Server Actions kan bruges til at håndtere autentificering og autorisation. Ved at udføre autentificerings- og autorisationskontroller på serveren kan du sikre, at kun autoriserede brugere har adgang til følsomme data og funktionalitet. Du kan bruge Server Actions til at håndtere brugerlogins, registrering og nulstilling af adgangskoder. For eksempel kan en Server Action verificere brugerlegitimationsoplysninger mod en database og returnere et token, der kan bruges til at autentificere efterfølgende anmodninger.

Edge Functions

Server Actions kan implementeres som Edge Functions, der kører på et globalt netværk af servere tæt på dine brugere. Dette kan reducere ventetiden betydeligt og forbedre ydeevnen, især for brugere på geografisk spredte placeringer. Edge Functions er ideelle til håndtering af Server Actions, der kræver lav ventetid, såsom dataopdateringer i realtid eller personlig indholdslevering. Next.js tilbyder indbygget support til implementering af Server Actions som Edge Functions.

Streaming

Server Actions understøtter streaming, hvilket giver dig mulighed for at sende data til klienten i bidder, efterhånden som de bliver tilgængelige. Dette kan forbedre den opfattede ydeevne af din applikation, især for Server Actions, der tager lang tid at udføre. Streaming er især nyttigt til håndtering af store datasæt eller komplekse beregninger. For eksempel kan du streame søgeresultater til klienten, efterhånden som de hentes fra databasen, hvilket giver en mere responsiv brugeroplevelse.

Bedste Praksis

Her er nogle bedste fremgangsmåder, du kan følge, når du bruger React Server Actions:

• Hold Server Actions små og fokuserede: Hver Server Action skal udføre en enkelt, veldefineret opgave. Dette gør din kode lettere at forstå, teste og vedligeholde.
• Brug beskrivende navne: Vælg navne, der tydeligt angiver formålet med Server Action. For eksempel er `createComment` eller `updateUserProfile` bedre end generiske navne som `processData`.
• Valider data på serveren: Valider altid data på serveren for at forhindre ondsindede brugere i at injicere ugyldige data i din applikation. Dette inkluderer validering af datatyper, formater og områder.
• Håndter fejl elegant: Brug `try...catch` blokke til at håndtere fejl og give informative fejlmeddelelser til brugeren. Undgå at eksponere følsomme fejloplysninger til klienten.
• Brug optimistiske opdateringer: Giv en mere responsiv brugeroplevelse ved at opdatere UI'en øjeblikkeligt, selv før serveren har bekræftet handlingen.
• Revalider data efter behov: Sørg for, at UI'en afspejler de seneste ændringer ved at revalidere datacachen, efter at en Server Action har muteret data.

Eksempler fra den Virkelige Verden

Lad os overveje nogle eksempler fra den virkelige verden på, hvordan React Server Actions kan bruges i forskellige typer applikationer:

E-handelsapplikation

• Tilføjelse af en vare til indkøbskurven: En Server Action kan håndtere tilføjelse af en vare til brugerens indkøbskurv og opdatere kurvens samlede beløb i databasen. Optimistiske opdateringer kan bruges til straks at vise varen i kurven.
• Behandling af en betaling: En Server Action kan håndtere behandling af en betaling ved hjælp af en tredjeparts betalingsgateway. Server Action kan også opdatere ordrestatus i databasen og sende en bekræftelses-e-mail til brugeren.
• Indsendelse af en produktanmeldelse: En Server Action kan håndtere indsendelse af en produktanmeldelse og gemme den i databasen. Server Action kan også beregne den gennemsnitlige bedømmelse for produktet og opdatere produktdetaljesiden.

Social Media Applikation

• Opslag af et nyt tweet: En Server Action kan håndtere opslag af et nyt tweet og gemme det i databasen. Server Action kan også opdatere brugerens tidslinje og underrette deres følgere.
• Synes godt om et opslag: En Server Action kan håndtere at synes godt om et opslag og opdatere antallet af likes i databasen. Optimistiske opdateringer kan bruges til straks at vise det opdaterede antal likes.
• Følge en bruger: En Server Action kan håndtere at følge en bruger og opdatere antallet af følgere og følgninger i databasen.

Content Management System (CMS)

• Oprettelse af et nyt blogindlæg: En Server Action kan håndtere oprettelse af et nyt blogindlæg og gemme det i databasen. Server Action kan også generere en slug til indlægget og opdatere sitemapet.
• Opdatering af en side: En Server Action kan håndtere opdatering af en side og gemme den i databasen. Server Action kan også revalidere sidecachen for at sikre, at det opdaterede indhold vises for brugerne.
• Publicering af en ændring: En Server Action kan håndtere publicering af en ændring til databasen og underrette alle abonnenter.

Internationaliseringsbetragtninger

Når du udvikler applikationer til et globalt publikum, er det vigtigt at overveje internationalisering (i18n) og lokalisering (l10n). Her er nogle overvejelser for brug af React Server Actions i internationaliserede applikationer:

• Håndtering af forskellige dato- og tidsformater: Brug `Intl` API'en til at formatere datoer og klokkeslæt i henhold til brugerens lokalitet.
• Håndtering af forskellige talformater: Brug `Intl` API'en til at formatere tal i henhold til brugerens lokalitet.
• Håndtering af forskellige valutaer: Brug `Intl` API'en til at formatere valutaer i henhold til brugerens lokalitet.
• Oversættelse af fejlmeddelelser: Oversæt fejlmeddelelser til brugerens sprog.
• Understøttelse af højre-til-venstre (RTL) sprog: Sørg for, at din applikation understøtter RTL-sprog, såsom arabisk og hebraisk.

For eksempel, når du behandler en formular, der kræver en datoinput, kan en Server Action bruge `Intl.DateTimeFormat` API'en til at parse datoen i henhold til brugerens lokalitet, hvilket sikrer, at datoen fortolkes korrekt uanset brugerens regionale indstillinger.

Konklusion

React Server Actions er et kraftfuldt værktøj til at forenkle server-side formularbehandling og datamutationer i React-applikationer. Ved at give dig mulighed for at skrive server-side kode direkte i dine React-komponenter reducerer Server Actions boilerplate-kode, forbedrer sikkerheden, øger ydeevnen og muliggør optimistiske opdateringer. Ved at følge de bedste fremgangsmåder, der er beskrevet i denne guide, kan du udnytte Server Actions til at bygge mere robuste, skalerbare og vedligeholdelige React-applikationer. Efterhånden som React fortsætter med at udvikle sig, vil Server Actions utvivlsomt spille en stadig vigtigere rolle i fremtidens webudvikling.