M

MLOG

Norsk

Utforsk React Server Actions, en kraftig funksjon for å håndtere skjemainnsendinger og datamuteringer direkte på serveren, noe som forenkler React-utvikling og øker sikkerheten.

React Server Actions: Forenklet Skjemabehandling på Serversiden

React Server Actions, introdusert i React 18 og betydelig forbedret i Next.js, tilbyr en revolusjonerende tilnærming til håndtering av skjemainnsendinger og datamuteringer direkte på serveren. Denne kraftige funksjonen forenkler utviklingsprosessen, øker sikkerheten og forbedrer ytelsen sammenlignet med tradisjonell datahenting og -manipulering på klientsiden.

Hva er React Server Actions?

Server Actions er asynkrone funksjoner som kjører på serveren og kan kalles direkte fra React-komponenter. De lar deg utføre server-side oppgaver, som for eksempel:

Hovedfordelen med Server Actions er at de lar deg skrive server-side kode innenfor dine React-komponenter, noe som eliminerer behovet for separate API-ruter og kompleks logikk for datahenting på klientsiden. Denne samlokaliseringen av brukergrensesnitt og server-side logikk fører til en mer vedlikeholdbar og effektiv kodebase.

Fordeler med å Bruke React Server Actions

Å bruke React Server Actions gir flere betydelige fordeler:

Forenklet Utvikling

Server Actions reduserer mengden standardkode ved å la deg håndtere skjemainnsendinger og datamuteringer direkte i dine React-komponenter. Dette eliminerer behovet for separate API-endepunkter og kompleks logikk for datahenting på klientsiden, noe som effektiviserer utviklingsprosessen og gjør koden din enklere å forstå og vedlikeholde. Tenk på et enkelt kontaktskjema. Uten Server Actions ville du trengt en egen API-rute for å håndtere skjemainnsendingen, JavaScript på klientsiden for å sende dataene, og feilhåndteringslogikk både på klienten og serveren. Med Server Actions kan alt dette håndteres i selve komponenten.

Forbedret Sikkerhet

Ved å kjøre kode på serveren, reduserer Server Actions angrepsflaten til applikasjonen din. Sensitiv data og forretningslogikk holdes unna klienten, noe som forhindrer ondsinnede brukere i å manipulere dem. For eksempel blir database-legitimasjon eller API-nøkler aldri eksponert i klientsidekoden. All databaseinteraksjon skjer på serveren, noe som minimerer risikoen for SQL-injeksjon eller uautorisert datatilgang.

Forbedret Ytelse

Server Actions kan forbedre ytelsen ved å redusere mengden JavaScript som må lastes ned og kjøres på klienten. Dette er spesielt gunstig for brukere på enheter med lav ytelse eller med trege internettforbindelser. Databehandling skjer på serveren, og kun de nødvendige UI-oppdateringene sendes til klienten, noe som resulterer i raskere sidelasting og en jevnere brukeropplevelse.

Optimistiske Oppdateringer

Server Actions integreres sømløst med Reacts Suspense og Transitions, noe som muliggjør optimistiske oppdateringer. Optimistiske oppdateringer lar deg oppdatere brukergrensesnittet umiddelbart, selv før serveren har bekreftet handlingen. Dette gir en mer responsiv og engasjerende brukeropplevelse, ettersom brukerne ikke trenger å vente på at serveren skal svare før de ser resultatene av sine handlinger. I netthandel kan det å legge en vare i handlekurven vises umiddelbart mens serveren bekrefter tillegget i bakgrunnen.

Progressiv Forbedring

Server Actions støtter progressiv forbedring, noe som betyr at applikasjonen din fortsatt kan fungere selv om JavaScript er deaktivert eller ikke klarer å laste. Når JavaScript er deaktivert, vil skjemaer sendes inn som tradisjonelle HTML-skjemaer, og serveren vil håndtere innsendingen og omdirigere brukeren til en ny side. Dette sikrer at applikasjonen din forblir tilgjengelig for alle brukere, uavhengig av deres nettleserkonfigurasjon eller nettverksforhold. Dette er spesielt viktig for tilgjengelighet og SEO.

Hvordan Bruke React Server Actions

For å bruke React Server Actions, må du bruke et rammeverk som støtter dem, som for eksempel Next.js. Her er en trinn-for-trinn-guide:

1. Definer Server Action

Lag en asynkron funksjon som skal kjøre på serveren. Denne funksjonen skal håndtere logikken du ønsker å utføre på serveren, som for eksempel å oppdatere en database eller kalle et API. Merk funksjonen med `"use server"`-direktivet øverst for å indikere at det er en Server Action. Dette direktivet forteller React-kompilatoren at den skal behandle funksjonen som en server-side-funksjon og automatisk håndtere serialisering og deserialisering av data mellom 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('/'); // Tøm rute-cachen
    return { message: 'Melding lagret!' };
  } catch (e) {
    return { message: 'Kunne ikke lagre melding' };
  }
}

Forklaring:

2. Importer og Bruk Server Action i Komponenten Din

