Next.js : Le Partial Prerendering (PPR) est le Saint Graal de la Web Perf

Pendant une décennie, les architectes web ont dû faire un choix cornélien :

1. Choisir le Statique (SSG/ISR) : Le site est ultra-rapide (servi depuis le CDN/Edge), mais il n'est pas personnalisé.

2. Choisir le Dynamique (SSR) : Le site est personnalisé (panier utilisateur, recommandations), mais le TTFB (Time To First Byte) souffre car il faut attendre la base de données avant de répondre.

En 2026, ce choix binaire est obsolète. Le Partial Prerendering (PPR) a réuni ces deux mondes dans une seule réponse HTTP.

Qu'est-ce que le PPR concrètement ?

Imaginez votre page web comme un puzzle.

• Le Cadre (La Coquille) : Le Header, le Footer, la Sidebar, le Logo. Ces éléments ne changent pas selon l'utilisateur. Ils sont statiques.

• Les Pièces (Les Trous) : Le contenu du panier, le nom de l'utilisateur, le flux d'actualité personnalisé. Ces éléments sont dynamiques.

Avec le PPR, Next.js pré-rend le "Cadre" au moment du build (comme un site statique). Quand un utilisateur demande la page :

1. Le serveur envoie immédiatement le Cadre statique (TTFB quasi-instantanné).

2. En parallèle, il commence à calculer les "Pièces" dynamiques.

3. Il streame les pièces dynamiques dans les trous du cadre au fur et à mesure qu'elles sont prêtes.

La magie réside dans Suspense

Vous n'avez pas besoin d'apprendre une nouvelle API complexe. Le PPR utilise les frontières Suspense de React que vous connaissez déjà.

import { Suspense } from 'react';
import UserCart from './UserCart';
import StaticHeader from './StaticHeader';

export default function Page() {
  return (
    <>
      {/* 1. Servi instantanément (Prerendered) */}
      <StaticHeader /> 
      
      <main>
        <h1>Bienvenue sur la boutique</h1>
        
        {/* 2. Streamé dès que la BDD répond */}
        <Suspense fallback={<CartSkeleton />}>
           <UserCart />
        </Suspense>
      </main>
    </>
  );
}

Dans cet exemple, Next.js comprend automatiquement que tout ce qui est hors du Suspense est statique, et ce qui est dedans est dynamique. Il n'attend pas UserCart pour envoyer StaticHeader au navigateur.

Pourquoi c'est une révolution pour le Business (ROI)

1. Perceived Performance (Vitesse Ressentie) : L'utilisateur voit l'interface s'afficher instantanément. Il n'attend pas devant un écran blanc. La sensation de fluidité est totale.

2. SEO & Crawlers : Le contenu principal (s'il est statique) est immédiatement disponible pour Google.

3. Coûts Infrastructure : Vous sollicitez moins vos serveurs de calcul (Compute) car une grande partie de la page est servie depuis le cache (Edge).

Conclusion

Le Partial Prerendering n'est pas juste une optimisation. C'est le modèle mental par défaut de 2026. Nous ne construisons plus des "Sites Statiques" ou des "Apps Dynamiques". Nous construisons des Coquilles Rapides qui hébergent du Contenu Vivant.

Si vous forcez encore vos utilisateurs à attendre 2 secondes devant une page blanche le temps que votre base de données se réveille, vous avez 3 ans de retard.

Pour en savoir plus : https://nextjs.org/docs/app/guides/upgrading/version-16#partial-pre-rendering-ppr