Datenaktualisierung durchführen

Sie können Daten in Next.js mit Reacts Server-Funktionen (Server Functions) aktualisieren. Diese Seite erklärt, wie Sie Server-Funktionen erstellen und aufrufen können.

Server-Funktionen

Eine Server-Funktion ist eine asynchrone Funktion, die auf dem Server ausgeführt wird. Server-Funktionen sind inhärent asynchron, da sie vom Client über eine Netzwerkanfrage aufgerufen werden. Wenn sie als Teil einer action aufgerufen werden, werden sie auch Server-Aktionen (Server Actions) genannt.

Per Konvention ist eine action eine asynchrone Funktion, die an startTransition übergeben wird. Server-Funktionen werden automatisch mit startTransition umschlossen, wenn:

Sie über die action-Prop an ein <form> übergeben werden,
Sie über die formAction-Prop an einen <button> übergeben werden
Sie an useActionState übergeben werden

Erstellen von Server-Funktionen

Eine Server-Funktion kann mit der use server-Direktive definiert werden. Sie können die Direktive am Anfang einer asynchronen Funktion platzieren, um die Funktion als Server-Funktion zu markieren, oder am Anfang einer separaten Datei, um alle Exporte dieser Datei zu markieren.

export async function createPost(formData: FormData) {
  'use server'
  const title = formData.get('title')
  const content = formData.get('content')

  // Daten aktualisieren
  // Cache neu validieren
}

export async function deletePost(formData: FormData) {
  'use server'
  const id = formData.get('id')

  // Daten aktualisieren
  // Cache neu validieren
}

export async function createPost(formData) {
  'use server'
  const title = formData.get('title')
  const content = formData.get('content')

  // Daten aktualisieren
  // Cache neu validieren
}

export async function deletePost(formData) {
  'use server'
  const id = formData.get('id')

  // Daten aktualisieren
  // Cache neu validieren
}

Server-Komponenten

Server-Funktionen können in Server-Komponenten inline definiert werden, indem die "use server"-Direktive am Anfang des Funktionskörpers hinzugefügt wird:

export default function Page() {
  // Server-Aktion
  async function createPost(formData: FormData) {
    'use server'
    // ...
  }

  return <></>
}

export default function Page() {
  // Server-Aktion
  async function createPost(formData: FormData) {
    'use server'
    // ...
  }

  return <></>
}

Client-Komponenten

Es ist nicht möglich, Server-Funktionen in Client-Komponenten zu definieren. Sie können sie jedoch in Client-Komponenten aufrufen, indem Sie sie aus einer Datei importieren, die die "use server"-Direktive am Anfang enthält:

'use server'

export async function createPost() {}

'use server'

export async function createPost() {}

'use client'

import { createPost } from '@/app/actions'

export function Button() {
  return <button formAction={createPost}>Erstellen</button>
}

'use client'

import { createPost } from '@/app/actions'

export function Button() {
  return <button formAction={createPost}>Erstellen</button>
}

Aufrufen von Server-Funktionen

Es gibt zwei Hauptmethoden, um eine Server-Funktion aufzurufen:

Formulare in Server- und Client-Komponenten
Ereignishandler (Event Handlers) in Client-Komponenten

Formulare

React erweitert das HTML-<form>-Element, um den Aufruf von Server-Funktionen mit der HTML-action-Prop zu ermöglichen.

Wenn eine Funktion in einem Formular aufgerufen wird, erhält sie automatisch das FormData-Objekt. Sie können die Daten mit den nativen FormData-Methoden extrahieren:

import { createPost } from '@/app/actions'

export function Form() {
  return (
    <form action={createPost}>
      <input type="text" name="title" />
      <input type="text" name="content" />
      <button type="submit">Erstellen</button>
    </form>
  )
}

import { createPost } from '@/app/actions'

export function Form() {
  return (
    <form action={createPost}>
      <input type="text" name="title" />
      <input type="text" name="content" />
      <button type="submit">Erstellen</button>
    </form>
  )
}

