Prérendu partiel (Partial Prerendering)

Jusqu'à présent, vous avez découvert le rendu statique et dynamique, ainsi que la manière de diffuser en continu (streaming) du contenu dynamique dépendant de données. Dans ce chapitre, apprenons comment combiner le rendu statique, dynamique et le streaming dans la même route avec le prérendu partiel (PPR).

Le prérendu partiel est une fonctionnalité expérimentale introduite dans Next.js 14. Le contenu de cette page peut être mis à jour au fur et à mesure que la fonctionnalité gagne en stabilité. Le PPR n'est disponible qu'avec les versions canaries de Next.js (next@canary), pas dans la version stable de Next.js. Nous ne recommandons pas encore d'utiliser le prérendu partiel en production.

Pour installer la version canarie de Next.js, exécutez :

pnpm install next@canary

Routes statiques vs. dynamiques

Pour la plupart des applications web construites aujourd'hui, vous devez choisir entre un rendu statique ou dynamique pour l'ensemble de votre application, ou pour une route spécifique. Et dans Next.js, si vous appelez une fonction dynamique dans une route (comme interroger votre base de données), la route entière devient dynamique.

Cependant, la plupart des routes ne sont pas entièrement statiques ou dynamiques. Par exemple, prenez un site e-commerce. Vous pourriez vouloir prérendre statiquement la majorité de la page d'information sur le produit, mais récupérer dynamiquement le panier de l'utilisateur et les produits recommandés, ce qui vous permet d'afficher un contenu personnalisé pour vos utilisateurs.

Revenons à votre page de tableau de bord, quels composants considéreriez-vous comme statiques ou dynamiques ?

Une fois prêt, cliquez sur le bouton ci-dessous pour voir comment nous diviserions la route du tableau de bord :

Qu'est-ce que le prérendu partiel ?

Next.js 14 a introduit une version expérimentale du prérendu partiel – un nouveau modèle de rendu qui vous permet de combiner les avantages du rendu statique et dynamique dans la même route. Par exemple :

Lorsqu'un utilisateur visite une route :

• Une enveloppe statique de route incluant la barre de navigation et les informations sur le produit est servie, garantissant un chargement initial rapide.
• L'enveloppe laisse des espaces où le contenu dynamique comme le panier et les produits recommandés se chargera de manière asynchrone.
• Les espaces asynchrones sont diffusés en parallèle, réduisant le temps de chargement global de la page.

Comment fonctionne le prérendu partiel ?

Le prérendu partiel utilise Suspense de React (que vous avez découvert dans le chapitre précédent) pour différer le rendu de certaines parties de votre application jusqu'à ce qu'une condition soit remplie (par exemple, que les données soient chargées).

Le contenu de repli (fallback) de Suspense est intégré dans le fichier HTML initial avec le contenu statique. Au moment de la construction (ou pendant la revalidation), le contenu statique est prérendu pour créer une enveloppe statique. Le rendu du contenu dynamique est reporté jusqu'à ce que l'utilisateur demande la route.

Envelopper un composant dans Suspense ne rend pas le composant lui-même dynamique, mais Suspense est utilisé comme une frontière entre votre code statique et dynamique.

Voyons comment vous pouvez implémenter le PPR dans votre route de tableau de bord.

Implémentation du prérendu partiel

Activez le PPR pour votre application Next.js en ajoutant l'option ppr à votre fichier next.config.ts :

import type { NextConfig } from 'next';
 
const nextConfig: NextConfig = {
  experimental: {
    ppr: 'incremental'
  }
};
 
export default nextConfig;

La valeur 'incremental' vous permet d'adopter le PPR pour des routes spécifiques.

Ensuite, ajoutez l'option de segment experimental_ppr à votre mise en page (layout) de tableau de bord :

import SideNav from '@/app/ui/dashboard/sidenav';
 
export const experimental_ppr = true;
 
// ...

C'est tout. Vous ne verrez peut-être pas de différence dans votre application en développement, mais vous devriez remarquer une amélioration des performances en production. Next.js prérendra les parties statiques de votre route et différera les parties dynamiques jusqu'à ce que l'utilisateur les demande.

Ce qui est génial avec le prérendu partiel, c'est que vous n'avez pas besoin de modifier votre code pour l'utiliser. Tant que vous utilisez Suspense pour envelopper les parties dynamiques de votre route, Next.js saura quelles parties de votre route sont statiques et lesquelles sont dynamiques.

Nous pensons que le PPR a le potentiel de devenir le modèle de rendu par défaut pour les applications web, combinant le meilleur du rendu de site statique et dynamique. Cependant, il est encore expérimental. Nous espérons le stabiliser à l'avenir et en faire la manière par défaut de construire avec Next.js.

Vous pouvez maintenant annuler ces changements et passer au chapitre suivant.

Résumé

Pour résumer, vous avez fait plusieurs choses pour optimiser la récupération de données dans votre application jusqu'à présent :

1. Créé une base de données dans la même région que votre code d'application pour réduire la latence entre votre serveur et votre base de données.
2. Récupéré des données côté serveur avec les composants serveur React. Cela vous permet de garder les récupérations de données coûteuses et la logique sur le serveur, réduit le bundle JavaScript côté client et empêche vos secrets de base de données d'être exposés au client.
3. Utilisé SQL pour ne récupérer que les données nécessaires, réduisant la quantité de données transférées pour chaque requête et la quantité de JavaScript nécessaire pour transformer les données en mémoire.
4. Parallélisé la récupération de données avec JavaScript - là où cela avait du sens.
5. Implémenté le streaming pour empêcher les requêtes de données lentes de bloquer toute votre page, et permettre à l'utilisateur de commencer à interagir avec l'interface sans attendre que tout soit chargé.
6. Déplacé la récupération de données vers les composants qui en ont besoin, isolant ainsi les parties de vos routes qui doivent être dynamiques.

Dans le prochain chapitre, nous examinerons deux modèles courants que vous pourriez avoir besoin d'implémenter lors de la récupération de données : la recherche et la pagination.