# Next.js 16 Server Actions 2026: Mutationen, Revalidierung und Interview-Fragen

> Wie Next.js 16 Server Actions Mutationen, Revalidierung, Pending-State, optimistische UI und Sicherheit handhaben – mit den Interview-Fragen zu jedem Konzept.

- Published: 2026-06-24
- Updated: 2026-07-06
- Author: SharpSkill
- Tags: next.js, server-actions, react, mutations, revalidation, interview
- Reading time: 11 min

---

Next.js Server Actions verwandeln eine einfache asynchrone Funktion in einen serverseitigen Mutations-Endpunkt, den ein Formular direkt aufrufen kann – ohne API-Route, ohne Client-`fetch` und ohne manuelle JSON-Serialisierung. In Next.js 16 sind sie der Standardweg, um Daten-Mutationen zu schreiben, und sie tauchen 2026 in nahezu jedem Senior-React-Interview auf. Diese ausführliche Analyse zeigt, wie sie ausgeführt werden, wie Revalidierung frische Daten an die UI weitergibt, wie sich Pending- und Fehlerzustände modellieren lassen und welche Sicherheitsregeln die meisten Entwickler übersehen.

> **Definition in einem Satz**
>
> Eine Server Action ist eine asynchrone Funktion, die mit `"use server"` markiert ist, ausschließlich auf dem Server läuft und aus einer Client-Komponente oder einem Formular heraus aufgerufen werden kann, als wäre sie lokal – während Next.js den Netzwerk-Request, die Serialisierung der Argumente und den CSRF-Schutz automatisch übernimmt.

## Wie Server Actions unter der Haube ausgeführt werden

Eine Server Action ist eine reine Server-Funktion, die über das Netzwerk mithilfe eines vom Compiler generierten Endpunkts aufgerufen wird. Trägt eine Funktion die Direktive `"use server"`, liefert der Next.js-Compiler ihren Rumpf niemals an den Browser aus. Stattdessen ersetzt er die Funktion durch eine leichtgewichtige Referenz: eine gehashte Action-ID, die auf eine generierte POST-Route abgebildet wird. Ein Aufruf der Action vom Client sendet eine Anfrage an diese Route, die eigentliche Funktion läuft auf dem Server, und das serialisierte Ergebnis wird zurück an den Aufrufer gestreamt.

