Si el SEO es tu prioridad, una Single Page Application no debes usar. El Server Side Rendering es una muy buena opción. Pero tal vez, solo tal vez, los generadores de sitios estáticos muy buenas soluciones nos pueden brindar.
Primero lo primero: ¡SIEMPRE NECESITAS UN SERVIDOR!
Siempre necesitamos servidores para alojar nuestras aplicaciones. Incluso cuando nuestras aplicaciones solo son archivos estáticos (HTML, CSS, JS, imágenes, fuentes). Pero aún así nos confundimos. Pensamos que maquetar un sitio web significa dejar de lado los servidores.
¿Por qué nos confundimos?
Muchas herramientas como GitHub Pages nos facilitan el proceso de deploy de aplicaciones estáticas. Nos ahorran la configuración de los servidores. No nos permiten controlar cómo funcionan los servidores, solamente el contenido que estos van a alojar. Esto no es bueno ni malo. Solo depende de las necesidades y/o expectativas de tus proyectos.
IaaS vs. PaaS: ¿Mi proyecto necesita Infraestructura como Servicio o Plataformas como Servicio?
Qué son las Single Page Applications
Las Single Page Applications son páginas web que funcionarán extraordinariamente rápido, incluso cuando navegamos entre diferentes páginas. El problema es que todo este contenido estará disponible solo después de que los archivos de JavaScript terminen de cargar. Y este proceso puede tardar muchos segundos.
Estos archivos de JavaScript pueden ser muy pesados, ya que se encargan de todo el contenido y todas las rutas de nuestra aplicación. Afortunadamente, existen técnicas como el Code Splitting que nos permiten cargar la información de nuestra aplicación conforme los usuarios la van necesitando (por ejemplo, cuando navegan).
Aún con estas optimizaciones, la carga inicial de las SPAs es muy lenta. Los usuarios no verán contenido hasta que terminen de cargar los archivos de JavaScript. La ventaja es que luego de esperar, la aplicación funciona a toda velocidad.
Algunas veces también debemos encargarnos de la autenticación. Al no controlar el servidor, no tenemos forma de verificar si los usuarios están autenticados antes de que accedan a la aplicación. Así que debemos usar tokens (¡vivan los JSON Web Tokens!) para verificar la autenticación cada vez que hacemos peticiones a algún servidor.
Muchas herramientas como Create React App nos permiten crear Single Page Apps de forma rápida y sencilla.
Qué es Server Side Rendering
Las aplicaciones que implementan Server Side Rendering necesitan (obligatoriamente) configurar su servidor, ya que este es el encargado de “crear” un archivo HTML con todos los datos que haya pedido el usuario en una ruta específica.
La carga inicial de cada ruta es mucho más corto que en las Single Page Applications. Y también hay beneficios en el SEO. Pero el proceso de carga y descarga de información debe repetirse cada vez que los usuarios navegan por nuestra aplicación o deben consultar nuevos datos.
Afortunadamente, podemos crear una aplicación con SSR que se convierta en SPA cuando llegue al lado del cliente. Esto lo conocemos como Progressive Server Side Rendering. De esta forma, tanto la carga inicial como la navegación o interacciones de los usuarios funcionarán extraordinariamente rápido.
En la parte de la autenticación también podemos hacer combinaciones divertidas. Podemos aprovechar los momentos donde los usuarios recargan o cargan la página por primera vez. Guardamos la información de la autenticación en memoria o en una base de datos y hacemos seguimiento a los usuarios para determinar cuál es su estado de autenticación.
Algunas herramientas como Next.js nos ayudan a crear aplicaciones usando Server Side Rendering de forma extremadamente rápida y sencilla. Incluso han evolucionado hasta convertirse en frameworks de programación FullStack (frontend y backend).
En nuestra escuela para full stack puedes aprender más acerca de SPA, SSR y generadores de sitios estáticos.
Qué son los Generadores de Sitios Estáticos
Los generadores de sitios estáticos combinan SSR y SPAs de forma asombrosa. Mientras desarrollamos, usamos un servidor para obtener nuestros datos. Pero justo antes de mandar a producción, renderizamos el contenido.
De esta forma, evitamos tener que renderizar nuestra aplicación desde el lado del cliente y del servidor. Solo necesitamos hacerlo una vez. Nuestros usuarios solo deben hacer alguna petición (como en SSR) para descargar un HTML con contenido y aprovechando que seguimos trabajando como SPA, cargar los archivos de JavaScript para navegar sin necesidad de recargar.
Si quieres probar una herramienta como estas, te recomiendo Gatsby. Cada vez es más popular. Y no es para menos, ya que podemos usar algunos plugins para integrarnos con diferentes herramientas y aprovechar todas las ventajas de este tipo de renderizado.
Referencias
- Diferencias entre SPA, SSR y Gatsby
- Server side render(SSR) Vs Client render
- Implementa Progressive server-side render con Next.js
- Server Side vs. Client Side Sessions
- ¿Qué es el vendor file?
Conclusiones
Te invito a seguir la Ruta de Aprendizaje de la Escuela de JavaScript. Vamos a pasar por todas las etapas de construcción de una aplicación web. Frontend y Backend. Crearemos una Single Page Application, luego trabajaremos con Server Side Rendering y también nos encargaremos de la autenticación de nuestros usuarios.
#NuncaParesDeAprender 🤓💚
Curso de Server Side Render con Express
