Single Page Application (SPA) : Définition, Pros, Exemples

Q: Différence entre SPA et CSR ?

CSR est stratégie rendering. SPA est architecture.

Une SPA charge une seule page HTML et update le contenu via JS sans recharges complètes. React, Vue, Angular SPAs se sentent app-like.

Qu'est-ce qu'une Single Page Application (SPA) ?

Une Single Page Application (SPA) est une web app qui charge une seule page HTML et update le contenu dynamiquement via JavaScript pendant que l'utilisateur interagit — sans rechargements complets de page. La navigation entre "pages" se passe côté client.

Les SPAs se sentent snappy et app-like (Gmail, Trello, Notion sont toutes des SPAs). Elles trade-offent deux choses : load initial plus lent et SEO plus difficile.

Comment fonctionnent les SPAs

Navigateur requête example.com
Serveur retourne HTML minimal + bundle JS
Navigateur télécharge + exécute bundle JS
JS render home view
Utilisateur click link → JS intercept → update URL + render new view
Données fetched via API

SPA vs MPA

Aspect	SPA	MPA
Navigation page	JS-driven	Serveur retourne HTML complet
Load initial	Lent	Rapide
Navigation subséquente	Instant	Plus lente
SEO out-of-box	Mauvais	Bon
Meilleur pour	UIs app-like	Sites contenu

Frameworks SPA populaires

Framework	Notes
React + React Router	Plus populaire
Angular	Framework complet
Vue + Vue Router	Approachable
Svelte (avec SvelteKit mode SPA)	Framework compile-time
Solid	React-like
Ember	Convention-heavy

Pros et cons SPA

Pros	Cons
UX app-like	Premier load lent
Navigation subséquente rapide	SEO nécessite travail extra
Frontend/backend découplés	Back/forward navigateur besoin handling
APIs réutilisables	Erreur JS casse app entière

Quand utiliser SPA

Dashboards logged-in.
Apps real-time.
UIs très interactives.
Web apps mobile-like.

Quand NE PAS utiliser SPA

Sites contenu-lourd.
Sites nécessitant premier paint instantané.
Devices target low-spec.
SEO critique.

Résoudre les problèmes SPA

SEO : SSR ou prerendering

Serveur render HTML pour crawlers.

Load initial : code splitting

const Settings = lazy(() => import('./Settings'));

Navigation navigateur : utiliser router

<Route path="/users/:id" element={<UserPage />} />

Loading states

Skeleton screens ou spinners.

Best practices SPA

Code-split agressivement.
Utiliser router.
Gérer state explicitement.
Cacher responses API.
Montrer loading states.
Gérer erreurs gracieusement.
Optimiser taille bundle.
SSR/prerender si SEO importe.
Service Workers pour offline.

Pièges SPA courants

Bundles massifs.
SEO afterthought.
Memory leaks.
Historique navigateur cassé.
Navigation seulement JS.
Chaos state management.
Flicker loading.

FAQ : Single Page Application

SPA ou MPA : lequel est meilleur ?

Dépend.

Les SPAs sont-elles mauvaises pour SEO ?

Par défaut oui ; avec SSR ok.

Google indexe-t-il les SPAs maintenant ?

Googlebot exécute JavaScript, mais plus lent.

Qu'est-ce que PWA vs SPA ?

PWA = SPA + support offline + installable.

Quelle taille devrait avoir un bundle SPA ?

< 200KB JS initial gzippé.

Les SPAs meurent-elles avec le rise de SSR/RSC ?

Non.

Différence entre SPA et CSR ?