Interface de chargement et streaming

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 le chargement du contenu d'un segment de route. Le nouveau contenu est automatiquement remplacé une fois le rendu terminé.

États de chargement instantanés

Un état de chargement instantané est une interface de repli qui s'affiche immédiatement lors de la navigation. Vous pouvez pré-rendre des indicateurs de chargement comme des squelettes ou 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 améliore l'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 Skeleton.
  return <LoadingSkeleton />
}

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

Bon à savoir :

• La navigation est instantanée, même avec le routage centré sur le serveur.
• La navigation est interruptible, ce qui signifie que changer de route ne nécessite pas d'attendre que le contenu de la route en cours soit entièrement chargé.
• Les layouts partagés restent interactifs pendant le chargement des nouveaux segments de route.

Recommandation : Utilisez la convention loading.js pour les segments de route (layouts et pages) car Next.js optimise cette fonctionnalité.

Streaming avec Suspense

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

Bon à savoir :

• 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 celle-ci ne dépasse pas 1024 octets. Cela affecte généralement seulement les applications de démonstration, pas les applications réelles.

Qu'est-ce que le streaming ?

Pour comprendre comment le streaming fonctionne dans React et Next.js, il est utile de connaître le rendu côté serveur (SSR) et ses limites.

Avec le SSR, une série d'étapes doivent être accomplies avant qu'un utilisateur puisse voir et interagir avec une page :

1. D'abord, toutes les données pour une page donnée sont récupérées sur le serveur.
2. Le serveur rend ensuite le HTML pour la page.
3. Le HTML, CSS et JavaScript pour la page sont envoyés au client.
4. Une interface utilisateur non interactive est affichée en utilisant le HTML généré et le CSS.
5. Enfin, React hydrate l'interface utilisateur pour la rendre interactive.

Ces étapes sont séquentielles et bloquantes, ce qui signifie que le serveur ne peut rendre le HTML d'une page qu'une fois toutes les données récupérées. Et, côté client, React ne peut hydrater l'interface qu'une fois le code de tous les composants de la page téléchargé.

Le SSR avec React et Next.js aide à améliorer les performances perçues de chargement en affichant une page non interactive à l'utilisateur le plus tôt possible.

Cependant, cela peut encore être lent car toutes les requêtes de données côté serveur doivent être terminées avant que la page puisse être montrée à l'utilisateur.

Le streaming vous permet de découper le HTML de la page en morceaux plus petits et d'envoyer progressivement ces morceaux du serveur au client.

Cela permet d'afficher des parties de la page plus tôt, sans attendre que toutes les données soient chargées avant qu'une interface ne soit rendue.

Le streaming fonctionne bien avec le modèle de composants de React car chaque composant peut être considéré comme un morceau. Les composants ayant une priorité plus élevée (par exemple les informations sur un produit) ou ne dépendant pas de données peuvent être envoyés en premier (par exemple le layout), et React peut commencer l'hydratation plus tôt. Les composants ayant une priorité plus faible (par exemple les avis, produits similaires) peuvent être envoyés dans la même requête serveur après que leurs données ont été récupérées.

Le streaming est particulièrement bénéfique lorsque vous voulez éviter que des requêtes de données longues bloquent le rendu de la page, car il peut réduire le Time To First Byte (TTFB) et le First Contentful Paint (FCP). Il aide aussi à améliorer le Time to Interactive (TTI), surtout sur les appareils lents.

Exemple

<Suspense> fonctionne en englobant un composant qui effectue une action asynchrone (par exemple récupérer des données), en affichant une interface de repli (par exemple un squelette, un 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>
  )
}

En utilisant Suspense, vous bénéficiez de :

1. Rendu serveur en streaming - Rendu progressif du HTML du serveur vers le client.
2. Hydratation sélective - React priorise quels composants rendre interactifs en premier selon l'interaction utilisateur.

Pour plus d'exemples et de cas d'usage de Suspense, consultez la documentation React.

SEO

• Next.js attendra que la récupération de données dans generateMetadata soit terminée avant de streamer l'interface vers le client. Cela garantit que la première partie de la réponse streamée 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 et voir 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 problèmes au client dans le contenu streamé lui-même, par exemple en utilisant 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.

Support des plateformes

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