L'application monopage
L'application monopage face à l'application multipage ; rendu côté client, rendu côté serveur, génération statique et hydratation, et ce que cela change pour le premier affichage, le référencement et le bouton retour.
- 29 cartes
- 6 thèmes
- Gratuit
Le programme, thème par thème
Le poids de chaque thème suit celui que lui donne l'examen.
- Notions
- Questions
- Ranger et relier
- Sur le schéma
- Mises en situation
- Comprendre
Quelques cartes du deck
Application monopage : de quoi s'agit-il ?
Voir la réponse
Application web dont le navigateur charge une seule page HTML, puis dont le script remplace le contenu à chaque navigation en demandant seulement des données.
Les changements d'écran sont rapides et gardent l'état, mais le premier affichage doit attendre le script.
Un utilisateur clique sur un lien interne d'une application monopage. Que contient la requête réseau qui suit, en général ?
- Un appel à l'API qui renvoie les données de l'écran en JSON
- Une requête de la page HTML complète de la nouvelle adresse
- Une requête du script de l'application, à recharger à chaque navigation
- Aucune requête : toutes les données sont déjà dans le navigateur
Voir la réponse
Un appel à l'API qui renvoie les données de l'écran en JSON
Le routeur change l'adresse sans requête de page et choisit le composant ; le composant demande ensuite à l'API les données qu'il affiche. Seules les données voyagent, pas la page.
Avec un rendu côté client, la première réponse HTML contient presque seulement un … vide et une balise … qui construira la page.
Voir la réponse
Avec un rendu côté client, la première réponse HTML contient presque seulement un div vide et une balise script qui construira la page.
Un robot qui ne lance pas le script ne voit qu'un conteneur vide : d'où l'intérêt du rendu côté serveur pour le référencement.
Application multipage : de quoi s'agit-il ?
Voir la réponse
Application web où chaque navigation demande au serveur une nouvelle page HTML complète, que le navigateur affiche en remplaçant la précédente.
Elle est simple, bien référencée et robuste, mais chaque clic recharge les styles, les scripts et perd l'état de la page.