Utilisation de use server

La directive use server désigne une fonction ou un fichier à exécuter côté serveur. Elle peut être utilisée en haut d'un fichier pour indiquer que toutes les fonctions du fichier sont côté serveur, ou en ligne au début d'une fonction pour marquer celle-ci comme une Fonction Serveur. Il s'agit d'une fonctionnalité de React.

Utilisation de `use server` en haut d'un fichier

L'exemple suivant montre un fichier avec une directive use server en haut. Toutes les fonctions du fichier sont exécutées côté serveur.

'use server'
import { db } from '@/lib/db' // Votre client de base de données

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' // Votre client de base de données

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

Utilisation des Fonctions Serveur dans un Composant Client

Pour utiliser des Fonctions Serveur dans des Composants Clients, vous devez créer vos Fonctions Serveur dans un fichier dédié en utilisant la directive use server en haut du fichier. Ces Fonctions Serveur peuvent ensuite être importées dans des Composants Clients et Serveurs et exécutées.

Supposons que vous ayez une Fonction Serveur fetchUsers dans actions.ts :

'use server'
import { db } from '@/lib/db' // Votre client de base de données

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

'use server'
import { db } from '@/lib/db' // Votre client de base de données

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

Vous pouvez ensuite importer la Fonction Serveur fetchUsers dans un Composant Client et l'exécuter côté client.

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

export default function MyButton() {
  return <button onClick={() => fetchUsers()}>Récupérer les utilisateurs</button>
}

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

export default function MyButton() {
  return <button onClick={() => fetchUsers()}>Récupérer les utilisateurs</button>
}

Utilisation de `use server` en ligne

Dans l'exemple suivant, use server est utilisé en ligne au début d'une fonction pour la marquer comme une Fonction Serveur :

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} />
}

Considérations de sécurité

Lors de l'utilisation de la directive use server, il est important de s'assurer que toute la logique côté serveur est sécurisée et que les données sensibles restent protégées.

Authentification et autorisation

Toujours authentifier et autoriser les utilisateurs avant d'effectuer des opérations sensibles côté serveur.

'use server'

import { db } from '@/lib/db' // Votre client de base de données
import { authenticate } from '@/lib/auth' // Votre bibliothèque d'authentification

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

'use server'

import { db } from '@/lib/db' // Votre client de base de données
import { authenticate } from '@/lib/auth' // Votre bibliothèque d'authentification

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

Référence

Consultez la documentation React pour plus d'informations sur use server.

Utilisation de use server en haut d'un fichier