Avec le rendu streaming, Next.js rend maintenant possible le chargement du contenu de vos pages web de manière progressive. Tout droit hérité de l'API React 18, le rendu streaming, appelé aussi rendu incrémental, améliore considérablement les performances de vos applications. Tour d'horizon de cette nouvelle fonctionnalité qui va assurément transformer l'expérience utilisateur.

Le rendu en mode streaming est une technique utilisée pour améliorer les performances des sites web.

Dans le contexte de Next.js, cela signifie que nous ne chargeons que le strict nécessaire au moment opportun, plutôt que de tout charger dès le départ.

Voici quelques avantages du rendu streaming dans Next.js :

1. Amélioration des temps de chargement :

En différant le chargement des éléments non essentiels, le temps de chargement initial des pages est réduit. Les utilisateurs accèdent plus rapidement au contenu.

2. Réduction de la taille du fichier JavaScript :

Le rendu streaming permet de ne charger que les parties de l'application (du site) nécessaires à l’affichage initial. La taille du fichier JavaScript téléchargé par l’utilisateur est elle aussi réduite.

3. Meilleure expérience utilisateur :

Les utilisateurs n’attendent pas inutilement pendant que des éléments non visibles sont chargés. Ils peuvent interagir avec le contenu visible immédiatement.

4. Optimisation pour les mobiles et les connexions lentes :

Sur les appareils mobiles et les connexions Internet plus lentes, le rendu streaming est encore plus crucial. Il garantit que les utilisateurs peuvent accéder au contenu rapidement, même dans des conditions moins favorables.

5. Adaptation aux contraintes :

Cette approche est particulièrement utile lorsque qu'il y a des contraintes de temps d’attente. Par exemple, si un composant dépend d’un appel API ou d’une requête en base de données lente, le rendu streaming permet de ne pas retarder l’affichage du reste de la page.

6. Complément au rendu serveur (SSR) :

Idéalement, en combinant le rendu streaming avec le mode de rendu serveur (SSR) qui génère le contenu initial côté serveur on obtien une expérience utilisateur optimale, avec un chargement rapide et une interactivité immédiate.

Mise en place

Le rendu streaming est disponible par défaut dans les dernières versions de Next.js (à partir de la version 14 et >).

Cependant, il ne se déclenche que si au moins un composant de la page est importé dynamiquement.

Voici un exemple minimal :

import dynamic from 'next/dynamic';

const WithCustomLoading = dynamic(() => import('../components/WithCustomLoading'), {
  loading: () => <p>Loading...</p>,
});

export default function Page() {
  return (
    <div>
      {/* Le composant de chargement sera affiché pendant que <WithCustomLoading/> se charge */}
      <WithCustomLoading />
    </div>
  );
}

En résumé, le rendu streaming dans Next.js est un moyen puissant d’améliorer les performances de votre application web.Il permet d’offrir une expérience utilisateur plus fluide et de réduire la charge sur les serveurs.

Si vous souhaitez en savoir plus n'hésitez pas a consulter la documentation officiel de Next.js

Vous pouvez aussi consultez nos autres article sur les modes de rendu des site web tel que le CSR, SSR, SSG et l'ISR