Problemas y limitaciones de las Single Page Applications (SPAs)
Clase 2 de 17 • Curso de Server Side Render o SSR con React.js
Resumen
¿Qué es el problema de la Single Page Application?
Cuando hablamos de Single Page Applications (SPA), nos referimos a una experiencia de navegación sumamente fluida y eficiente, ofrecida por las aplicaciones web modernas. Estas aplicaciones cargan todo el HTML, CSS y JavaScript desde un inicio, creando un único punto de entrada codificado, como un archivo llamado bundle.js, que permite al navegador acceder sin múltiples recargas. Frameworks más conocidos como React, Vue y Svelte siguen este patrón a través de bundlers, como Webpack o Parcel. Sin embargo, las SPAs no están exentas de inconvenientes. A lo largo de este contenido, descubriremos los pros y contras de las SPAs, desde problemas de peso hasta cuestiones de SEO, y exploraremos cómo solucionarlos.
¿Cómo contrastan las SPA con las MPA?
En el pasado, cuando el desarrollo web no contaba con tecnologías como React, construir aplicaciones implicaba crear múltiples archivos HTML almacenados en un servidor. Navegar entre estos sitios web desencadenaba constantes recargos de página, pues cada link solicitaba y descargaba un nuevo archivo HTML, CSS o JavaScript del servidor; este enfoque se conoce como Multi-Page Application (MPA). Aunque permitía modularizar las aplicaciones y reducir tamaño al requerir solo archivos necesarios, generaba complicaciones, como duplicación de código y problemas de caché con estilos.
Al contrario, las SPAs han simplificado la navegación mediante el uso de un router virtual, evitando tener que hacer nuevas peticiones al servidor con cada cambio de ruta. Todo se carga inicialmente, y la aplicación controla internamente la transición entre "páginas".
¿Cuál es el impacto del tamaño en las SPA?
El tamaño es un factor crucial para las SPAs. Con solo tres rutas, los recursos como HTML, CSS y JavaScript pueden mantenerse en kilobytes, ofreciendo una experiencia rápida. Sin embargo, aplicaciones extensas como Platzi, con miles de rutas estáticas y dinámicas, pueden alcanzar megabytes o incluso gigabytes. Se corre el riesgo de crear "monolitos" pesados que afectan el rendimiento y la fluidez inicial, pues el navegador descarga todo al inicio. Encontrar el equilibrio entre tamaño y funcionalidad es vital.
¿Qué problemas adicionales presentan las SPA?
Además del tamaño, las SPA enfrentan desafíos con la indexación y SEO. Como el DOM se genera una vez ejecutado el JavaScript, los motores de búsqueda pueden no interpretar correctamente el contenido. Además, las SPAs dependen altamente del JavaScript. Si el navegador no ejecuta JavaScript, la aplicación no funciona, lo que implica mayores riesgos de seguridad, debido a la dependencia mayor de este recurso y la carga del router en el navegador en lugar del servidor.
A pesar de estos obstáculos, existe una solución: el Server-Side Rendering (SSR), que abordaremos en clases futuras, para mejorar la eficiencia y visibilidad de las SPAs. Siempre es posible mitigar los problemas con estrategias adecuadas, manteniendo la promesa de una experiencia de usuario fluida y optimizada.