'use server'

export async function createPost(formData: FormData) {
  const title = formData.get('title')
  const content = formData.get('content')

  // Daten aktualisieren
  // Cache neu validieren
}

'use server'

export async function createPost(formData) {
  const title = formData.get('title')
  const content = formData.get('content')

  // Daten aktualisieren
  // Cache neu validieren
}

Gut zu wissen: Wenn sie an die action-Prop übergeben werden, werden Server-Funktionen auch als Server-Aktionen bezeichnet.

Ereignishandler

Sie können eine Server-Funktion in einer Client-Komponente mit Ereignishandlern wie onClick aufrufen.

'use client'

import { incrementLike } from './actions'
import { useState } from 'react'

export default function LikeButton({ initialLikes }: { initialLikes: number }) {
  const [likes, setLikes] = useState(initialLikes)

  return (
    <>
      <p>Gesamt-Likes: {likes}</p>
      <button
        onClick={async () => {
          const updatedLikes = await incrementLike()
          setLikes(updatedLikes)
        }}
      >
        Like
      </button>
    </>
  )
}

'use client'

import { incrementLike } from './actions'
import { useState } from 'react'

export default function LikeButton({ initialLikes }) {
  const [likes, setLikes] = useState(initialLikes)

  return (
    <>
      <p>Gesamt-Likes: {likes}</p>
      <button
        onClick={async () => {
          const updatedLikes = await incrementLike()
          setLikes(updatedLikes)
        }}
      >
        Like
      </button>
    </>
  )
}

Beispiele

Anzeigen eines Ladezustands

Während eine Server-Funktion ausgeführt wird, können Sie einen Ladeindikator mit Reacts useActionState-Hook anzeigen. Dieser Hook gibt einen pending-Boolean zurück:

'use client'

import { useActionState, startTransition } from 'react'
import { createPost } from '@/app/actions'
import { LoadingSpinner } from '@/app/ui/loading-spinner'

export function Button() {
  const [state, action, pending] = useActionState(createPost, false)

  return (
    <button onClick={() => startTransition(action)}>
      {pending ? <LoadingSpinner /> : 'Beitrag erstellen'}
    </button>
  )
}

'use client'

import { useActionState, startTransition } from 'react'
import { createPost } from '@/app/actions'
import { LoadingSpinner } from '@/app/ui/loading-spinner'

export function Button() {
  const [state, action, pending] = useActionState(createPost, false)

  return (
    <button onClick={() => startTransition(action)}>
      {pending ? <LoadingSpinner /> : 'Beitrag erstellen'}
    </button>
  )
}

Cache neu validieren

Nach einer Aktualisierung können Sie den Next.js-Cache neu validieren und die aktualisierten Daten anzeigen, indem Sie revalidatePath oder revalidateTag innerhalb der Server-Funktion aufrufen:

import { revalidatePath } from 'next/cache'

export async function createPost(formData: FormData) {
  'use server'
  // Daten aktualisieren
  // ...

  revalidatePath('/posts')
}

import { revalidatePath } from 'next/cache'

export async function createPost(formData) {
  'use server'
  // Daten aktualisieren
  // ...
  revalidatePath('/posts')
}

Weiterleitung

Sie möchten den Benutzer möglicherweise nach einer Aktualisierung auf eine andere Seite weiterleiten. Dies können Sie tun, indem Sie redirect innerhalb der Server-Funktion aufrufen:

'use server'

import { redirect } from 'next/navigation'

export async function createPost(formData: FormData) {
  // Daten aktualisieren
  // ...

  redirect('/posts')
}

'use server'

import { redirect } from 'next/navigation'

export async function createPost(formData) {
  // Daten aktualisieren
  // ...

  redirect('/posts')
}

Datenaktualisierung durchführen

revalidatePath

revalidateTag

redirect

On this page