¿Qué es SPA?

También llamado: Single Page Application, aplicación de una sola página

Definición

Una SPA (Single Page Application) es una web que carga una sola página HTML y, a partir de ahí, cambia el contenido con JavaScript sin recargar. Así funcionan Gmail, Trello o la mayoría de paneles de control.

En una web tradicional, cada clic en un enlace pide una página nueva al servidor. En una SPA, el navegador descarga la aplicación JavaScript una vez y luego solo pide datos (normalmente JSON a una API) para pintar cada pantalla. La navegación se siente instantánea, como en una aplicación de escritorio.

Ejemplo

El HTML que envía el servidor en una SPA pura está casi vacío:

<!doctype html>
<html lang="es">
<head><title>Mi app</title></head>
<body>
  <div id="app"></div>
  <script type="module" src="/assets/app.4f2a9c.js"></script>
</body>
</html>

Todo lo que ve el usuario lo genera app.js. Frameworks como React, Vue, Angular o Svelte se usan para construir SPA.

Ventajas e inconvenientes

A favor	En contra
Navegación fluida, sin recargas	Primera carga más lenta (hay que descargar la app)
Separación clara entre frontend y API	SEO más difícil: el HTML inicial está vacío
Buena para aplicaciones con mucha interacción	Más JavaScript, peor en móviles modestos

Cuándo usarla

Es ideal para paneles, herramientas y zonas privadas. Para webs de contenido que deben posicionar (blogs, tiendas, documentación) suele ser mejor SSR o un sitio estático, o frameworks híbridos que combinan ambas cosas.

Errores habituales

Olvidar configurar el servidor para que cualquier ruta (/panel/ajustes) devuelva index.html: al recargar o entrar por un enlace directo aparece un 404.

¿Tienes un producto o servicio relacionado con SPA? Anúnciate en este término.

Términos relacionados

Categorías: Frontend