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.
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?
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.
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).
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.
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 🤓💚
Gatsby es excelente, que bien que hayas enfatizado en su uso, muy buen post y muy buena explicación @juandc 😄
Totalmente de acuerdo. Que buen post.
Muy buen post! firme @juandc
@juandc, te admiro!
Excelente aporte, tus conclusiones me ayudaron mucho. 😃
Siempre buenos posts con el buen @juandc 😄
Saludos!
Excelente, seria una buena idea aprender Next Js y Gatsby para implementar mis conocimientos en React, pero, en qué orden?
wooow! Que buena información
La información presentada es de mucha ayuda, gracias, además muestras un camino adecuado para seguir mejorando las habilidades ya adquiridas
Muy interesante.
Desconocía el problema del SEO de las SPA.
Y la posibilidad de mezclar SPA con contenido estático.
😯🤔
Vermo juan, sin palabras jeje (y)
¿Me podrían sugerir algún Hosting para un pequeño website que estoy desarrollando? (Está construido con Next.js, de momento no tiene back pero en un futuro planeo desarrollar algo con Node.js).
He probado Github Pages pero no me deja controlar el 404 y en un futuro no me dejará manejar el back. Probé Now cuando estaba con la versión 1 y se me hizo super lenta la carga en el Free Plan (No sé si con la versión 2 han mejorado) en caso del Plan de Pago cómo en cuánto $$$ podría salir mensualmente? También he escuchado un poco de Netlify, pero no lo he probado y no se sus costos tampoco.
Gracias. 😃
Hola, prueba 000webhost.
Now ha mejorado muchísimo. Te recomiendo darle otra oportunidad. 💪