Qu'est-ce que le Partial Prerendering (PPR) ?

Question

Accepted Answer

**Partial Prerendering (PPR)** est un modèle de rendu Next.js qui combine **contenu statique et dynamique dans une seule page** — en servant un shell statique instantané tout en diffusant les parties dynamiques. Il estompe l'ancienne ligne du tout ou rien entre SSG et SSR. ## Le problème qu'il résout Traditionnellement, une page était *soit* entièrement statique (rapide, mais ne peut pas avoir de contenu par utilisateur) *soit* entièrement dynamique (peut être personnalisée, mais plus lente et non cacheable). Les vraies pages sont mixtes : une page produit a une mise en page/description statique mais un nombre de panier dynamique et des recommandations personnalisées. PPR permet à la **même page** d'être les deux. ## Comment ça fonctionne ```tsx import { Suspense } from "react"; export default function ProductPage() { return (

{/* STATIC — prerendered, served instantly from CDN */} {/* STATIC — same for everyone */} }> {/* DYNAMIC — streamed in per request */} }> {/* DYNAMIC — personalized, streamed */}

); } ``` L'idée clé : tout ce qui est **en dehors** d'une limite `` est **prérendu comme un shell statique** au moment de la construction. Tout ce qui est **à l'intérieur** de Suspense (qui lit les données dynamiques — cookies, en-têtes, récupérations non cachées) est traité comme un « trou » dynamique qui se diffuse au moment de la requête. ## La séquence de livraison ```text 1. Static shell (header, product info, skeletons) → served INSTANTLY from the edge/CDN 2. Dynamic holes (cart, recommendations) → stream in and replace the skeletons ``` L'utilisateur obtient un premier rendu significatif immédiatement (shell statique depuis le CDN), puis les pièces personnalisées se remplissent — le meilleur des deux : la vitesse statique *et* le contenu dynamique, sans aucune décision de routage ou de mode de rendu séparé. ## Statut ```text PPR has been an experimental/incremental feature; enable per-config/route. Check your Next.js version — the API and stability have been evolving. ``` ## Pourquoi c'est important PPR supprime le faux choix entre « rapide mais statique » et « dynamique mais lent ». En prérendant le shell et en diffusant uniquement les trous dynamiques (marqués par Suspense), une seule page offre un premier rendu CDN instantané plus du contenu personnalisé — automatiquement, sans fractionner la page ou choisir manuellement SSG par rapport à SSR. Cela représente la direction vers laquelle va le rendu Next.js : composition statique/dynamique granulaire, par composant.