Module 1Les bases de React
Chapitre 2 sur 18
Créer des applications web monopage (SPA)
Ce qu'est une SPA, la différence avec une MPA, le rôle d'Ajax, le fonctionnement, les avantages et les inconvénients.
- ≈ 110 min
- 4 leçons
- 2 vidéos
- 2 exercices
Module 1Les bases de React
Chapitre 2 sur 18
Ce qu'est une SPA, la différence avec une MPA, le rôle d'Ajax, le fonctionnement, les avantages et les inconvénients.
Objectifs
Avec ce chapitre, tu sauras…
Leçon 1
Résultat : on actualise rarement la page, et l'expérience est fluide et rapide, comme une application installée (application native). Le but des SPA est aussi de rendre les applications utilisables sur presque tous les appareils.
Pourquoi une SPA ? Plus rapide, plus fluide, plus proche d'une application native : c'est attrayant pour le visiteur, mais aussi pour les spécialistes du marketing et les développeurs.
Leçon 2
SPA et MPA reposent toutes les deux sur le protocole HTTP.
| MPA (Multiple Page Application) | SPA (Single Page Application) | |
|---|---|---|
| un clic de l'utilisateur… | envoie une requête HTTP au serveur | est traité par JavaScript dans le navigateur |
| le serveur renvoie… | une page HTML complète | seulement des données (souvent en JSON), par Ajax |
| la page… | est entièrement rechargée, même si une partie ne change pas | n'est pas rechargée : seule la partie utile change |
Vidéo · À regarder
FRApprendre React en 1 heure - Cours complet débutant
Comment Coder · YouTube
Leçon 3
Vidéo · À regarder
FRTuto React débutant - Apprendre les bases de React en 2024
front-end · YouTube
Leçon 4
| Avantages | Inconvénients |
|---|---|
| Vitesse accrue : les nouvelles informations sont chargées dans la même page, à la demande | Historique du navigateur : la SPA n'enregistre pas les passages d'un état à l'autre ; le bouton « retour » ramène à la page précédente, pas à l'état précédent |
| Expérience utilisateur (UX) : pas besoin de cliquer sur de nombreux liens et d'attendre le chargement des pages | Référencement (SEO) : le contenu étant créé par JavaScript, il est plus difficile à optimiser pour les moteurs de recherche |
| Mise en cache : une seule requête, les données sont stockées et peuvent servir hors ligne | Sécurité : plus exposée aux attaques XSS (cross-site scripting) : un pirate injecte des scripts côté client |
| Débogage avec Chrome : plus facile ; React et Angular ont leurs propres outils de débogage |
1Une SPA est rendue principalement…
2Dans une MPA, chaque clic provoque…
3La technique qui récupère des données en arrière-plan s'appelle…
4Au premier chargement, une SPA…
5Lequel est un inconvénient d'une SPA ?
6Une SPA est plus exposée aux attaques…
7Le bouton « retour » d'une SPA sans routeur ramène…
L'essentiel du chapitre
fetch, axios.Ajax est un ensemble de techniques qui permet au navigateur d'envoyer et de récupérer des données du serveur en arrière-plan (de façon asynchrone), sans gêner l'affichage de la page. C'est le cœur d'une SPA. En JavaScript moderne, on fait de l'Ajax avec fetch ou la bibliothèque axios (chapitre 10).
Ce que tu vas voir (6 min) : le chapitre « Appeler une API avec fetch » : le formateur demande des données à un serveur avec fetch, attend la réponse et l'affiche sans recharger la page. C'est le mécanisme Ajax sur lequel repose une SPA.
L'idée principale : réduire les appels au serveur pour supprimer les temps d'attente.
Ce que tu vas voir (2 min) : le chapitre « Le principe d'une SPA » : une seule page HTML chargée une fois, puis seules les parties utiles changent, sans rechargement. C'est la section « Le fonctionnement d'une application SPA ».
Les SPA profitent de mises en page répétitives (le menu, l'en-tête restent en place) et du contenu à la demande. Elles sont plus efficaces, coûtent moins cher et consomment moins d'énergie.
Un client hésite entre une SPA et un site multipage pour sa boutique. Rédige en 6 lignes deux avantages et deux inconvénients d'une SPA, avec des mots simples.
Pour chaque site, dis s'il se comporte plutôt comme une SPA ou une MPA, et justifie en une phrase (observe si la page devient blanche au clic) : (1) Gmail ; (2) le site d'un journal en ligne classique ; (3) Google Maps ; (4) un formulaire d'inscription en PHP qui affiche une nouvelle page après l'envoi.
Une SPA est une excellente base pour développer ensuite une application mobile : pas de rechargement, pas d'attente.
Les inconvénients « historique » et « référencement » sont largement résolus : React Router gère le bouton retour (chapitre 12), et des frameworks basés sur React comme Next.js génèrent le HTML côté serveur pour le référencement.