Partial Pre-Rendering (PPR) dans Next.js : Le Guide Complet

Le Partial Pre-Rendering (PPR) est la fonctionnalité la plus excitante de Next.js depuis les Server Components. Avec la nouvelle directive use cache, le framework de Vercel résout enfin le dilemme : statique ou dynamique ?

La réponse en 2026 : les deux, sur la même page.

Le Problème que PPR Résout

Imaginez une page e-commerce :

Avant PPR : il fallait choisir SSG, SSR ou ISR. Avec PPR, chaque élément est rendu de manière optimale.

Comment Fonctionne le PPR

1. Build time : pré-rendu des parties statiques
2. Edge : shell statique servi depuis le CDN
3. Streaming : parties dynamiques streamées en parallèle

La Directive use cache

async function ProductInfo({ id }: { id: string }) {
  "use cache";
  const product = await db.product.findUnique({ where: { id } });
  return <div>{product.name} - {product.description}</div>;
}

async function LivePrice({ id }: { id: string }) {
  const price = await fetchLivePrice(id);
  return <span>{price} EUR</span>;
}

export default async function ProductPage({ params }) {
  return (
    <div>
      <Suspense fallback={<ProductSkeleton />}>
        <ProductInfo id={params.id} />
      </Suspense>
      <Suspense fallback={<PriceSkeleton />}>
        <LivePrice id={params.id} />
      </Suspense>
    </div>
  );
}

PPR vs ISR vs SSR

Migration

Étape 1 : Activer PPR

const nextConfig = {
  experimental: { ppr: true },
};

Étape 2 : Classifier vos composants

• Statiques → use cache longue durée
• Semi-dynamiques → use cache avec revalidation
• Dynamiques → pas de cache

Étape 3 : Wrappez avec Suspense

Chaque composant cacheable dans un <Suspense> avec fallback.

Impact Core Web Vitals

Conclusion

Le PPR est un changement de paradigme : le meilleur des deux mondes sans compromis.

---

Besoin d'aide pour migrer vers le PPR ? Chez BOVO Digital, nous optimisons vos performances web avec les dernières technologies Next.js.