Single Page Application (SPA)
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.
Termes associés
React
React est une bibliothèque JavaScript open source, développée chez Facebook, devenu Meta, et publié...
Front-end
Le front-end désigne la partie d'un site ou d'une application qui s'exécute dans le navigateur de l...
Design System
Un design system est l'ensemble structuré et documenté des règles, composants et ressources qui déf...
Shadow DOM
Le Shadow DOM est une fonctionnalité native du navigateur qui permet de rattacher à un élément un s...
Web Component
Un Web Component est un élément HTML personnalisé, réutilisable et encapsulé, construit à partir de...
Routing (ou Routeur)
Le routing est le mécanisme qui associe une URL à un contenu ou à une action. Le routeur est le com...
