SPA, PWA y SSR: diferencias y funcionamiento

Tres formas de entender una aplicación web

En el desarrollo web aparecen con frecuencia las siglas SPA, PWA y SSR. Aunque pueden encontrarse dentro del mismo proyecto, describen aspectos diferentes de una aplicación.

SPA se refiere principalmente a cómo se organiza la navegación y la actualización de la interfaz. PWA describe capacidades que permiten que una aplicación web ofrezca determinadas características propias de una aplicación instalable. SSR se refiere a dónde y cuándo se genera el HTML que recibe el navegador.

1. ¿Qué es una SPA?

SPA significa Single Page Application.

En una SPA, la aplicación carga una página inicial y posteriormente actualiza partes de la interfaz sin necesitar cargar un documento HTML completamente nuevo para cada navegación.

Podemos representarlo de forma simplificada:

Navegador
   ->
Carga inicial
   ->
Aplicación JavaScript
   ->
Actualizaciones de la interfaz

El navegador mantiene la aplicación cargada y el código JavaScript se encarga de actualizar el contenido que cambia.

Esto permite construir interfaces donde la navegación puede sentirse continua, aunque la aplicación siga realizando peticiones al servidor cuando necesita nuevos datos.

2. ¿Qué es una PWA?

PWA significa Progressive Web App.

Una PWA es una aplicación web que puede incorporar capacidades adicionales para ofrecer una experiencia más cercana a la de una aplicación instalada.

Entre los componentes asociados con este modelo se encuentra el service worker, que permite interceptar determinadas solicitudes y participar en estrategias de almacenamiento en caché y funcionamiento sin conexión, según cómo se implemente la aplicación.

También existe un web app manifest, que proporciona información utilizada por el navegador para describir la aplicación y sus características de instalación.

Podemos resumir la idea así:

Aplicación Web
   +
Service Worker
   +
Web App Manifest
   ->
PWA

Una PWA sigue siendo una aplicación web. El hecho de que pueda instalarse o trabajar con determinados recursos sin conexión depende de la implementación y de las capacidades disponibles en el entorno donde se ejecuta.

3. ¿Qué es SSR?

SSR significa Server-Side Rendering.

En este modelo, el servidor genera el HTML antes de enviarlo al navegador.

El flujo básico puede representarse así:

Navegador
   ->
Servidor
   ->
Generación de HTML
   ->
Respuesta HTTP
   ->
Navegador

El navegador recibe HTML generado por el servidor y posteriormente puede ejecutar JavaScript para añadir comportamiento e interactividad, según la aplicación.

SSR no significa que todo el código de una aplicación tenga que ejecutarse exclusivamente en el servidor. Se refiere específicamente al proceso de generación inicial del HTML.

4. SPA y SSR pueden coexistir

SPA y SSR no son conceptos necesariamente opuestos.

Una aplicación puede utilizar renderizado en el servidor para entregar el HTML inicial y después continuar funcionando con comportamiento similar al de una SPA en el navegador.

De forma simplificada:

Servidor
   ->
HTML inicial
   ->
Navegador
   ->
JavaScript
   ->
Navegación y actualizaciones sin recargar el documento completo

Por eso es necesario distinguir entre la estrategia de renderizado y la forma en que la aplicación gestiona la navegación después de la carga inicial.

5. SPA y PWA también pueden combinarse

Una SPA puede incorporar características propias de una PWA.

Por ejemplo, una aplicación que actualiza su interfaz sin recargar completamente el documento puede añadir un service worker y un web app manifest. En ese caso, ambos conceptos describen características diferentes del mismo proyecto.

SPA
+
PWA
=
Aplicación web de una sola página con capacidades propias de una PWA

Que una aplicación sea SPA no significa automáticamente que sea PWA. Son conceptos independientes.

6. SSR, SPA y PWA describen capas diferentes

Una forma sencilla de diferenciarlos es observar qué aspecto de la aplicación describe cada concepto:

SPA -> navegación y actualización de la interfaz
PWA -> capacidades de la aplicación web
SSR -> generación del HTML en el servidor

Esta distinción evita tratar las tres siglas como alternativas directas. Una aplicación puede utilizar una sola de estas características o combinar varias.

Consideraciones

SPA describe una estrategia en la que la interfaz se actualiza principalmente dentro de una aplicación cargada en el navegador. PWA describe capacidades adicionales de una aplicación web, como el uso de un service worker y un web app manifest. SSR describe la generación del HTML en el servidor antes de enviarlo al navegador.

Por eso, SPA, PWA y SSR no representan tres tecnologías equivalentes. Cada término responde a una pregunta diferente sobre cómo está construida y cómo funciona una aplicación web.

© Arturo Juárez Monroy