SPA, SSR, SSG et MPA

Plusieurs façons de livrer une page

Quand tu visites un site web, le HTML que ton navigateur reçoit peut venir de sources très différentes. C'est une décision d'architecture fondamentale qui impacte les performances, le SEO et l'expérience utilisateur. Voici les 4 grandes approches.

MPA — Multi-Page Application (la méthode historique)

Chaque clic sur un lien envoie une nouvelle requête au serveur, qui renvoie une nouvelle page HTML complète. C'est le Web originel — PHP, WordPress, sites d'entreprise classiques fonctionnent comme ça.

// MPA : chaque navigation = aller-retour serveur

  Utilisateur clique "À propos"
        │
        ▼
  Requête HTTP GET /a-propos ──▶ Serveur
                              ◀── HTML complet de la page
        │
        ▼
  Navigateur recharge toute la page (flash blanc)

Avantages : simple, SEO excellent, pas de JavaScript requis côté client.

Inconvénients : rechargement complet à chaque navigation, expérience moins fluide.

SPA — Single Page Application

Le serveur envoie une seule page HTML quasi-vide. JavaScript prend ensuite le contrôle total : il récupère les données via des APIs et met à jour le DOM sans jamais recharger la page.

// SPA : une seule page, JavaScript fait tout

  Première visite :
  Navigateur ──▶ Serveur ──▶ <div id="app"></div> + beaucoup de JS

  Navigation suivante :
  JavaScript ──▶ API JSON ──▶ { "titre": "...", "contenu": "..." }
  JavaScript met à jour le DOM
  ← pas de rechargement, transition fluide

Avantages : expérience très fluide (comme une app mobile), transitions animées.

Inconvénients : premier chargement lent (gros bundle JS), SEO difficile, JS obligatoire.

Exemples : Gmail, Figma, Google Maps, React/Vue/Angular par défaut.

SSR — Server-Side Rendering

À chaque requête, le serveur génère le HTML à la volée, en incluant les données actuelles. Le navigateur reçoit un HTML complet et prêt à afficher — mais le JavaScript reprend ensuite le contrôle (on appelle ça l'hydratation).

// SSR : HTML généré à chaque requête

  Requête : GET /articles/42
        │
        ▼
  Serveur lit la BDD ──▶ génère le HTML ──▶ réponse HTML complète
        │
        ▼
  Navigateur affiche immédiatement (premier affichage rapide)
  JavaScript se "greffe" sur le HTML (hydratation)

Avantages : premier affichage rapide, excellent SEO, données toujours fraîches.

Inconvénients : serveur sollicité à chaque requête, plus complexe à mettre en place.

Exemples : Next.js, Nuxt.js, SvelteKit en mode SSR.

SSG — Static Site Generation

Toutes les pages HTML sont générées une seule fois, au moment du déploiement, puis servies comme de simples fichiers statiques. Aucune logique serveur à l'exécution.

// SSG : HTML généré une fois, servi partout

  Au déploiement :
  Données + Templates ──▶ Build ──▶ 500 fichiers HTML statiques

  À chaque visite :
  Navigateur ──▶ CDN ──▶ fichier HTML en cache (ultra-rapide)
  ← aucune BDD, aucun serveur à exécuter

Avantages : ultra-rapide, peu coûteux (hébergeable gratuitement sur Netlify/Vercel), sécurisé (pas de BDD exposée).

Inconvénients : données pas en temps réel (rebuild nécessaire), inadapté aux contenus très dynamiques.

Exemples : ce site (Eleventy), Next.js en mode static, Hugo, Astro.

Comparatif rapide

  // Quelle approche choisir ?

                MPA    SPA    SSR    SSG
  SEO           ✓✓✓    ✗      ✓✓✓    ✓✓✓
  Performance   ✓✓     ✓      ✓✓     ✓✓✓
  Interactivité ✓      ✓✓✓    ✓✓     ✓
  Données live  ✓✓✓    ✓✓✓    ✓✓✓    ✗
  Hébergement   serveur  CDN   serveur  CDN
  Complexité    faible  haute  haute   faible