Server Actions i React 19 og Next.js

Server Actions er asynkrone funktioner, der udføres på serveren og ikke i browseren. De markeres med direktivet 'use server', som placeres øverst i filen eller øverst i funktionens brødtekst. Det fortæller rammeværket, at funktionen aldrig må køre på klientsiden.

Da Server Actions kører på serveren, har de adgang til hele serverkonteksten: databaseforbindelser, miljøhemmeligheder, sessionsdata og filsystemressourcer. Det er grundlæggende anderledes end klientkomponenter, som kun kan få adgang til det, browseren eksponerer.

Når en klientkomponent kalder en Server Action, opretter Next.js automatisk en HTTP POST-anmodning til et særligt RSC-slutpunkt. Rammeværket håndterer al serialisering af argumenter og transportlaget, så du aldrig selv skal skrive fetch()-kald til disse ændringer.

Server Actions erstatter behovet for API-ruter i mange scenarier, hvor data skal ændres. Handlingen selv er slutpunktet — du definerer logikken én gang som en serverfunktion og kalder den direkte fra klientkomponenten, som om den var en lokal funktion.

Server Actions var oprindeligt et Next.js-specifikt koncept, men React 19 løfter dem til en førsteklasses React-funktion. Det betyder, at bundlere og andre rammeværker end Next.js kan implementere det samme mønster i overensstemmelse med React-specifikationen.

Server Actions er eksperimentelle i React 19 RC, men har været stabile i Next.js 14+ App Router siden deres introduktion. Hvis du bygger en produktionsapplikation med Next.js App Router i dag, er Server Actions et fuldt understøttet og anbefalet mønster.

En af de vigtigste sikkerhedsegenskaber ved Server Actions er, at hemmeligheder aldrig når browseren. Miljøvariabler som databaseadgangskoder og API-nøgler, der bruges i en Server Action, inkluderes aldrig i klientbundtet, fordi funktionskroppen aldrig sendes til browseren.

HTML-formularelementer accepterer en Server Action direkte via action-attributten: <form action={myServerAction}>. React opfanger formularafsendelsen og kalder Server Action med formulardataene, så du kan ændre data på serversiden uden ekstra JavaScript-kode på klientsiden.

Når en Server Action udløses, serialiserer React argumenterne til indholdet af en POST-anmodning. Serveren deserialiserer dem, udfører funktionen, serialiserer returværdien og sender den tilbage. Kun serialiserbare værdier (strenge, tal, arrays, simple objekter) kan krydse grænsen.

Du kan definere en Server Action på modulniveau i en fil med 'use server' øverst eller skrive den direkte i en Server Component ved at placere 'use server' øverst i den asynkrone funktion. Begge metoder giver det samme resultat: en kaldbar funktion, der kun kan køre på serveren.

Klientkomponenter importerer og kalder Server Actions ligesom almindelige asynkrone funktioner. Kaldsyntaksen er identisk med et kald til en lokal asynkron funktion, men udførelsen sker udelukkende på serveren. Denne abstraktion holder klientkomponenterne enkle og fri for gentagen fetch-standardkode.

Server Actions er asynkrone funktioner på serversiden, der er markeret med 'use server'. De har adgang til serverkontekst som databaseforbindelser og miljøhemmeligheder. Next.js håndterer HTTP-transporten automatisk, og React 19 gør dem til en rammeværksuafhængig funktion. Formularer kan bruge dem direkte via attributten action, og hemmeligheder i dem når aldrig browseren.