Next.js SSR, SSG et ISR : quelle stratégie de rendu choisir ? (2026)

L’une des forces de Next.js est de permettre plusieurs stratégies de rendu dans la même application, page par page. Choisir la bonne stratégie pour chaque type de contenu est la décision architecturale la plus importante que vous prendrez.

SSG — Static Site Generation

Les pages sont générées au moment du build et servies comme fichiers HTML statiques depuis un CDN. C’est le plus rapide (TTFB < 50ms depuis Vercel) et le plus scalable (pas de serveur impliqué).

// app/blog/[slug]/page.tsx
// Sans fetch dynamique = SSG automatique en Next.js 15
export async function generateStaticParams() {
  const articles = await getAllArticles(); // appelé au build
  return articles.map(a => ({ slug: a.slug }));
}

export default async function ArticlePage({ params }) {
  const article = await getArticle(params.slug); // appelé au build
  return <article>{article.content}</article>;
}

Utilisez SSG pour : articles de blog, pages marketing, documentation, portfolios — tout contenu qui ne change pas souvent.

ISR — Incremental Static Regeneration

ISR combine la vitesse du SSG avec la fraîcheur du SSR. Les pages sont générées statiquement puis régénérées en arrière-plan après une durée configurable :

// Revalider toutes les heures
const article = await fetch(`/api/articles/${slug}`, {
  next: { revalidate: 3600 }
});

// Revalider à la demande (webhook WordPress → déclenche la régénération)
import { revalidatePath } from 'next/cache';
export async function POST(request: Request) {
  revalidatePath('/blog/[slug]', 'page');
  return Response.json({ revalidated: true });
}

Utilisez ISR pour : contenu qui change quelques fois par jour (actualités, prix de produits, stocks), pages avec du contenu externe (WordPress, Contentful).

SSR — Server-Side Rendering

La page est générée à chaque requête côté serveur. C’est plus lent que SSG mais le contenu est toujours frais :

// Forcer le rendu dynamique (SSR)
export const dynamic = 'force-dynamic';

export default async function DashboardPage() {
  const user = await getCurrentUser(); // cookies, session
  const data = await getUserData(user.id); // données en temps réel
  return <Dashboard data={data} />;
}

Utilisez SSR pour : pages personnalisées (dashboard utilisateur, panier), contenu temps réel (cours boursiers, scores sportifs), pages derrière authentification.

Client-Side Rendering (CSR)

Le rendu se fait entièrement côté navigateur. À éviter pour les pages SEO-critiques :

"use client";
import { useEffect, useState } from 'react';

export default function LiveChart() {
  const [data, setData] = useState(null);
  useEffect(() => {
    const interval = setInterval(() => fetchData().then(setData), 1000);
    return () => clearInterval(interval);
  }, []);
  return data ? <Chart data={data} /> : <Spinner />;
}

Utilisez CSR pour : graphiques temps réel, composants hautement interactifs, contenu non-SEO derrière authentification.

La stratégie mixte : le bon choix en pratique

La vraie puissance de Next.js est de mélanger les stratégies. Un e-commerce typique :

• Pages produit → ISR (revalidate: 600 s) — rapide, stock mis à jour régulièrement
• Page d’accueil → ISR (revalidate: 3600 s) — promotions fraîches, très rapide
• Panier et compte → SSR — contenu personnalisé
• Graphique analytics → CSR — temps réel
• Blog, FAQ → SSG — jamais périmé, ultra-rapide

Avec les Server Components de Next.js 15, vous pouvez même mélanger les stratégies au niveau d’une seule page : le shell statique vient du SSG, les données utilisateur sont streamées en SSR.