SPA vs MPA
Avant de plonger dans React, il est essentiel de comprendre quel type d'application vous allez construire. React est principalement utilisé pour créer des SPA (Single Page Applications).
Dans cette section, vous allez découvrir la différence fondamentale entre les architectures SPA et MPA, comprendre leurs avantages et inconvénients, et apprendre quand utiliser chacune d'elles.
Qu'est-ce qu'une SPA ?
SPA = Single Page Application (Application à Page Unique)
Une SPA est une application web qui charge une seule page HTML au départ, puis met à jour dynamiquement le contenu sans recharger la page complète.
Fonctionnement
Première visite :
- Le navigateur demande
index.html - Le serveur envoie HTML + JavaScript
- JavaScript s'exécute et React prend le contrôle
- Le contenu s'affiche
Navigation suivante :
- JavaScript intercepte les clics sur les liens
- L'URL change (sans rechargement de page)
- React met à jour uniquement le contenu nécessaire
- Pas de rechargement de page !
Exemple concret : Gmail
Quand vous utilisez Gmail :
- Vous chargez l'application une seule fois
- Quand vous cliquez sur un email, seul le contenu change
- La page ne se recharge jamais
- L'URL peut changer mais sans rechargement
C'est ça, une SPA !
Caractéristiques d'une SPA
✅ Avantages
- Navigation fluide et rapide (pas de rechargement)
- Expérience utilisateur similaire à une application native
- Séparation claire frontend/backend (API)
- Interactions riches possibles
❌ Inconvénients
- Chargement initial plus lent (tout le JavaScript à télécharger)
- SEO difficile (contenu généré par JavaScript)
- JavaScript obligatoire (ne fonctionne pas sans JS)
Que se passe-t-il quand vous cliquez sur un lien dans une SPA ?
Qu'est-ce qu'une MPA ?
MPA = Multi-Page Application (Application Multi-Pages)
Une MPA est une application web traditionnelle où chaque navigation charge une nouvelle page HTML complète depuis le serveur.
Fonctionnement
Chaque navigation :
- L'utilisateur clique sur un lien
- Le navigateur fait une requête au serveur
- Le serveur génère une nouvelle page HTML
- Le navigateur charge et affiche la page complète
- L'écran devient blanc pendant le chargement
MPA = Architecture traditionnelle du web
Les MPA existent depuis les débuts du web. Sites classiques comme WordPress, blogs, forums sont des MPA.
À chaque clic, vous voyez un flash blanc pendant que la nouvelle page se charge.
Caractéristiques d'une MPA
✅ Avantages
- Chargement initial rapide
- SEO facile (HTML complet envoyé par le serveur)
- Fonctionne sans JavaScript
- Plus simple à développer
❌ Inconvénients
- Navigation plus lente (rechargement complet)
- Flash blanc entre les pages
- Moins fluide pour l'utilisateur
- État perdu à chaque navigation
- Requêtes serveur à chaque page
Comparaison SPA vs MPA
| Critère | SPA | MPA |
|---|---|---|
| Chargement initial | Plus lent | Plus rapide |
| Navigation | Instantanée | Rechargement complet |
| Expérience utilisateur | Fluide, app-like | Saccadée (flash blanc) |
| SEO | Difficile | Facile |
| Complexité | État, routing, cache côté client | Serveur gère tout |
| JavaScript | Obligatoire | Optionnel |
| Exemple | Gmail, Spotify Web | WordPress, forums |
Quel est l'avantage principal d'une MPA par rapport à une SPA ?
Quand utiliser une SPA ?
✅ Bon choix pour :
Applications web complexes
- Dashboards d'administration
- Outils de productivité (Google Docs, Notion)
- Applications de gestion (CRM, ERP)
- Réseaux sociaux
- Applications de messagerie
Caractéristiques communes :
- Beaucoup d'interactions utilisateur
- Navigation fréquente
- Utilisateurs connectés (SEO moins important)
- Expérience fluide cruciale
Exemples : Gmail, Figma, Trello, Spotify Web
❌ Mauvais choix pour :
Sites vitrines / blogs / e-commerce
- Site vitrine d'entreprise
- Blog
- Documentation
- Landing pages
- Sites où le SEO est crucial
Pourquoi ?
- SEO essentiel (Google doit voir le contenu)
- Peu d'interactions
- Contenu principalement statique
- Performance initiale importante
React et les SPA
React = SPA par défaut
Quand vous créez une application avec React seul (avec Vite), vous créez une SPA.
Le serveur envoie un fichier HTML quasi-vide :
<html>
<body>
<div id="root"></div>
<script src="bundle.js"></script>
</body>
</html>
Puis React génère tout le contenu dans le navigateur.
Le problème du SEO
Les moteurs de recherche (Google) voient un HTML vide. Le contenu généré par JavaScript peut ne pas être indexé correctement.
Solutions :
- Utiliser Next.js (framework hybride)
- Server-Side Rendering (SSR)
- Static Site Generation (SSG)
Frameworks hybrides
Next.js et autres
Des frameworks comme Next.js, Remix, ou Gatsby combinent les avantages des SPA et MPA :
Première visite (comme une MPA) :
- Le serveur génère le HTML complet
- Meilleur SEO (contenu indexable)
- Contenu visible immédiatement
Navigation suivante (comme une SPA) :
- JavaScript prend le relais
- Navigation instantanée
- Pas de rechargement
Approches de rendu
| Approche | Description | Quand l'utiliser |
|---|---|---|
| CSR (Client-Side Rendering) | Tout rendu dans le navigateur | Dashboards, apps privées |
| SSR (Server-Side Rendering) | HTML généré à chaque requête | Pages dynamiques avec SEO |
| SSG (Static Site Generation) | HTML pré-généré au build | Blogs, docs, sites statiques |
React seul = CSR uniquement
Next.js = CSR + SSR + SSG
Résumé
À retenir
SPA (Single Page Application)
- Une seule page HTML, tout le reste en JavaScript
- Navigation fluide sans rechargement
- React crée des SPA par défaut
- Idéal pour les applications complexes
- Problèmes : SEO difficile, chargement initial lent
MPA (Multi-Page Application)
- Chaque page = nouvelle requête serveur
- Architecture traditionnelle du web
- Bon SEO et chargement initial rapide
- Idéal pour sites vitrines, blogs
Frameworks hybrides (Next.js)
- Combinent SPA + MPA
- Le meilleur des deux mondes
- Vous les découvrirez après React
Pour ce cours
- Vous apprenez React pur (SPA)
- C'est la base pour comprendre Next.js ensuite