Platzi
Platzi

¡Invierte en ti y celebremos! Adquiere un plan Expert o Expert+ a precio especial.

Antes:$349
$259
Currency
Antes:$349
Ahorras:$90
COMIENZA AHORA
69

Single Page Applications vs. Server Side Rendering vs. Generadores de Sitios Estáticos

114646Puntos

hace 2 años

Curso de Server Side Render con Express
Curso de Server Side Render con Express

Curso de Server Side Render con Express

Aumenta la velocidad de carga inicial de tu SPA. Integra y optimiza el SEO de tu sitio web con la lógica de negocio y mejora el posicionamiento de tu marca usando SSR Server Side Rendering. Configura el servidor de PlatziVideo con Express y renderizalo desde el servidor.

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.

Yoda

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).

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

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
Curso de Server Side Render con Express

Curso de Server Side Render con Express

Aumenta la velocidad de carga inicial de tu SPA. Integra y optimiza el SEO de tu sitio web con la lógica de negocio y mejora el posicionamiento de tu marca usando SSR Server Side Rendering. Configura el servidor de PlatziVideo con Express y renderizalo desde el servidor.
Juan David
Juan David
juandc

114646Puntos

hace 2 años

Todas sus entradas
Escribe tu comentario
+ 2
Ordenar por:
3
8148Puntos

Gatsby es excelente, que bien que hayas enfatizado en su uso, muy buen post y muy buena explicación @juandc 😄

2
8186Puntos
un año

Totalmente de acuerdo. Que buen post.

2
12166Puntos

@juandc, te admiro!

2
6765Puntos

Excelente aporte, tus conclusiones me ayudaron mucho. 😃

2
19007Puntos

Siempre buenos posts con el buen @juandc 😄
Saludos!

2
2931Puntos

Excelente, seria una buena idea aprender Next Js y Gatsby para implementar mis conocimientos en React, pero, en qué orden?

2
13108Puntos

La información presentada es de mucha ayuda, gracias, además muestras un camino adecuado para seguir mejorando las habilidades ya adquiridas

2
11628Puntos

Muy interesante.
Desconocía el problema del SEO de las SPA.
Y la posibilidad de mezclar SPA con contenido estático.

😯🤔

2
13338Puntos

wooow! Que buena información

1
19007Puntos

¿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. 😃

2
114646Puntos
2 años

Now ha mejorado muchísimo. Te recomiendo darle otra oportunidad. 💪