Importer Server Action inn i React-komponenten din og bruk den som `action`-prop på et skjemaelement. `useFormState`-hooken kan brukes til å håndtere skjemaets tilstand og vise tilbakemelding til brukeren.

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

  );
}

Forklaring:

3. Håndter Skjemadata

Inne i Server Action kan du få tilgang til skjemadataene ved å bruke `FormData`-API-et. Dette API-et gir en praktisk måte å få tilgang til verdiene i skjemafeltene på.

'use server'

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

  // ...
}

4. Håndter Feil

Bruk `try...catch`-blokker for å håndtere feil som kan oppstå under utførelsen av Server Action. Returner en feilmelding i tilstandsobjektet for å vise den til brukeren.

'use server'

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

  try {
    // ...
  } catch (e) {
    return { message: 'Kunne ikke lagre melding' };
  }
}

5. Revalider Data

Etter at en Server Action har mutert data, kan det være nødvendig å revalidere databufferen (cache) for å sikre at brukergrensesnittet reflekterer de siste endringene. Bruk `revalidatePath`- eller `revalidateTag`-funksjonene fra `next/cache` for å revalidere spesifikke stier eller tagger.

'use server'

import { revalidatePath } from 'next/cache';

export async function createMessage(prevState, formData) {
  // ...
  revalidatePath('/'); // Tøm rute-cachen
  // ...
}

Avansert Bruk

Mutering av Data

Server Actions er spesielt godt egnet for å mutere data, som å oppdatere databaser eller eksterne API-er. Du kan bruke Server Actions til å håndtere komplekse datamuteringer som krever server-side logikk, som å validere data, utføre beregninger eller samhandle med flere datakilder. Tenk deg et scenario der du trenger å oppdatere en brukers profil og sende en bekreftelses-e-post. En Server Action kan håndtere både databaseoppdateringen og e-postutsendingen i en enkelt, atomisk operasjon.

Autentisering og Autorisering

Server Actions kan brukes til å håndtere autentisering og autorisering. Ved å utføre autentiserings- og autorisasjonskontroller på serveren, kan du sikre at kun autoriserte brukere har tilgang til sensitive data og funksjonalitet. Du kan bruke Server Actions til å håndtere brukerinnlogging, registrering og tilbakestilling av passord. For eksempel kan en Server Action verifisere brukerlegitimasjon mot en database og returnere et token som kan brukes til å autentisere påfølgende forespørsler.

Edge-funksjoner

Server Actions kan distribueres som Edge-funksjoner, som kjører på et globalt nettverk av servere nær brukerne dine. Dette kan redusere ventetid (latency) betydelig og forbedre ytelsen, spesielt for brukere på geografisk spredte steder. Edge-funksjoner er ideelle for å håndtere Server Actions som krever lav ventetid, som sanntidsdataoppdateringer eller personalisert innholdslevering. Next.js gir innebygd støtte for å distribuere Server Actions som Edge-funksjoner.

Streaming

Server Actions støtter streaming, som lar deg sende data til klienten i biter etter hvert som de blir tilgjengelige. Dette kan forbedre den opplevde ytelsen til applikasjonen din, spesielt for Server Actions som tar lang tid å utføre. Streaming er spesielt nyttig for å håndtere store datasett eller komplekse beregninger. For eksempel kan du streame søkeresultater til klienten etter hvert som de hentes fra databasen, noe som gir en mer responsiv brukeropplevelse.

Beste Praksis

Her er noen beste praksiser å følge når du bruker React Server Actions:

Eksempler fra den Virkelige Verden

La oss se på noen eksempler fra den virkelige verden på hvordan React Server Actions kan brukes i ulike typer applikasjoner:

E-handelsapplikasjon

Applikasjon for Sosiale Medier

Innholdsstyringssystem (CMS)

Hensyn til Internasjonalisering

Når man utvikler applikasjoner for et globalt publikum, er det viktig å vurdere internasjonalisering (i18n) og lokalisering (l10n). Her er noen hensyn for bruk av React Server Actions i internasjonaliserte applikasjoner:

For eksempel, ved behandling av et skjema som krever en dato, kan en Server Action bruke `Intl.DateTimeFormat`-API-et for å parse datoen i henhold til brukerens locale, og dermed sikre at datoen tolkes korrekt uavhengig av brukerens regionale innstillinger.

Konklusjon

React Server Actions er et kraftig verktøy for å forenkle server-side skjemabehandling og datamuteringer i React-applikasjoner. Ved å la deg skrive server-side kode direkte i dine React-komponenter, reduserer Server Actions standardkode, øker sikkerheten, forbedrer ytelsen og muliggjør optimistiske oppdateringer. Ved å følge beste praksis som beskrevet i denne guiden, kan du utnytte Server Actions til å bygge mer robuste, skalerbare og vedlikeholdbare React-applikasjoner. Ettersom React fortsetter å utvikle seg, vil Server Actions utvilsomt spille en stadig viktigere rolle i fremtidens webutvikling.