Next.js SEO : rendu côté serveur SSR et ISR

Analyse de l'impact sur le SEO du rendu côté serveur (SSR) et de la régénération statique incrémentale (ISR) avec Next.js.

7.1Le problème du rendu côté client (CSR)

Avec une SPA classique (React pur, Vite…), le navigateur reçoit un fichier HTML quasi vide et c'est JavaScript qui construit la page. Le problème ? Les robots de Google reçoivent… une page vide.

HTMLhtml

<!-- Ce que Googlebot reçoit avec du CSR pur -->
<!DOCTYPE html>
<html>
<head><title>Mon App</title></head>
<body>
    <div id="root"></div>         <!-- 😱 Vide ! -->
    <script src="bundle.js"></script>  <!-- Le contenu est là-dedans -->
</body>
</html>

Google peut exécuter JavaScript, mais avec un délai et des limitations. Résultat tes pages mettent plus de temps à être indexées, ou certaines ne le sont jamais.

7.2SSR, le monde pré-chargé

Le Server-Side Rendering (SSR) génère le HTML sur le serveur à chaque requête. Quand Googlebot arrive, la page est déjà complète, zéro JavaScript nécessaire pour lire le contenu.

TSXtsx

// Next.js App Router - SSR par défaut avec les Server Components
// app/seo/[slug]/page.tsx

export default async function SeoChapterPage({ params }) {
    const { slug } = await params;
    
    // Fetch côté serveur - le HTML est généré avant l'envoi
    const chapter = await getChapter(slug);
    
    return (
     <article>
       <h1>{chapter.title}</h1>
       <div>{chapter.content}</div>
     </article>
    );
}
// → Googlebot reçoit du HTML complet

Avantage contenu toujours frais, indexable immédiatement
Inconvénient chaque visite sollicite le serveur (plus coûteux en charges)
Idéal pour pages dynamiques, tableaux de bord, contenu temps réel

7.3SSG, la carte gravée dans la pierre

Le Static Site Generation (SSG) génère les pages HTML au moment du build. Elles sont prêtes avant même la première visite. C'est la carte gravée dans la pierre, ultra rapide, ultra SEO-friendly.

TSXtsx

// Next.js - SSG avec generateStaticParams
// app/seo/[slug]/page.tsx

export const dynamic = 'force-static';  // ← Force le SSG

export async function generateStaticParams() {
    return [
     { slug: 'carte-du-monde' },
     { slug: 'panneaux-indicateurs' },
     { slug: 'architecture-quartiers' },
    ];
}

export default async function SeoChapterPage({ params }) {
    const { slug } = await params;
    // Page pré-générée au build → ultra rapide
    return <ChapterComponent slug={slug} />;
}

Avantage vitesse maximale, coût minimal, parfait pour le SEO
Inconvénient contenu figé jusqu'au prochain build
Idéal pour cours, blogs, documentation, pages marketing

7.4ISR, le meilleur des deux mondes

Incremental Static Regeneration (ISR) combine le SSG et le SSR. La page est pré-générée (rapide), mais se régénère automatiquement après un délai que tu choisis, sans rebuild complet.

TSXtsx

// Next.js - ISR avec revalidate
// app/blog/[slug]/page.tsx

export const revalidate = 3600; // Régénère toutes les heures (3600 sec)

export default async function BlogPage({ params }) {
    const { slug } = await params;
    const post = await fetchBlogPost(slug);
    
    return (
     <article>
       <h1>{post.title}</h1>
       <p>{post.content}</p>
     </article>
    );
}
// → Page statique mais fraîche toutes les heures

Avantage rapide + contenu frais sans rebuild
Inconvénient légère latence à la première régénération
Idéal pour blogs, pages produits, contenu mis à jour régulièrement

7.5Quel rendu choisir ?

Le tableau récapitulatif pour choisir ta stratégie de rendu :

Stratégie	Vitesse	SEO	Fraîcheur	Cas d'usage
CSR	Variable	Mauvais	Temps réel	Apps internes, dashboards
SSR	Bon	Excellent	Temps réel	E-commerce, contenu dynamique
SSG	Max	Excellent	Au build	Cours, docs, landing pages
ISR	Très bon	Excellent	Périodique	Blogs, catalogues, actualités

Next.js SEO : rendu côté serveur SSR et ISR

7.1Le problème du rendu côté client (CSR)

7.2SSR, le monde pré-chargé

7.3SSG, la carte gravée dans la pierre

7.4ISR, le meilleur des deux mondes

7.5Quel rendu choisir ?

Verifie tes acquis

Valide et sauvegarde ce chapitre