React Academy · Lektion

Server Actions für Datenmutationen

Definieren Sie Funktionen mit 'use server', um Formularmutationen zu verarbeiten und den Cache mit revalidatePath zu invalidieren.

Server Actions für Datenmutationen ist eine kostenlose React Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des React Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der React Academy-Kurs umfasst insgesamt 4 Lektionen.

Was sind Server Actions?

Server Actions sind asynchrone Funktionen mit der Markierung 'use server', die ausschließlich auf dem Server ausgeführt werden. Sie ermöglichen das Absenden von Formularen und Datenmutationen, ohne API-Route-Handler schreiben zu müssen.

Eine Server Action definieren

Fügen Sie am Anfang der Funktion oder Datei 'use server' hinzu, um eine Server Action zu erstellen. Sie kann nur in Server Components oder in dafür vorgesehenen actions.ts-Dateien definiert werden.

// app/actions.ts
'use server';

import { revalidatePath } from 'next/cache';
import { redirect } from 'next/navigation';

export async function createPost(formData: FormData) {
  const title = formData.get('title') as string;
  await db.post.create({ data: { title } });
  revalidatePath('/blog');
  redirect('/blog');
}

Actions in Formularen verwenden

Übergeben Sie die Action-Funktion an die action-Prop eines Formulars. Kein onSubmit, kein Event-Handler — Next.js serialisiert das Formular und ruft die Action serverseitig auf.

import { createPost } from './actions';

export default function NewPostForm() {
  return (
    <form action={createPost}>
      <input name="title" placeholder="Post title" required />
      <button type="submit">Create</button>
    </form>
  );
}

useActionState-Hook

useActionState (React 19) umschließt eine Action, um den ausstehenden Zustand zu verfolgen und den Rückgabewert der Action in der Komponente zu empfangen.

'use client';
import { useActionState } from 'react';
import { createPost } from './actions';

const initialState = { error: null };

export function PostForm() {
  const [state, action, isPending] = useActionState(createPost, initialState);
  return (
    <form action={action}>
      {state.error && <p className="error">{state.error}</p>}
      <input name="title" />
      <button disabled={isPending}>{isPending ? 'Creating...' : 'Create'}</button>
    </form>
  );
}

Validierungsfehler zurückgeben

Geben Sie aus der Action ein Objekt zurück, anstatt einen Fehler auszulösen, um Validierungsfehler über useActionState an das Formular zurückzugeben.

export async function createPost(prevState: any, formData: FormData) {
  'use server';
  const title = formData.get('title') as string;
  if (!title || title.length < 3) {
    return { error: 'Title must be at least 3 characters' };
  }
  await db.post.create({ data: { title } });
  revalidatePath('/blog');
  redirect('/blog');
}

Server Actions in Event-Handlern

Rufen Sie Server Actions aus Event-Handlern von Client Components auf, nicht nur als Formular-Actions, indem Sie sie importieren und direkt aufrufen.

'use client';
import { deletePost } from './actions';

export function DeleteButton({ id }: { id: string }) {
  return (
    <button onClick={() => deletePost(id)}>
      Delete
    </button>
  );
}

Inline-Server-Actions

Definieren Sie Server Actions inline in einer Server Component, indem Sie darin eine Funktion mit 'use server' verwenden — nützlich für direkt am Verwendungsort gebündelte Mutationslogik.

export default function PostPage({ post }) {
  async function updatePost(formData: FormData) {
    'use server';
    await db.post.update({ where: { id: post.id }, data: { title: formData.get('title') as string } });
    revalidatePath(`/blog/${post.id}`);
  }

  return (
    <form action={updatePost}>
      <input name="title" defaultValue={post.title} />
      <button type="submit">Save</button>
    </form>
  );
}

useOptimistic mit Server Actions

Kombinieren Sie useOptimistic mit Server Actions, um die Benutzeroberfläche sofort zu aktualisieren, während die Action im Hintergrund ausgeführt wird.

'use client';
import { useOptimistic } from 'react';
import { addItem } from './actions';

export function TodoList({ items }) {
  const [optimisticItems, addOptimistic] = useOptimistic(items, (state, newItem) => [...state, newItem]);
  return (
    <form action={async (formData) => {
      addOptimistic({ id: 'temp', text: formData.get('text') });
      await addItem(formData);
    }}>
      <ul>{optimisticItems.map(i => <li key={i.id}>{i.text}</li>)}</ul>
      <input name="text" /><button>Add</button>
    </form>
  );
}

Sicherheitsaspekte

Server Actions sind intern POST-Endpunkte. Validieren und bereinigen Sie Eingaben immer serverseitig, prüfen Sie die Authentifizierung und verwenden Sie CSRF-Schutz (Next.js übernimmt dies für denselben Ursprung automatisch).

Nach Mutationen revalidieren

Rufen Sie nach einer Mutation revalidatePath() oder revalidateTag() auf, um die relevanten Caches zu leeren, damit der nächste Seitenaufruf die Änderung widerspiegelt.

Kurztest

Wie übergeben Sie eine Server Action in Next.js App Router an ein Formular?

Zusammenfassung

Server Actions sind asynchrone Funktionen mit 'use server', die Mutationen serverseitig verarbeiten. Verbinden Sie sie über die action-Prop mit Formularen, verfolgen Sie ihren Zustand mit useActionState, geben Sie bei der Validierung Fehler zurück, anstatt sie auszulösen, und revalidieren Sie Caches nach Mutationen.

Häufig gestellte Fragen

Ist die Lektion „Server Actions für Datenmutationen“ kostenlos?

Ja — der vollständige Text von „Server Actions für Datenmutationen“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des React Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der React Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Server Actions für Datenmutationen“?

Definieren Sie Funktionen mit 'use server', um Formularmutationen zu verarbeiten und den Cache mit revalidatePath zu invalidieren. Du übst React Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um React Academy zu starten?

Keine Vorkenntnisse erforderlich. React Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.

Wie lange dauert die Lektion „Server Actions für Datenmutationen“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser React Academy-Lektion Code schreiben und ausführen?

Ja. Jede React Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu React Academy