Wavenet Podcast - Focus Tech - Comment choisir votre architecture frontend ? SPA, SSR, SSG

Wavenet Podcast – Focus Tech

Comment choisir votre architecture frontend ? SPA, SSR, SSG

Après avoir exploré la question « Les clients légers sont-ils devenus trop lourds ? », l’équipe du Wavenet Podcast – Focus Tech poursuit sa série consacrée au frontend.

Dans cet épisode, trois architectures sont mises en perspective : SPA, SSR et SSG.
L’objectif est clair : comprendre comment elles fonctionnent, comment elles se construisent et surtout dans quels contextes elles sont pertinentes.

Avec Antoine Richez, Olivier Bossaer et Simon Baudart, l’échange se veut pédagogique, concret et orienté terrain.

Trois architectures, trois façons de penser le web

« C’est une commande, c’est clairement le plus simple de tous. »
— Antoine Richez

SPA — Single Page Application

Une SPA (Single Page Application) est une application web composée d’une seule page HTML, dont le contenu est mis à jour dynamiquement grâce au JavaScript exécuté côté navigateur.

Concrètement :

• le navigateur charge une page unique ;
• les transitions et changements de contenu se font sans rechargement complet ;
• seules les données sont échangées avec le serveur via des requêtes HTTP (API, fetch…).

« On accède à un site web, et en fait il n’y a qu’une seule page.
Les changements sont virtuels : tout ce qu’on voit dans le navigateur, ce n’est que du code dynamique rendu à l’utilisateur. »

— Antoine Richez

Comment ça fonctionne ?

Au moment du build, le framework (React, Angular…) compile l’ensemble du JavaScript dans un bundle, généralement à l’aide d’outils comme Webpack ou Vite.
Ce bundle est distribué avec la page HTML principale.

Une fois chargé :

• la navigation devient très fluide ;
• l’interface est réactive et continue.

Points d’attention

Cette approche a toutefois des limites :

• le chargement initial peut être plus lent, car le navigateur doit télécharger et exécuter tout le JavaScript ;
• le HTML étant quasiment vide au départ, le référencement peut être plus complexe.

À retenir
• Très dynamique et fluide
• Chargement initial et SEO plus délicats

SSR — Server‑Side Rendering

Le SSR (Server‑Side Rendering) repose sur une logique différente : le rendu initial est effectué sur le serveur.

Lorsqu’un utilisateur accède au site :

• le serveur génère une page HTML complète ;
• le contenu est visible immédiatement ;
• le JavaScript prend ensuite le relais pour gérer l’interactivité.

« On a un bundle client, un bundle serveur, et c’est ce dernier qui va faire la génération complémentaire au moment où on affiche la page. »

Pourquoi choisir le SSR ?

Le principal avantage réside dans :

• un affichage initial rapide ;
• une meilleure perception de performance ;
• un référencement facilité.

Des frameworks comme Next.js ou Nuxt.js reposent sur ce modèle hybride, combinant rendu serveur et logique client.

Complexité technique

Le JavaScript s’exécute dans deux environnements distincts :

• le navigateur ;
• le serveur.

« Toutes les API ne sont pas disponibles partout. »

Certaines fonctionnalités (géolocalisation, accès au DOM…) ne sont disponibles que côté client, ce qui demande plus de rigueur dans le développement.

À retenir
• Bon équilibre entre performance et SEO
• Architecture plus complexe à maîtriser

SSG — Static Site Generation

Le SSG (Static Site Generation) consiste à générer l’ensemble du site à l’avance, avant sa mise en ligne.

Chaque page est :

• construite lors de la phase de génération ;
• optimisée ;
• stockée sous forme de fichiers statiques prêts à être servis.

« Quand on fait une génération statique, on sait exactement ce qu’on va sortir.
On peut compresser au maximum. »

— Olivier Bossaer

Avantages clés

• Performances très élevées
• Capacité à supporter un grand nombre d’utilisateurs
• Infrastructure simple
• Surface d’attaque réduite

« Le SSG, c’est du neuf avec du vieux.
On revient aux sites statiques, mais avec les outils d’aujourd’hui. »

— Simon Baudart

Limites

Le revers de la médaille est le manque de dynamisme :

• toute modification de contenu nécessite une nouvelle génération ;
• peu adapté aux contenus mis à jour en temps réel.

Le SSG est particulièrement pertinent pour :

• sites vitrines ;
• blogs ;
• documentations techniques ;
• catalogues à faible fréquence de mise à jour.

À retenir
• Performance, simplicité et sobriété
• Dynamisme limité

Conclusion — Tout est une question de choix

« En résumé, le SSG gagne sur les performances et la sécurité,
le SSR reste l’entre‑deux,
et la SPA s’impose dès qu’on cherche du dynamisme. »
— Pierre‑Arnaud Delsaut

Les invités s’accordent sur un point essentiel : aucune architecture n’est universellement meilleure.
Le bon choix dépend toujours du contexte du projet.