loading.js

Le fichier spécial loading.js vous aide à créer une interface de chargement significative avec React Suspense. Grâce à cette convention, vous pouvez afficher un état de chargement instantané depuis le serveur pendant que le contenu d'un segment de route est transmis en continu. Le nouveau contenu est automatiquement remplacé une fois le chargement terminé.

export default function Loading() {
  // Ou un composant squelette de chargement personnalisé
  return <p>Chargement...</p>
}

export default function Loading() {
  // Ou un composant squelette de chargement personnalisé
  return <p>Chargement...</p>
}

Dans le fichier loading.js, vous pouvez ajouter n'importe quelle interface de chargement légère. Vous pourriez trouver utile d'utiliser les Outils de développement React pour basculer manuellement les limites Suspense.

Par défaut, ce fichier est un Composant Serveur - mais peut également être utilisé comme Composant Client via la directive "use client".

Référence

Paramètres

Les composants d'interface de chargement n'acceptent aucun paramètre.

Comportement

L'interface de secours est préchargée, rendant la navigation immédiate sauf si le préchargement n'est pas terminé.
La navigation est interruptible, ce qui signifie que changer de route ne nécessite pas d'attendre que le contenu de la route soit entièrement chargé avant de naviguer vers une autre route.
Les mises en page partagées restent interactives pendant que les nouveaux segments de route se chargent.

États de chargement instantanés

Un état de chargement instantané est une interface de secours qui s'affiche immédiatement lors de la navigation. Vous pouvez pré-rendre des indicateurs de chargement tels que des squelettes et des spinners, ou une petite partie significative des écrans futurs comme une photo de couverture, un titre, etc. Cela aide les utilisateurs à comprendre que l'application répond et offre une meilleure expérience utilisateur.

Créez un état de chargement en ajoutant un fichier loading.js dans un dossier.

export default function Loading() {
  // Vous pouvez ajouter n'importe quelle interface dans Loading, y compris un squelette.
  return <LoadingSkeleton />
}

export default function Loading() {
  // Vous pouvez ajouter n'importe quelle interface dans Loading, y compris un squelette.
  return <LoadingSkeleton />
}

Dans le même dossier, loading.js sera imbriqué dans layout.js. Il encapsulera automatiquement le fichier page.js et tous les enfants en dessous dans une limite <Suspense>.

SEO

Next.js attendra que la récupération des données dans generateMetadata soit terminée avant de diffuser l'interface vers le client. Cela garantit que la première partie d'une réponse en flux continu inclut les balises <head>.
Comme le streaming est rendu côté serveur, il n'affecte pas le SEO. Vous pouvez utiliser l'outil Rich Results Test de Google pour voir comment votre page apparaît aux robots d'indexation de Google et visualiser le HTML sérialisé (source).

Codes de statut

Lors du streaming, un code de statut 200 sera retourné pour indiquer que la requête a réussi.

Le serveur peut toujours communiquer des erreurs ou des problèmes au client dans le contenu streamé lui-même, par exemple lors de l'utilisation de redirect ou notFound. Comme les en-têtes de réponse ont déjà été envoyés au client, le code de statut de la réponse ne peut pas être mis à jour. Cela n'affecte pas le SEO.

Limites des navigateurs

Certains navigateurs mettent en mémoire tampon une réponse en streaming. Vous ne verrez peut-être pas la réponse streamée tant que la réponse ne dépasse pas 1024 octets. Cela affecte généralement uniquement les applications "hello world", mais pas les applications réelles.

Support des plateformes

Option de déploiement	Supporté
Serveur Node.js	Oui
Conteneur Docker	Oui
Export statique	Non
Adaptateurs	Dépend de la plateforme

Apprenez comment configurer le streaming lors de l'hébergement autonome de Next.js.

Exemples

Streaming avec Suspense

En plus de loading.js, vous pouvez également créer manuellement des limites Suspense pour vos propres composants d'interface. Le routeur App prend en charge le streaming avec Suspense.

<Suspense> fonctionne en encapsulant un composant qui effectue une action asynchrone (par exemple, récupérer des données), en affichant une interface de secours (par exemple, squelette, spinner) pendant l'action, puis en remplaçant par votre composant une fois l'action terminée.

import { Suspense } from 'react'
import { PostFeed, Weather } from './Components'

export default function Posts() {
  return (
    <section>
      <Suspense fallback={<p>Chargement du flux...</p>}>
        <PostFeed />
      </Suspense>
      <Suspense fallback={<p>Chargement de la météo...</p>}>
        <Weather />
      </Suspense>
    </section>
  )
}

import { Suspense } from 'react'
import { PostFeed, Weather } from './Components'

export default function Posts() {
  return (
    <section>
      <Suspense fallback={<p>Chargement du flux...</p>}>
        <PostFeed />
      </Suspense>
      <Suspense fallback={<p>Chargement de la météo...</p>}>
        <Weather />
      </Suspense>
    </section>
  )
}

En utilisant Suspense, vous bénéficiez des avantages suivants :

Rendu côté serveur en streaming - Rendu progressif du HTML du serveur vers le client.
Hydratation sélective - React priorise les composants à rendre interactifs en premier en fonction de l'interaction utilisateur.

Pour plus d'exemples et de cas d'utilisation de Suspense, veuillez consulter la Documentation React.

Historique des versions

Version	Changements
`v13.0.0`	Introduction de `loading`.