Server Actions i React 19 og Next.js

Server Actions er asynkrone funksjoner som kjøres på serveren, ikke i nettleseren. De markeres med 'use server'-direktivet, plassert øverst i filen eller øverst i funksjonskroppen, som signaliserer til rammeverket at funksjonen aldri må kjøres på klientsiden.

Fordi Server Actions kjøres på serveren, har de tilgang til hele serverkonteksten: databasetilkoblinger, miljøhemmeligheter, øktdata og filsystemressurser. Dette er grunnleggende forskjellig fra klientkomponenter, som bare har tilgang til det nettleseren eksponerer.

Når en klientkomponent kaller en Server Action, oppretter Next.js automatisk en HTTP POST-forespørsel til et spesielt RSC-endepunkt. Rammeverket håndterer all serialisering av argumentene og transportlaget, så du trenger aldri å skrive fetch()-kall manuelt for disse mutasjonene.

Server Actions erstatter behovet for API-ruter i mange scenarier som involverer mutasjoner. Selve Server Action-en er endepunktet — du definerer logikken én gang som en serverfunksjon og kaller den direkte fra klientkomponenten som om den var en lokal funksjon.

Server Actions var opprinnelig et Next.js-spesifikt konsept, men React 19 gjør dem til en førsteklasses React-funksjon. Det betyr at andre pakkebyggere og rammeverk enn Next.js kan implementere det samme mønsteret i henhold til React-spesifikasjonen.

Server Actions er eksperimentelle i React 19 RC, men har vært stabile i Next.js 14+ App Router siden de ble introdusert. Hvis du bygger en produksjonsapplikasjon med Next.js App Router i dag, er Server Actions et fullt støttet og anbefalt mønster.

En av de viktigste sikkerhetsegenskapene ved Server Actions er at hemmeligheter aldri når nettleseren. Miljøvariabler som databasepassord og API-nøkler brukt i en Server Action blir aldri inkludert i klientpakken, fordi funksjonskroppen aldri sendes til nettleseren.

HTML-skjem elementer kan motta en Server Action direkte via action-attributtet: <form action={myServerAction}>. React fanger opp innsendingen og kaller Server Action-en med skjemadataene, slik at mutasjoner på serversiden blir mulig uten noe JavaScript-oppsett på klientsiden.

Når en Server Action utløses, serialiserer React action-argumentene til en POST-forespørselskropp. Serveren deserialiserer dem, kjører funksjonen, serialiserer returverdien og sender den tilbake. Bare serialiserbare verdier (strenger, tall, arrayer og vanlige objekter) kan krysse grensen.

Du kan definere en Server Action på modulnivå i en fil som har 'use server' øverst, eller innebygd i en Server Component ved å plassere 'use server' øverst i den asynkrone funksjonen. Begge fremgangsmåtene gir samme resultat: en funksjon som bare kan kalles på serveren.

Klientkomponenter importerer og kaller Server Actions på samme måte som vanlige asynkrone funksjoner. Kallsyntaksen er identisk med et lokalt kall til en asynkron funksjon, men kjøringen skjer utelukkende på serveren. Denne abstraksjonen holder klientkomponentene ryddige og fri for overflødig fetch-kode.

Server Actions er asynkrone funksjoner på serversiden som er merket med 'use server'. De har tilgang til serverkontekst som databasetilkoblinger og miljøhemmeligheter. Next.js håndterer HTTP-transporten automatisk, og React 19 gjør dem til en rammeverksuavhengig funksjon. Skjemaer kan bruke dem direkte via action-attributtet, og hemmeligheter i dem når aldri nettleseren.