use server

Die use server-Direktive kennzeichnet eine Funktion oder Datei zur Ausführung auf der Serverseite. Sie kann am Anfang einer Datei verwendet werden, um anzugeben, dass alle Funktionen in der Datei serverseitig sind, oder inline am Anfang einer Funktion, um diese als Server-Funktion zu markieren. Dies ist ein React-Feature.

Verwendung von `use server` am Anfang einer Datei

Das folgende Beispiel zeigt eine Datei mit einer use server-Direktive am Anfang. Alle Funktionen in der Datei werden auf dem Server ausgeführt.

'use server'
import { db } from '@/lib/db' // Ihr Datenbank-Client

export async function createUser(data: { name: string; email: string }) {
  const user = await db.user.create({ data })
  return user
}

'use server'
import { db } from '@/lib/db' // Ihr Datenbank-Client

export async function createUser(data) {
  const user = await db.user.create({ data })
  return user
}

Verwendung von Server-Funktionen in einer Client-Komponente

Um Server-Funktionen in Client-Komponenten zu verwenden, müssen Sie Ihre Server-Funktionen in einer separaten Datei mit der use server-Direktive am Anfang der Datei erstellen. Diese Server-Funktionen können dann in Client- und Server-Komponenten importiert und ausgeführt werden.

Angenommen, Sie haben eine fetchUsers-Server-Funktion in actions.ts:

'use server'
import { db } from '@/lib/db' // Ihr Datenbank-Client

export async function fetchUsers() {
  const users = await db.user.findMany()
  return users
}

'use server'
import { db } from '@/lib/db' // Ihr Datenbank-Client

export async function fetchUsers() {
  const users = await db.user.findMany()
  return users
}

Dann können Sie die fetchUsers-Server-Funktion in eine Client-Komponente importieren und auf der Client-Seite ausführen.

'use client'
import { fetchUsers } from '../actions'

export default function MyButton() {
  return <button onClick={() => fetchUsers()}>Benutzer abrufen</button>
}

'use client'
import { fetchUsers } from '../actions'

export default function MyButton() {
  return <button onClick={() => fetchUsers()}>Benutzer abrufen</button>
}

Inline-Verwendung von `use server`

Im folgenden Beispiel wird use server inline am Anfang einer Funktion verwendet, um sie als Server-Funktion zu markieren:

import { EditPost } from './edit-post'
import { revalidatePath } from 'next/cache'

export default async function PostPage({ params }: { params: { id: string } }) {
  const post = await getPost(params.id)

  async function updatePost(formData: FormData) {
    'use server'
    await savePost(params.id, formData)
    revalidatePath(`/posts/${params.id}`)
  }

  return <EditPost updatePostAction={updatePost} post={post} />
}

import { EditPost } from './edit-post'
import { revalidatePath } from 'next/cache'

export default async function PostPage({ params }) {
  const post = await getPost(params.id)

  async function updatePost(formData) {
    'use server'
    await savePost(params.id, formData)
    revalidatePath(`/posts/${params.id}`)
  }

  return <EditPost updatePostAction={updatePost} post={post} />
}

Sicherheitsüberlegungen

Bei der Verwendung der use server-Direktive ist es wichtig, sicherzustellen, dass alle serverseitigen Logiken sicher sind und sensible Daten geschützt bleiben.

Authentifizierung und Autorisierung

Authentifizieren und autorisieren Sie Benutzer immer, bevor Sie sensible serverseitige Operationen durchführen.

'use server'

import { db } from '@/lib/db' // Ihr Datenbank-Client
import { authenticate } from '@/lib/auth' // Ihre Authentifizierungsbibliothek

export async function createUser(
  data: { name: string; email: string },
  token: string
) {
  const user = authenticate(token)
  if (!user) {
    throw new Error('Unauthorized')
  }
  const newUser = await db.user.create({ data })
  return newUser
}

'use server'

import { db } from '@/lib/db' // Ihr Datenbank-Client
import { authenticate } from '@/lib/auth' // Ihre Authentifizierungsbibliothek

export async function createUser(data, token) {
  const user = authenticate(token)
  if (!user) {
    throw new Error('Unauthorized')
  }
  const newUser = await db.user.create({ data })
  return newUser
}

Referenz

Weitere Informationen zu use server finden Sie in der React-Dokumentation.

Verwendung von use server am Anfang einer Datei