Pourquoi le SSG avec Next.js accélère votre site (et votre CA)

Q: Le SSG est-il adapté à tous mes besoins ?

Le SSG brille pour les pages dont le contenu change peu : pages d'accueil, services, fiches produits catalogue, blog. Pour des tableaux de bord, des dashboards ou des pages personnalisées, on préférera l'ISR ou le SSR en fonction du besoin.

Q: Vercel est-il vraiment nécessaire ?

Non. Le SSG avec Next.js fonctionne sur un hébergement classique. Vercel apporte surtout un CDN edge, des previews automatiques par branche et une scalabilité sans administration système.

27 août 2026

nextjs

performance

seo

vercel

Introduction

Vous avez probablement déjà lu ce chiffre : 53 % des visiteurs mobiles quittent un site qui charge en plus de trois secondes. Sur le web professionnel, ce n’est pas un défaut de design, c’est une perte sèche. Un site de plombier qui met 2,8 secondes à afficher sa page de prix perd déjà la moitié des prospects qui atterrissent dessus après une recherche Google. Pourtant, il existe une technique largement éprouvée, intégrée nativement dans Next.js, qui permet de répondre à ces pages en moins de 200 ms : le Static Site Generation, ou SSG. Et pour un artisan, un commerçant ou un indépendant qui veut que son site travailler pour lui la nuit, c’est peut-être la plus rentable des optimisations.

Différencier SSG, SSR, ISR et CSR sans se perdre

Quand on parle de performance, les acronymes fusent. Voici la version simple :

Type	Quoi	Quand l'utiliser
SSG (Static Site Generation)	Les pages sont générées une fois, au moment du build.	Sites vitrines, blogs, fiches produits catalogue, pages services.
SSR (Server-Side Rendering)	Le HTML est généré à chaque requête, sur le serveur.	Tableaux de bord, pages compte client, contenus ultra-personnalisés.
ISR (Incremental Static Regeneration)	Le SSG se met à jour périodiquement sans tout regénérer.	Blogs avec mise à jour quotidienne, fiches produits aux stocks variables.
CSR (Client-Side Rendering)	La page est quasi vide au chargement, tout arrive via JavaScript.	Applications interactives complexes, outils internes.

Le SSG est le mode par défaut le plus approprié pour la majorité des sites professionnels. Pourquoi ? Parce qu’un site vitrine n’a pas besoin d’être recalculé à chaque visiteur : il change une fois par semaine, quand son propriétaire publie une nouvelle réalisation. Le SSG pré-génère l’HTML complet, prêt à être envoyé par le CDN, sans requête base de données, sans calcul JavaScript bloquant.

Impact chiffré sur un site vitrine

Lorsque j’ai migré un site e-commerce de produits du Tarn vers Next.js en mode SSG, les résultats ont été immédiats :

Temps de premier octet (TTFB) : passé de 380 ms à 90 ms grâce à la pré-génération et au CDN Vercel.
First Contentful Paint : 0,9 s au lieu de 2,4 s.
Taux de rebond mobile : -34 % sur trois mois.
Conversions : +18 % sur le formulaire de demande de devis.

Ces chiffres ne sont pas un cas isolé. Google lui-même indique que le temps de chargement est un facteur de ranking, d’abord parce qu’un site lent dégrade l’expérience utilisateur, ensuite parce qu’il consomme plus de données côté mobile, là où 60 % des recherches locales se font aujourd’hui. Pour un artisan albigeois qui veut apparaître dans les résultats « plombier Albi » ou « traiteur Tarn », chaque dixième de seconde compte.

Cas concret : un site e-commerce de produits locaux

Prenons l’exemple d’un site vendant des confitures artisanales du Tarn. Chaque fiche produit comporte une photo, un titre, un prix et un texte de description. Sans SSG, chaque visite déclenche tout ou partie de ces chargements dynamiques. Avec Next.js SSG :

Tsx

// app/products/confiture-fraise-marans/page.tsx
import fs from 'fs'
import path from 'path'

export async function generateStaticParams() {
  const files = fs.readdirSync(path.join(process.cwd(), 'content/products'))
  return files.map((name) => ({ slug: name.replace(/\.mdx$/, '') }))
}

export default async function ProductPage({ params }) {
  const data = await getProduct(params.slug)
  return (
    <main>
      <h1>{data.title}</h1>
      <p>{data.price}</p>
      <div dangerouslySetInnerHTML={{ __html: data.description }} />
    </main>
  )
}

Ici, generateStaticParams indique à Next.js de pré-générer une page HTML pour chaque fiche produit au moment du build. Le visiteur reçoit un HTML complet et lisible immédiatement, sans attendre que le serveur exécute du code ou interroge une base de données. Le gain de performance est purement gratuit.

Ce que je livre aux clients Occitaweb avec Next.js

Je ne propose pas du SSG comme une option technique abstraite : c’est la fondation de chaque site professionnel que je livre.

Performance mesurée : chaque page passe par Lighthouse (score > 90 visé) avant envoi au client.
Images optimisées : format webp, srcset et sizes adaptatifs, loading="lazy" hormis la cover.
SEO local : structure sémantique, balises hreflang si besoin, sitemap.xml généré automatiquement par Next.js.
Hébergement Vercel ou autre : le SSG fonctionne partout, mais Vercel apporte un edge CDN sans configuration.
CMS optionnel : je peux coupler Next.js SSG à Wisp ou Sanity pour que le client modifie son contenu sans toucher au code, tout en conservant des pages ultra-rapides.

Le résultat est un site qui charge vite, qui plaît à Google, et qui rassure les clients dès la première impression.

FAQ