SGénéral

Single Page Application (SPA)

Définition complète et explications détaillées

Une Single Page Application, ou application monopage, est une application web qui charge un seul document HTML puis met à jour son contenu en JavaScript au fil de la navigation, sans jamais recharger complètement la page. Le serveur ne renvoie plus des pages entières, mais des données que le navigateur met en forme.

Le modèle classique fonctionne comme un catalogue papier : chaque clic demande une nouvelle feuille au serveur, qui l'imprime et vous la tend. La SPA ressemble davantage à un logiciel de bureau : le programme est chargé une fois, puis il ne va chercher que les informations manquantes.

Comment ça marche

Le premier chargement livre un squelette HTML très léger et un ensemble de fichiers JavaScript. Une fois exécuté, ce code prend la main : un routeur côté client intercepte les clics, appelle une API pour récupérer les données au format JSON, puis remplace la partie de l'interface concernée. L'API History maintient l'adresse à jour, ce qui permet de revenir en arrière et de partager un lien. Le découpage du code par route évite de tout télécharger d'un coup, et un cache client conserve les réponses déjà obtenues.

Ce qu'elle apporte

  • Des transitions immédiates entre les écrans, une fois le premier chargement passé
  • Un état conservé d'un écran à l'autre : panier, filtres appliqués, brouillon en cours, lecteur audio qui continue
  • Une séparation nette entre l'interface et l'API, qui peut alors servir aussi une application mobile
  • Un fonctionnement partiellement hors ligne possible grâce à un service worker

Les limites

  • Le premier affichage est plus lent et plus lourd, ce qui pèse directement sur les indicateurs de performance perçue
  • Le référencement dépend de la capacité des robots à exécuter le JavaScript ; les moteurs de réponse et les aperçus de partage sur les réseaux sociaux sont nettement moins tolérants que Google
  • L'accessibilité demande un travail manuel : déplacer le focus, annoncer le changement de vue, gérer le titre du document
  • La complexité se déplace vers le navigateur : gestion d'état, invalidation du cache, gestion des erreurs réseau et des sessions expirées
  • Le suivi d'audience ne se déclenche plus tout seul à chaque page vue

Quand la choisir, quand l'éviter

La SPA est un bon choix derrière une authentification : outil métier, tableau de bord, éditeur, espace client. Là, le référencement est hors sujet et l'interactivité prime. Elle est un mauvais choix pour un site vitrine, un blog ou un site marchand dont l'acquisition dépend de la recherche : préférez un rendu côté serveur ou un site statique. Les méta-frameworks comme Nuxt et Next offrent le compromis le plus courant, avec un rendu serveur au premier appel puis une navigation cliente ensuite.

👉 Avant de trancher, mesurez sur un mobile de milieu de gamme et un réseau bridé, pas sur votre poste de développement. C'est sur cette configuration que le surcoût du premier chargement devient visible, et c'est celle de la majorité de vos visiteurs.
Développez votre SPA avec notre expertise React.

Termes associés