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 ?