Una Single Page Application no es tu mejor opción

Curso de Progressive Web Apps con React.js

COMPARTE ESTE ARTÍCULO Y MUESTRA LO QUE APRENDISTE

El tiempo promedio que se tarda en cargar una landing page promedio en dispositivos móviles es 15 segundos. El 53% de los visitantes de sitios web móviles abandonan una página si demora más de 3 segundos en cargar. Mobile Page Speed Benchmarks

Últimamente se ha vuelto muy popular elegir una Single Page Application para empezar a desarrollar la mayoría de tus proyectos web. Y no es en vano. Construir SPAs tiene muchos beneficios:

Son fáciles de desarrollar y desplegar.
Son fáciles de depurar.
Presentan el contenido de una manera fácil, elegante y efectiva debido a que cargan todo el contenido en una sola página.
Al ejecutar la lógica del lado del navegador, todas las interacciones del usuario se ejecutan más rápido.

Pero esta cantidad de beneficios incluye algunas desventajas:

El SEO del sitio no está optimizado.
En sitios muy grandes se empieza a complicar el mantenimiento del código.
Si no seguimos buenas prácticas, la seguridad del sitio se puede ver expuesta, ya que el código fuente se encuentra directamente en el navegador.
La carga inicial de nuestro sitio es muy demorada, esto puede alejar posibles clientes.

Parece que todos los beneficios de una SPA no serán de gran utilidad si queremos captar nuevos usuarios, ya que la primera carga del sitio puede demorar mucho más de 3 segundos. Y solo por eso es muy probable que el futuro cliente decida no volver nunca más.

Dando velocidad con SSR

Las SPA envían un HTML muy sencillo al navegador Al recibirlo, debemos descargar un archivo de JavaScript muy pesado y ejecutar el archivo que posteriormente mostrará la página al usuario. Esto es conocido como Client Side Rendering (CSR) y como puedes ver es un proceso muy demorado. El usuario debe esperar todo este tiempo para poder empezar a usar nuestra aplicación.

Por otro lado, Server Side Rendering (SSR) envía el HTML, CSS y un poco de JavaScript al navegador para que los usuarios puedan ver la página desde el inicio. Esto trae consigo dos grandes mejoras:

Mejora drásticamente el performance de nuestra página y con ello la experiencia del usuario. Se acabaron los tiempos de carga mayores a 3 segundos.
Aunque los spiders de los buscadores que indexan los sitios web ya pueden leer JavaScript, el SEO de tu página mejora bastante, ya que obtienen el contenido desde el primer momento.

Eleva la velocidad y experiencia del usuario de tu sitio con PWAs

Una Progressive Web App (PWA) es un sitio web que sigue utilizando JavaScript, CSS y HTML, pero busca mejorar la experiencia del usuario según las funcionalidades que le permita cada navegador, todo esto con el fin de acercarse más al funcionamiento de una aplicación móvil nativa.

El propósito principal de las PWAs es que tu aplicación web pueda brindar una experiencia casi nativa a los usuarios para aumentar tu número de usuarios y sus conversiones. Si quieres conocer múltiples historias de éxito entra a PWA Stats.

Un sitio web debe cumplir 3 requisitos técnicos para ser una PWA:

Utilizar HTTPS.
Contar con un archivo Web Manifest y un conjunto mínimo de iconos.
Dar soporte offline a través de un service worker.

¡Eso no es todo! Gracias al Web Manifest podemos instalar nuestra PWA. Es decir, guardar la aplicación en la pantalla de inicio de nuestro celular, así como cualquier aplicación nativa. Esta funcionalidad es soportada por:

Android
iOS
Windows 10
macOS
Linux
ChomeOS

Conclusión

El desarrollo web cambia de manera rápida y constante. Cada vez más usuarios utilizan un dispositivo móvil para acceder a internet y la conexión a través de estos dispositivos no es la mejor, mucho menos en paises de latinoamerica.

En lugar de precipitar el desarrollo de tu próximo proyecto y hacer una SPA, date el tiempo para aprender sobre SSR y PWA. Te invito a tomar los cursos de React Router y Progressive Web Apps con React.js, vas a ver que tu próximo proyecto tendrá un gran nivel de performance y experiencia del usuario muy superior al que estás acostumbrado.