Single Page Application (SPA): Definición, Pros, Ejemplos

Q: ¿Diferencia entre SPA y CSR?

CSR es estrategia rendering. SPA es arquitectura.

Una SPA carga una sola página HTML y actualiza contenido vía JS sin recargas completas. React, Vue, Angular SPAs se sienten app-like.

¿Qué es una Single Page Application (SPA)?

Una Single Page Application (SPA) es una web app que carga una sola página HTML y actualiza contenido dinámicamente vía JavaScript mientras el usuario interactúa — sin recargas completas de página. Navegación entre "páginas" sucede client-side.

Las SPAs se sienten snappy y app-like (Gmail, Trello, Notion son todas SPAs). Trade-offean dos cosas: load inicial más lento y SEO más difícil.

Cómo funcionan las SPAs

Navegador requestea example.com
Servidor devuelve HTML mínimo + bundle JS
Navegador descarga + ejecuta bundle JS
JS renderea home view
Usuario click link → JS intercepta → actualiza URL + renderea nueva view
Datos fetcheados vía API

SPA vs MPA

Aspecto	SPA	MPA
Navegación página	JS-driven	Servidor devuelve HTML completo
Load inicial	Lento	Rápido
Navegación subsecuente	Instant	Más lenta
SEO out-of-box	Malo	Bueno
Mejor para	UIs app-like	Sitios contenido

Frameworks SPA populares

Framework	Notas
React + React Router	Más popular
Angular	Framework completo
Vue + Vue Router	Approachable
Svelte (con SvelteKit modo SPA)	Framework compile-time
Solid	React-like
Ember	Convention-heavy

Pros y cons SPA

Pros	Cons
UX app-like	Primer load lento
Navegación subsecuente rápida	SEO requiere trabajo extra
Frontend/backend desacoplados	Back/forward navegador necesita handling
APIs reusables	Error JS rompe app entera

Cuándo usar SPA

Dashboards logged-in.
Apps real-time.
UIs muy interactivas.
Web apps mobile-like.

Cuándo NO SPA

Sitios contenido-pesado.
Sitios necesitando primer paint instantáneo.
Devices target low-spec.
SEO crítico.

Resolviendo problemas SPA

SEO: SSR o prerendering

Servidor renderea HTML para crawlers.

Load inicial: code splitting

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

Navegación navegador: usar router

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

Loading states

Skeleton screens o spinners.

Mejores prácticas SPA

Code-splitear agresivamente.
Usar router.
Manejar state explícitamente.
Cachear responses API.
Mostrar loading states.
Manejar errores grácilmente.
Optimizar tamaño bundle.
SSR/prerender si SEO importa.
Service Workers para offline.

Pitfalls SPA comunes

Bundles masivos.
SEO afterthought.
Memory leaks.
Historia navegador rota.
Navegación solo JS.
Caos state management.
Flicker loading.

FAQ: Single Page Application

¿SPA o MPA: cuál es mejor?

Depende.

¿Son SPAs malas para SEO?

Por default sí; con SSR ok.

¿Indexa Google SPAs ahora?

Googlebot corre JavaScript, pero más lento.

¿Qué es PWA vs SPA?

PWA = SPA + soporte offline + instalable.

¿Cuán grande debería ser un bundle SPA?

< 200KB JS inicial gzipped.

¿Están muriendo SPAs con el rise de SSR/RSC?

No.

¿Diferencia entre SPA y CSR?