Server Actions in React 19 und Next.js

Server Actions sind asynchrone Funktionen, die auf dem Server und nicht im Browser ausgeführt werden. Sie werden mit der Direktive 'use server' gekennzeichnet, die am Anfang der Datei oder am Anfang des Funktionskörpers steht. Dadurch wird dem Framework signalisiert, dass diese Funktion niemals auf der Clientseite ausgeführt werden darf.

Da Server Actions auf dem Server ausgeführt werden, haben sie Zugriff auf den vollständigen Serverkontext: Datenbankverbindungen, Umgebungsgeheimnisse, Sitzungsdaten und Ressourcen des Dateisystems. Das unterscheidet sie grundlegend von Client Components, die nur auf das zugreifen können, was der Browser bereitstellt.

Wenn eine Client Component eine Server Action aufruft, stellt Next.js automatisch eine HTTP-POST-Anfrage an einen speziellen RSC-Endpunkt. Das Framework übernimmt die vollständige Serialisierung der Argumente und die Transportschicht, sodass Sie für diese Mutationen niemals manuell fetch()-Aufrufe schreiben müssen.

Server Actions machen API-Routen in vielen Szenarien für Mutationen überflüssig. Die Action selbst ist der Endpunkt: Sie definieren die Logik einmal als serverseitige Funktion und rufen sie direkt aus der Client Component auf, als wäre sie eine lokale Funktion.

Server Actions waren ursprünglich ein Next.js-spezifisches Konzept, aber React 19 macht sie zu einem First-Class-Feature von React. Dadurch können auch Bundler und Frameworks außerhalb von Next.js dasselbe Muster gemäß der React-Spezifikation implementieren.

Server Actions sind in React 19 RC experimentell, aber seit ihrer Einführung im App Router von Next.js 14+ stabil. Wenn Sie heute eine Produktionsanwendung mit dem App Router von Next.js entwickeln, sind Server Actions ein vollständig unterstütztes und empfohlenes Muster.

Eine der wichtigsten Sicherheitseigenschaften von Server Actions besteht darin, dass Geheimnisse niemals den Browser erreichen. Umgebungsvariablen wie Datenbankpasswörter und API-Schlüssel, die innerhalb einer Server Action verwendet werden, werden niemals in das Client-Bundle aufgenommen, da der Funktionskörper nie an den Browser gesendet wird.

HTML-Formularelemente akzeptieren eine Server Action direkt über das action-Attribut: <form action={myServerAction}>. React fängt die Formularübermittlung ab und ruft die Server Action mit den Formulardaten auf. Dadurch werden serverseitige Mutationen ohne clientseitige JavaScript-Verkabelung möglich.

Wenn eine Server Action ausgelöst wird, serialisiert React die Argumente der Action in den Body einer POST-Anfrage. Der Server deserialisiert sie, führt die Funktion aus, serialisiert den Rückgabewert und sendet ihn zurück. Nur serialisierbare Werte (Zeichenketten, Zahlen, Arrays, einfache Objekte) können die Grenze überschreiten.

Sie können eine Server Action auf Modulebene in einer Datei mit 'use server' am Anfang definieren oder sie innerhalb einer Server Component einbetten, indem Sie 'use server' am Anfang der asynchronen Funktion platzieren. Beide Ansätze führen zum gleichen Ergebnis: einer auf dem Server ausführbaren Funktion.

Client Components importieren und rufen Server Actions genauso auf wie gewöhnliche asynchrone Funktionen. Die Aufrufsyntax ist identisch mit dem Aufruf einer lokalen asynchronen Funktion, aber die Ausführung findet vollständig auf dem Server statt. Diese Abstraktion hält Client Components übersichtlich und befreit sie von Fetch-Boilerplate.

Welche der folgenden Aussagen beschreibt das Sicherheitsmodell von Server Actions am besten?

Server Actions sind asynchrone serverseitige Funktionen, die mit 'use server' gekennzeichnet sind. Sie greifen auf den Serverkontext wie Datenbankverbindungen und Umgebungsgeheimnisse zu. Next.js übernimmt den HTTP-Transport automatisch, und React 19 macht sie zu einem frameworkunabhängigen Feature. Formulare können sie direkt über das action-Attribut verwenden, und Geheimnisse innerhalb der Actions erreichen niemals den Browser.