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.

Imagine : dans un jeu, le monde peut être pré-chargé à l'avance (la carte est déjà prête quand tu arrives) ou généré en temps réel (le monde se construit sous tes pieds). Sur le web, c'est pareil la façon dont ta page est « rendue » détermine si Google peut la lire ou non. C'est le moteur de rendu.

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.

<!-- 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.

Le CSR, c'est comme un jeu qui charge tout au premier lancement. L'éclaireur (Googlebot) arrive, voit un écran noir, et repart en notant « zone vide ». Pas top pour être sur la carte.

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.

// 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.

// 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

🗿 Le SSG, c'est comme une carte du monde gravée dans la pierre. Ultra rapide à lire, mais pour la mettre à jour, il faut regraver. Parfait pour du contenu stable (comme ce cours SEO !).

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.

// 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

CSR = le monde se charge en jeu (lent). SSR = le serveur charge tout avant de t'envoyer la carte. SSG = la carte est déjà imprimée. ISR = la carte s'actualise toute seule de temps en temps. Pour le SEO, SSG et ISR sont tes meilleurs alliés.