Comment mettre à jour des données

Vous pouvez mettre à jour des données dans Next.js en utilisant les Fonctions Serveur (Server Functions) de React. Cette page explique comment créer et invoquer des Fonctions Serveur.

Fonctions Serveur

Une Fonction Serveur est une fonction asynchrone exécutée sur le serveur. Les Fonctions Serveur sont intrinsèquement asynchrones car elles sont invoquées par le client via une requête réseau. Lorsqu'elles sont invoquées dans le cadre d'une action, elles sont aussi appelées Actions Serveur (Server Actions).

Par convention, une action est une fonction asynchrone passée à startTransition. Les Fonctions Serveur sont automatiquement encapsulées avec startTransition lorsque :

• Passées à un <form> via la prop action,
• Passées à un <button> via la prop formAction
• Passées à useActionState

Création de Fonctions Serveur

Une Fonction Serveur peut être définie en utilisant la directive use server. Vous pouvez placer la directive en haut d'une fonction asynchrone pour marquer la fonction comme Fonction Serveur, ou en haut d'un fichier séparé pour marquer toutes ses exportations.

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

  // Mettre à jour les données
  // Revalider le cache
}

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

  // Mettre à jour les données
  // Revalider le cache
}

Composants Serveur

Les Fonctions Serveur peuvent être intégrées dans des Composants Serveur en ajoutant la directive "use server" en haut du corps de la fonction :

export default function Page() {
  // Action Serveur
  async function createPost(formData: FormData) {
    'use server'
    // ...
  }

  return <></>
}

Composants Client

Il n'est pas possible de définir des Fonctions Serveur dans des Composants Client. Cependant, vous pouvez les invoquer dans des Composants Client en les important depuis un fichier contenant la directive "use server" en haut :

'use server'

export async function createPost() {}

Invocation de Fonctions Serveur

Il existe deux principales façons d'invoquer une Fonction Serveur :

1. Formulaires dans les Composants Serveur et Client
2. Gestionnaires d'événements dans les Composants Client

Formulaires

React étend l'élément HTML <form> pour permettre l'invocation d'une Fonction Serveur via la prop HTML action.

Lorsqu'elle est invoquée dans un formulaire, la fonction reçoit automatiquement l'objet FormData. Vous pouvez extraire les données en utilisant les méthodes natives de FormData :

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">Créer</button>
    </form>
  )
}

Bon à savoir : Lorsqu'elle est passée à la prop action, une Fonction Serveur est aussi appelée Action Serveur (Server Action).

Gestionnaires d'événements

Vous pouvez invoquer une Fonction Serveur dans un Composant Client en utilisant des gestionnaires d'événements comme onClick.

'use client'

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

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

  return (
    <>
      <p>Total de likes : {likes}</p>
      <button
        onClick={async () => {
          const updatedLikes = await incrementLike()
          setLikes(updatedLikes)
        }}
      >
        J'aime
      </button>
    </>
  )
}

Exemples

Affichage d'un état en attente

Pendant l'exécution d'une Fonction Serveur, vous pouvez afficher un indicateur de chargement avec le hook useActionState de React. Ce hook retourne un booléen pending :

'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 /> : 'Créer un article'}
    </button>
  )
}

Revalidation du cache

Après une mise à jour, vous pouvez revalider le cache de Next.js et afficher les données actualisées en appelant revalidatePath ou revalidateTag dans la Fonction Serveur :

import { revalidatePath } from 'next/cache'

export async function createPost(formData: FormData) {
  'use server'
  // Mettre à jour les données
  // ...

  revalidatePath('/posts')
}

Redirection

Vous pouvez rediriger l'utilisateur vers une autre page après une mise à jour en appelant redirect dans la Fonction Serveur :

'use server'

import { redirect } from 'next/navigation'

export async function createPost(formData: FormData) {
  // Mettre à jour les données
  // ...

  redirect('/posts')
}