Menu

use server

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

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.

app/actions.ts
TypeScript
'use server'
import { db } from '@/lib/db' // Ihr Datenbanklient
 
export async function createUser(data: { name: string; email: string }) {
  const user = await db.user.create({ data })
  return user
}

Verwendung von Serverfunktionen in einer Client-Komponente

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

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

app/actions.ts
TypeScript
'use server'
import { db } from '@/lib/db' // Ihr Datenbanklient
 
export async function fetchUsers() {
  const users = await db.user.findMany()
  return users
}

Dann können Sie die fetchUsers-Serverfunktion in eine Client-Komponente importieren und auf Clientseite ausführen.

app/components/my-button.tsx
TypeScript
'use client'
import { fetchUsers } from '../actions'
 
export default function MyButton() {
  return <button onClick={() => fetchUsers()}>Benutzer abrufen</button>
}

Verwendung von use server inline

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

app/page.tsx
TypeScript
import { db } from '@/lib/db' // Ihr Datenbanklient
 
export default function UserList() {
  async function fetchUsers() {
    'use server'
    const users = await db.user.findMany()
    return users
  }
 
  return <button onClick={() => fetchUsers()}>Benutzer abrufen</button>
}

Sicherheitsüberlegungen

Bei Verwendung der use server-Direktive ist es wichtig, sicherzustellen, dass die gesamte serverseitige Logik sicher ist und sensible Daten geschützt bleiben.

Authentifizierung und Autorisierung

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

app/actions.ts
TypeScript
'use server'
 
import { db } from '@/lib/db' // Ihr Datenbanklient
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('Nicht autorisiert')
  }
  const newUser = await db.user.create({ data })
  return newUser
}

Referenz

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