Server Actions in React 19 en Next.js

Server Actions zijn asynchrone functies die op de server worden uitgevoerd, niet in de browser. Ze worden gemarkeerd met de instructie 'use server' die bovenaan het bestand of bovenaan het functieblok staat. Daarmee geef je het raamwerk aan dat deze functie nooit aan clientzijde mag worden uitgevoerd.

Omdat Server Actions op de server worden uitgevoerd, hebben ze toegang tot de volledige servercontext: databaseverbindingen, omgevingsgeheimen, sessiegegevens en bestandssysteembronnen. Dit verschilt fundamenteel van clientcomponenten, die alleen toegang hebben tot wat de browser beschikbaar stelt.

Wanneer een clientcomponent een Server Action aanroept, maakt Next.js automatisch een HTTP POST-verzoek naar een speciaal RSC-eindpunt. Het framework handelt alle serialisatie van argumenten en de transportlaag af, zodat je voor deze mutaties nooit zelf fetch()-aanroepen hoeft te schrijven.

Server Actions maken API-routes in veel situaties waarin je gegevens wijzigt overbodig. De actie zelf is het eindpunt: je definieert de logica één keer als serverfunctie en roept die rechtstreeks aan vanuit de clientcomponent, alsof het een lokale functie is.

Server Actions waren aanvankelijk een specifiek Next.js-concept, maar React 19 maakt ze tot een volwaardige React-functie. Dit betekent dat bundelaars en frameworks anders dan Next.js hetzelfde patroon kunnen implementeren volgens de React-specificatie.

Server Actions zijn experimenteel in React 19 RC, maar zijn sinds hun introductie stabiel in de App Router van Next.js 14 en hoger. Als je vandaag met de App Router van Next.js een toepassing voor productie bouwt, zijn Server Actions een volledig ondersteund en aanbevolen patroon.

Een van de belangrijkste beveiligingseigenschappen van Server Actions is dat geheimen nooit de browser bereiken. Omgevingsvariabelen zoals databasewachtwoorden en API-sleutels die binnen een Server Action worden gebruikt, worden nooit opgenomen in de clientbundel, omdat de functiebody nooit naar de browser wordt verzonden.

HTML-formulierelementen accepteren rechtstreeks een Server Action via het action-attribuut: <form action={myServerAction}>. React onderschept het verzenden van het formulier en roept de Server Action aan met de formuliergegevens, waardoor je gegevens op de server kunt wijzigen zonder extra JavaScript-logica aan de clientkant.

Wanneer een Server Action wordt geactiveerd, serialiseert React de actieargumenten naar de body van een POST-verzoek. De server deserialiseert ze, voert de functie uit, serialiseert de geretourneerde waarde en stuurt die terug. Alleen serialiseerbare waarden, zoals tekenreeksen, getallen, arrays en eenvoudige objecten, kunnen de grens oversteken.

Je kunt een Server Action op moduleniveau definiëren in een bestand met bovenaan 'use server', of inline in een Server Component door 'use server' bovenaan de asynchrone functie te plaatsen. Beide benaderingen leveren hetzelfde resultaat op: een aanroepbare functie die alleen op de server werkt.

Clientcomponenten importeren Server Actions en roepen ze aan net als gewone asynchrone functies. De aanroepsyntaxis is identiek aan die van een lokale asynchrone functie, maar de uitvoering vindt volledig op de server plaats. Dankzij deze abstractie blijven clientcomponenten overzichtelijk en vrij van overbodige fetch-code.

Server Actions zijn asynchrone functies aan de serverkant die zijn gemarkeerd met 'use server'. Ze sluiten servercontext zoals databaseverbindingen en omgevingsgeheimen in. Next.js handelt het HTTP-transport automatisch af en React 19 maakt ze tot een frameworkonafhankelijke functie. Formulieren kunnen ze rechtstreeks gebruiken via het action-attribuut en geheimen erin bereiken nooit de browser.