Dieses Design hat drei Konsequenzen, die sich sowohl für Produktionscode als auch für Interviews zu merken lohnen. Erstens müssen Argumente und Rückgabewerte serialisierbar sein, da sie als kodierte Payloads das Netzwerk überqueren. Zweitens bleiben Geheimnisse auf dem Server, weil der Funktionsrumpf niemals für den Client gebündelt wird. Drittens funktionieren Actions, die an ein `<form>` gebunden sind, bereits vor der Hydration – weshalb Progressive Enhancement ein zentrales Verkaufsargument ist. Der offizielle [Next.js-Leitfaden zum Aktualisieren von Daten](https://nextjs.org/docs/app/getting-started/updating-data) dokumentiert das vollständige Ausführungsmodell.

Jede Server Action lebt in einer Datei oder einem Block, der mit `"use server"` markiert ist. Eine einzelne Mutation sieht so aus:

```typescript
// app/posts/actions.ts
"use server"

import { revalidatePath } from "next/cache"
import { redirect } from "next/navigation"
import { PostService } from "@/lib/services/post-service"

export async function createPost(formData: FormData) {
  // FormData values arrive as strings; cast explicitly
  const title = formData.get("title") as string
  const body = formData.get("body") as string

  // Run business logic through the service layer, never the ORM directly
  const post = await PostService.create({ title, body })

  // Purge the cached list so the next request refetches it
  revalidatePath("/posts")

  // Send the user to the freshly created resource
  redirect(`/posts/${post.id}`)
}
```

Die Funktion liest die übermittelten `FormData`, persistiert über einen Service, invalidiert die zwischengespeicherte Liste und leitet weiter. Dafür ist kein Client-JavaScript nötig.

## Eine Server Action ohne Client-JavaScript an ein Formular anbinden

Die Action an das `action`-Prop eines Formulars zu übergeben ist die einfachste Integration. Next.js serialisiert die Übermittlung in `FormData` und ruft die Funktion auf dem Server auf. Da hierbei der native Mechanismus zur Formularübermittlung genutzt wird, funktioniert es auch mit deaktiviertem JavaScript und wird nahtlos aufgewertet, sobald die Seite hydriert.

```tsx
// app/posts/new-post-form.tsx
import { createPost } from "./actions"

export default function NewPostForm() {
  return (
    <form action={createPost}>
      <input name="title" required />
      <textarea name="body" required />
      <button type="submit">Publish</button>
    </form>
  )
}
```

Das `name`-Attribut jedes Felds wird zum Schlüssel, den `formData.get()` ausliest. Die [MDN-Referenz zu FormData](https://developer.mozilla.org/en-US/docs/Web/API/FormData) erklärt, wie der Browser dieses Objekt aus dem Formular zusammensetzt. Für feinere Kontrolle erweitert `next/form` das native Element um clientseitige Navigation und Prefetching, während der gleiche action-basierte Vertrag erhalten bleibt.

## Pending- und Fehlerzustände mit useActionState verwalten

Echte Formulare brauchen Validierungs-Feedback und eine Ladeanzeige. Der React-19-Hook `useActionState` umschließt eine Server Action, fädelt einen Zustandswert durch jede Übermittlung und stellt ein `isPending`-Flag bereit. Er ersetzt die ältere Bezeichnung `useFormState` und gibt ein Tupel aus dem aktuellen Zustand, einer umschlossenen Action und dem Pending-Boolean zurück.

```tsx
// app/posts/new-post-form.tsx
"use client"

import { useActionState } from "react"
import { createPost } from "./actions"

const initialState = { error: "" }

export default function NewPostForm() {
  // state carries the last return value; isPending tracks the in-flight request
  const [state, formAction, isPending] = useActionState(createPost, initialState)

  return (
    <form action={formAction}>
      <input name="title" required />
      <textarea name="body" required />
      {state.error ? <p role="alert">{state.error}</p> : null}
      <button type="submit" disabled={isPending}>
        {isPending ? "Publishing..." : "Publish"}
      </button>
    </form>
  )
}
```

Sobald ein Hook die Action steuert, erhält die Funktionssignatur einen ersten Parameter `prevState` vor `FormData`. Ein Objekt zurückzugeben, anstatt eine Exception zu werfen, erlaubt der Komponente, Inline-Validierung ohne Error Boundary zu rendern:

```typescript
// app/posts/actions.ts
"use server"

import { revalidateTag } from "next/cache"
import { PostService } from "@/lib/services/post-service"

type FormState = { error: string }

export async function createPost(
  prevState: FormState,
  formData: FormData,
): Promise<FormState> {
  const title = formData.get("title") as string

  // Validate on the server; client validation is never trustworthy alone
  if (!title || title.length < 3) {
    return { error: "Title must be at least 3 characters." }
  }

  await PostService.create({ title })

  // Invalidate by tag rather than path for finer-grained control
  revalidateTag("posts")
  return { error: "" }
}
```

Die [useActionState-Referenz auf react.dev](https://react.dev/reference/react/useActionState) behandelt fortgeschrittene Muster wie die Permalink-Unterstützung für Übermittlungen vor der Hydration. Strukturierten Zustand zurückzugeben hält den Erfolgs- und den Fehlerpfad an einer einzigen vorhersehbaren Stelle.

## revalidatePath vs. revalidateTag: die richtige Invalidierung wählen

Eine Mutation ist nur die halbe Arbeit; die UI muss sie widerspiegeln. Next.js stellt zwei Invalidierungsfunktionen aus `next/cache` bereit, und die richtige zu wählen ist ein häufiges Unterscheidungskriterium im Interview.

| Funktion | Invalidiert | Am besten, wenn |
|----------|-------------|-----------|
| `revalidatePath("/posts")` | Jeden zwischengespeicherten Eintrag einer Route | Die Mutation betrifft eine klar umrissene Seite oder ein Layout |
| `revalidateTag("posts")` | Jeden zwischengespeicherten Fetch mit diesem Tag | Dieselben Daten erscheinen über mehrere Routen hinweg |

`revalidatePath` ist grob und routenzentriert: Es leert den Cache für eine URL und deren Layout-Baum. `revalidateTag` ist granular und datenzentriert: Jeder `fetch` oder jede zwischengespeicherte Funktion, die mit dem String getaggt ist, wird überall dort geleert, wo sie vorkommt. Tags skalieren in großen Anwendungen besser, weil eine einzige Mutation eine Sidebar, eine Liste und eine Detailseite in einem einzigen Aufruf auffrischen kann. Beide Funktionen markieren Daten als veraltet, statt sie sofort neu abzurufen – der nächste Request regeneriert also den Inhalt.

Mit den Cache Components von Next.js 16 integriert sich das Tagging über die Direktive `"use cache"` mit `cacheTag`, was verändert, wie Caching in der gesamten Anwendung durchdacht wird. Dieses Zusammenspiel wird ausführlich im [Leitfaden zu den Cache Components von Next.js 16](/blog/react-next/nextjs-16-cache-components-use-cache-ppr-interview-questions) auf SharpSkill behandelt.

## Optimistische UI-Updates mit useOptimistic

Netzwerk-Roundtrips fügen spürbare Latenz hinzu. Der Hook `useOptimistic` rendert das erwartete Ergebnis sofort und gleicht es dann mit der Serverantwort ab, sobald die Action aufgelöst ist. Er nimmt den aktuellen Zustand und einen Reducer entgegen, der die optimistische Version erzeugt.

```tsx
// app/posts/like-button.tsx
"use client"

import { useOptimistic } from "react"
import { likePost } from "./actions"

export function LikeButton({ postId, likes }: { postId: string; likes: number }) {
  // optimisticLikes updates before the server confirms
  const [optimisticLikes, addOptimisticLike] = useOptimistic(
    likes,
    (current) => current + 1,
  )

  async function handleLike() {
    addOptimisticLike(null) // update the UI immediately
    await likePost(postId)  // then run the real mutation
  }

  return (
    <form action={handleLike}>
      <button type="submit">Like ({optimisticLikes})</button>
    </form>
  )
}
```

Schlägt die Action fehl, setzt React den optimistischen Wert automatisch auf den bestätigten Serverzustand zurück, sodass kein manuelles Rollback nötig ist. Die [useOptimistic-Referenz auf react.dev](https://react.dev/reference/react/useOptimistic) beschreibt im Detail, wie der Abgleichzyklus mit Transitions zusammenspielt. Dieses Muster lässt Formulare mit Server Actions so reaktionsschnell wirken wie eine vollständig clientseitig gerenderte SPA.

## Argumente binden und Actions aus Event-Handlern aufrufen

Nicht jede Mutation entspringt einer Formularübermittlung. Das Löschen einer Zeile, das Umschalten einer Einstellung oder das Neuanordnen einer Liste wird oft durch einen Button-Klick oder ein anderes Event ausgelöst. Eine Server Action ist auf dem Client eine ganz normale Funktionsreferenz und kann daher aus jedem Handler aufgerufen werden – vorausgesetzt, der Aufruf läuft innerhalb einer Transition, um die UI reaktionsfähig zu halten.

Zusätzliche Argumente, die keine Formularfelder sind, werden mit `bind` angehängt, wodurch eine neue Action mit diesen vorangestellten Werten entsteht. Das ist der idiomatische Weg, eine ID neben den übermittelten `FormData` zu übergeben.

```tsx
// app/posts/post-actions.tsx
"use client"

import { useTransition } from "react"
import { deletePost, updatePost } from "./actions"

export function PostActions({ postId }: { postId: string }) {
  const [isPending, startTransition] = useTransition()

  // Bind the id so the action receives it before FormData
  const updateWithId = updatePost.bind(null, postId)

  return (
    <div>
      <form action={updateWithId}>
        <input name="title" />
        <button type="submit">Save</button>
      </form>

      {/* Event-handler invocation wrapped in a transition */}
      <button
        onClick={() => startTransition(() => deletePost(postId))}
        disabled={isPending}
      >
        {isPending ? "Deleting..." : "Delete"}
      </button>
    </div>
  )
}
```

Gebundene Argumente werden wie jeder andere umschlossene Wert verschlüsselt, sodass die `postId` unterwegs nicht manipuliert wird – die Action muss dennoch bestätigen, dass der Aufrufer berechtigt ist, auf diesen Datensatz zuzugreifen. Den direkten Aufruf in `startTransition` zu kapseln erlaubt React, die Oberfläche interaktiv zu halten und den Pending-Zustand ohne Formular-Wrapper offenzulegen.

## Sicherheit von Server Actions: jede Action als öffentliche API behandeln

Das gefährlichste Missverständnis ist, eine Server Action sei privat, weil sie neben Server-Code geschrieben wird. In Wirklichkeit generiert Next.js, sobald eine Action verwendet wird, einen öffentlichen POST-Endpunkt, den jeder mit einer präparierten Anfrage aufrufen kann. Das Framework stellt sichere Action-IDs bereit und entfernt ungenutzte Actions während `next build` – es autorisiert jedoch nicht den Aufrufer.

> **In jeder Action autorisieren**
>
> Server Actions sind erreichbare HTTP-Endpunkte. Session-Prüfungen in einem Layout oder in Middleware schützen sie nicht, weil ein Angreifer direkt an die Action POSTen kann. Die Session und die Berechtigungen des Aufrufers müssen innerhalb des Action-Rumpfs geprüft werden, bevor Daten berührt werden.

```typescript
// app/admin/actions.ts
"use server"

import { auth } from "@/lib/auth"
import { headers } from "next/headers"
import { UserService } from "@/lib/services/user-service"

export async function deleteUser(userId: string) {
  // Authenticate on every invocation, not in a wrapper component
  const session = await auth.api.getSession({ headers: await headers() })
  if (!session || session.user.role !== "admin") {
    throw new Error("Unauthorized")
  }

  await UserService.delete(userId)
}
```

Zwei weitere Regeln sind wichtig. Von einer Inline-Action umschlossene Werte werden verschlüsselt, bevor sie an den Client gesendet und auf dem Server wieder entschlüsselt werden, sodass ein erfasstes Token nicht im Klartext offengelegt wird – sich darauf zu verlassen ist jedoch fragil: Geheimnisse gehören grundsätzlich nicht in Closures. Und jedes Argument, das vom Client kommt, ist nicht vertrauenswürdige Eingabe und muss validiert werden, genau wie ein REST-Body. Der [Next.js-Leitfaden zur Datensicherheit](https://nextjs.org/docs/app/guides/data-security) formalisiert das Taint-Modell hinter diesen Garantien. Für strukturierte Übung zu diesen Abwägungen trainiert das [Interview-Modul zu Next.js Server Actions](/technologies/react-next/interview-questions/nextjs-server-actions) auf SharpSkill genau die Fragen, die Auswahlgremien stellen.

## Next.js 16 Server Actions: Interview-Fragen

Diese Fragen tauchen 2026 in Senior-Runden für React und Full-Stack immer wieder auf.

**Warum kann eine Server Action nur serialisierbare Werte annehmen und zurückgeben?** Weil Argumente und Ergebnisse die Netzwerkgrenze zwischen Client und Server als kodierte Payloads überqueren. Funktionen, Klasseninstanzen und DOM-Knoten lassen sich nicht serialisieren, sodass ihre Übergabe eine Exception wirft. `FormData`, einfache Objekte, Arrays und Primitive sind unbedenklich.

**Wie funktioniert Progressive Enhancement mit Server Actions?** Wird eine Action direkt an das `action`-Prop eines Formulars übergeben, sendet der Browser das Formular nativ per POST-Request ab – bereits bevor React hydriert. Next.js fängt den Request ab und führt die Action serverseitig aus, sodass das Formular ohne Client-JavaScript funktioniert und nach der Hydration zu einer clientgesteuerten Erfahrung aufgewertet wird.

**Was ist der Unterschied zwischen dem Werfen und dem Zurückgeben eines Fehlers in einer Action?** Ein geworfener Fehler propagiert zur nächstgelegenen Error Boundary und ist bei unerwarteten Fehlern richtig. Ein strukturiertes Zustandsobjekt über `useActionState` zurückzugeben ist bei erwarteten Validierungsfehlern richtig, die inline gerendert werden sollen, ohne das Formular auszuhängen.

**Ruft `revalidatePath` Daten sofort neu ab?** Nein. Es markiert die zwischengespeicherten Einträge als veraltet, sodass der nächste Request sie regeneriert. Die aktuelle Antwort bleibt unberührt – deshalb landet ein Redirect nach einer Mutation auf frisch gerendertem Inhalt.

Für den umfassenderen Rendering-Kontext, in dem diese Mutationen laufen, passt die Analyse [React 19 Server Components in der Produktion](/blog/react-next/react-19-server-components-production) natürlich zum Wissen über Server Actions.

## Fazit

Die Server Actions von Next.js 16 bündeln Mutationen, Revalidierung und Progressive Enhancement in einem einzigen server-first-Primitiv. Die wichtigsten Erkenntnisse:

- Mutationen mit `"use server"` markieren und an das `action`-Prop eines Formulars übergeben, um Netzwerk-Handling und Progressive Enhancement kostenlos zu erhalten.
- Pending- und Validierungszustand mit `useActionState` steuern und bei erwarteten Fehlern ein strukturiertes Objekt zurückgeben, statt eine Exception zu werfen.
- `revalidatePath` verwenden, wenn sich eine Route ändert, und `revalidateTag`, wenn dieselben Daten über mehrere Routen verteilt sind.
- `useOptimistic` nutzen, um das erwartete Ergebnis sofort zu rendern und React automatisch abgleichen oder zurückrollen zu lassen.
- Innerhalb jedes Action-Rumpfs autorisieren und validieren, denn jede verwendete Action ist ein öffentlicher HTTP-Endpunkt, den Middleware allein nicht schützt.

---

Source: SharpSkill (https://sharpskill.dev), tech interview preparation for your real stack.
HTML version of this page: https://sharpskill.dev/de/blog/react-next/nextjs-16-server-actions-mutations-revalidation-interview-questions