Suspense

🚨

React ne recommande toujours pas d'utiliser Suspense dans les frameworks de données comme SWR (Plus d'informations). Ces API peuvent changer à l'avenir en fonction des résultats de nos recherches.

Vous pouvez activer l'option suspense pour utiliser SWR avec React Suspense :

import { Suspense } from 'react'
import useSWR from 'swr'
 
function Profile () {
  const { data } = useSWR('/api/user', fetcher, { suspense: true })
  return <div>bonjour, {data.name}</div>
}
 
function App () {
  return (
    <Suspense fallback={<div>chargement...</div>}>
      <Profile/>
    </Suspense>
  )
}

💡

Notez que l'option suspense n'est pas autorisée à changer dans le cycle de vie.

En mode Suspense, data est toujours la réponse de la requête (vous n'avez donc pas besoin de vérifier si elle est undefined). Mais si une erreur s'est produite, vous devez utiliser une limite d'erreur (opens in a new tab) pour la capturer :

<ErrorBoundary fallback={<h2>Impossible de récupérer les messages</h2>}>
  <Suspense fallback={<h1>Chargements des messages...</h1>}>
    <Profile />
  </Suspense>
</ErrorBoundary>

💡

Le mode Suspense suspend le rendu jusqu'à ce que les données soient prêtes, ce qui signifie qu'il provoque facilement des problèmes de cascade. Pour éviter cela, vous devez précharger les ressources avant le rendu. Plus d'informations

Note: Avec le rendu conditionnel

Normalement, lorsque vous activez suspense, il est garanti que data sera toujours prêt au rendu :

function Profile () {
  const { data } = useSWR('/api/user', fetcher, { suspense: true })
 
  // `data` ne sera jamais `undefined`
  // ...
}

Cependant, lorsqu'il est utilisé avec le chargement conditionnel ou le chargement dépendant, data sera undefined si la requête est en pause :

function Profile () {
  const { data } = useSWR(isReady ? '/api/user' : null, fetcher, { suspense: true })
 
  // `data` sera `undefined` si `isReady` est false
  // ...
}

Si vous voulez lire plus de détails techniques sur cette restriction, consultez la discussion ici (opens in a new tab).

Rendu côté serveur

Lorsque vous utilisez le mode suspense côté serveur (y compris le pré-rendu dans Next.js), il est obligatoire de fournir les données initiales via fallbackData ou fallback. Cela signifie que vous ne pouvez pas utiliser Suspense pour récupérer des données côté serveur, mais que vous devez soit effectuer une récupération de données entièrement côté client, soit récupérer les données via la méthode de récupération de données de niveau framework (comme getStaticProps dans Next.js). Vous trouverez plus de discussions ici (opens in a new tab).

TypeScript Middleware