Guías

Una single-page application, o SPA, es un sitio web que carga un único documento HTML una sola vez y luego actualiza el contenido en el navegador según interactúas, en lugar de pedir una página completamente nueva al servidor en cada clic. La «página única» es literal: el navegador nunca hace una recarga completa en uso normal. Todo, después de esa primera carga, lo gestiona JavaScript reescribiendo la página actual.

De los sitios multipágina a la página única

Para apreciar por qué existen las SPA, ayuda recordar el modelo tradicional al que reaccionaron. En un sitio multipágina clásico, cada enlace o envío de formulario pide al servidor un documento HTML completamente nuevo, que el navegador carga desde cero - cabecera, pie y todo. Es simple y robusto, pero cada navegación implica una recarga visible y un viaje de ida y vuelta al servidor, lo que puede sentirse lento e inconexo.

Una SPA da la vuelta a esto. El servidor envía una cáscara HTML y un bundle de JavaScript en la primera visita; a partir de ahí, navegar a una nueva «página» ejecuta código en el navegador que intercambia la parte relevante de la interfaz y solo trae los datos que necesita, normalmente como JSON desde una API. Como no hay recarga completa, las transiciones pueden ser instantáneas y la experiencia se acerca a la de una app de escritorio o móvil.

Los frameworks y el atractivo de las SPA

Este es precisamente el terreno de los frameworks front-end. React, Vue, Svelte y Angular existen en gran parte para hacer manejable la construcción de SPA, aportando los componentes, la gestión de estado y el enrutado en el cliente que cambian de vista sin recargar. Cuando oyes que un sitio está «hecho con React» o «hecho con Vue», muy a menudo es una SPA - el framework es lo que hace práctico construir y mantener el modelo de página única.

• SPA: carga una cáscara HTML, luego actualiza el contenido en el navegador vía JS
• Construida con frameworks como React, Vue, Svelte o Angular
• Pros: navegación rápida, tipo app, tras la primera carga
• Contras: primera carga más pesada; cuidado con SEO, accesibilidad, enrutado
• El SSR (Next.js, Nuxt) ofrece un primer pintado rápido más la navegación SPA

El atractivo es una experiencia realmente más fluida. Una vez cargado el bundle inicial, las interacciones son rápidas porque la app solo pide datos en vez de documentos enteros, y la interfaz puede actualizarse con fluidez sin el parpadeo de una recarga. Para productos muy interactivos - paneles, editores, aplicaciones web que se comportan como software - esta capacidad de respuesta es una ventaja real y duradera frente al modelo multipágina.

Cómo funciona en realidad una SPA de Vue

Ayuda ver cómo funciona esto en un framework concreto en lugar de en abstracto, y Vue es un caso claro, porque la pieza que convierte una SPA en SPA tiene su propio proyecto oficial. Vue Router se presenta como la solución oficial de enrutamiento del lado del cliente para Vue, y su documentación enuncia el propósito sin rodeos: el enrutamiento del lado del cliente lo usan las aplicaciones de página única para vincular la URL del navegador con el contenido que ve el usuario; a medida que el usuario navega por la aplicación, la URL se actualiza en consecuencia, pero la página no necesita recargarse desde el servidor.

El mecanismo se reduce a dos componentes que colocas en tu marcado. Configuras rutas para indicar a Vue Router qué componentes mostrar para cada ruta de URL. El componente RouterView le dice después a Vue Router dónde renderizar el componente de ruta actual, el que corresponde a la ruta de URL en curso. Las partes de la página que no cambian son marcado corriente, y RouterView señala el hueco donde se inserta la pieza propia de cada página.

La navegación es la otra mitad, y ahí es donde se sostiene la ilusión. En lugar de las etiquetas de enlace normales, usas el componente RouterLink para crear los enlaces, lo que permite a Vue Router cambiar la URL sin recargar la página y encargarse de la generación de URL, la codificación y otras funciones. Esa única sustitución es lo que impide que un clic dispare una petición de documento completa, y explica un fallo habitual entre principiantes: una etiqueta de enlace corriente dentro de una SPA sigue funcionando, pero recarga todo y descarta el estado de la aplicación en el que confiabas.

Vue Router también te pide elegir un modo de historial, mediante createWebHistory, createWebHashHistory o createMemoryHistory, que controla cómo se asignan las rutas a las URL y viceversa. Parece un detalle y no lo es. Decide si tus URL se ven como rutas corrientes y si tu servidor debe configurarse para devolver el mismo esqueleto en todas las rutas. Ese paso del lado del servidor es el que se olvida, y por eso una SPA impecable en desarrollo puede devolver un 404 cuando un visitante recarga un enlace profundo en producción.

Las concesiones, sin rodeos

Pero el modelo SPA conlleva concesiones honestas que hay que diseñar, no ignorar. La primera carga es más pesada, porque el navegador debe descargar y ejecutar un bundle de JavaScript antes de mostrar contenido útil, lo que puede perjudicar la experiencia en conexiones lentas o dispositivos modestos. Si ese bundle crece sin control, la propia rapidez que prometía la SPA puede convertirse en una pantalla inicial lenta y en blanco.

La búsqueda y la accesibilidad merecen un cuidado particular. Como gran parte del contenido se renderiza con JavaScript tras la carga, los motores de búsqueda y las herramientas que no ejecutan scripts pueden ver solo una cáscara vacía, salvo que tomes medidas deliberadas. El enrutado en el cliente también debe implementarse con cuidado para que el botón «atrás» del navegador, los enlaces profundos y el historial se comporten como los usuarios esperan, en lugar de romperse de formas sutiles.

El renderizado en servidor al rescate

La respuesta del sector a estas concesiones es el renderizado en servidor y sus parientes. Meta-frameworks como Next.js para React y Nuxt para Vue renderizan la página inicial en el servidor para que el usuario - y los motores de búsqueda - reciban contenido real de inmediato, y luego la «hidratan» en una SPA completa en el navegador. Este híbrido mantiene el primer pintado rápido de los sitios tradicionales y la navegación fluida de una SPA, y por eso tantas apps modernas lo adoptan.

Elegir la SPA con conocimiento de causa

Nada de esto hace a la SPA universalmente buena o mala. Un sitio de contenido hecho sobre todo de artículos puede estar mejor servido por un enfoque tradicional o estático, mientras que una aplicación ricamente interactiva se beneficia enormemente del modelo SPA. La habilidad está en elegir de forma deliberada, sabiendo que la «página única» te compra interactividad fluida a cambio de una primera carga más pesada y de más responsabilidad sobre la búsqueda y la accesibilidad.

Entendida así, la single-page application no es una palabra de moda sino una elección arquitectónica concreta con fortalezas y costes claros. Carga una vez, funciona en el navegador y se siente como una app - y cuando la combinas con renderizado en servidor, puedes tener gran parte de ese beneficio sin pagar el precio completo. Conocer las concesiones es lo que te permite recurrir a ella en el momento adecuado.