SPA – Single Page Application

Une application web monopage (single page application) est une application composée d’une seule page HTML utilisant le navigateur de l’utilisateur pour générer le contenu à afficher.

Cette page quasiment vide est composée d’un nœud racine, un conteneur qui charge du JavaScript construit, préparé à l’avance du côté serveur.

Les informations sont chargées dynamiquement et affichées au besoin de l’utilisateur par le navigateur (client) sans aller-retours vers le serveur. Les éléments à charger sont générées en portions HTML par des composants comme par exemple un menu, un pied de page.

Les principaux principes fondamentaux d’une Single Page Application (SPA) sont les suivants :

Les utilisateurs ne chargent la page HTML qu’une seule fois.

Après le chargement initial de la page HTML, la navigation à l’intérieur de l’application se fait sans recharger l’ensemble de la page. Bien qu’un rafraîchissement manuel du navigateur puisse réinitialiser ce comportement, le fonctionnement conçu de la SPA repose sur ce principe.

JavaScript gère l’affichage des nouvelles pages sans rafraîchissement complet.

Le routage et la mise à jour de l’interface sont gérés côté client via JavaScript (avec des frameworks comme React, Vue ou Angular), ce qui permet une expérience fluide et interactive.

L’application communique avec le serveur principalement pour échanger des données, souvent en JSON.

Les interactions avec le serveur se font via des API (REST, GraphQL, etc.) pour récupérer ou envoyer des données structurées (généralement au format JSON), tandis que le rendu de l’interface reste entièrement géré côté client.

Angular

React

Vue.js

Single SPA JS

Les contenus de définition restent publics. Les ressources (outils, grilles, supports) liées à cette fiche sont disponibles dans l’espace membre.