Alba Silvente, Developer Relations en Storyblok, trajo a los #MeetupsGeeksHubs una charla sobre renderizado web y la utilización de Jamstack en la construcción de sitios web.

En este artículo conocerás: 

• Los modos de renderizado que se usan hoy en día
• La arquitectura Jamstack y sus beneficios
• Cómo crear un sitio estático con un Headless CMS

Todo sobre renderizado web: qué es y tipos

En los inicios del desarrollo web sólo existían archivos estáticos que se hosteaban en un proveedor o servidores que cogían los datos de las APIs y los representaba en un frontend estático almacenado en ese servidor.

Sin embargo, se ha recorrido un largo camino desde entonces y ahora disponemos de bases de datos, websockets, datos en tiempo real y mucho más en nuestras aplicaciones web. Esto obliga a los desarrolladores a explorar diferentes formas de renderizar su página. Pero, ¿qué es el renderizado web exactamente?

El renderizado web es el proceso que convierte el código que escribes en algo con lo que los usuarios puedan interactuar: un sitio web. 

Existen tres tipos principales de renderizado: el renderizado en el lado del servidor (SSR), el renderizado en el lado del cliente (CSR) y el renderizado en el lado del servidor con JavaScript (SSR con JS). Cada tipo tiene sus ventajas y limitaciones, y es importante elegir el enfoque adecuado para el tipo de sitio web que estés construyendo.

1. En el enfoque CSR (Client Side Rendering), el servidor envía al navegador una página HTML vacía que luego es rellenada por el cliente utilizando JavaScript. Este método se utiliza comúnmente en aplicaciones web donde el contenido cambia con frecuencia, como las redes sociales. 

• Ventajas: más económico, soporte offline (sin APIs) y mejor experiencia de usuario. 

• Limitaciones: bajo rendimiento en la primera descarga que puede afectar a la experiencia de usuario y a la accesibilidad ya que hay personas que tienen Javascript desactivado. 

El mayor problema es el Search Engine Optimization (SEO), porque los rastreadores de motores de búsqueda como google, no esperan a que la interfaz esté completamente renderizada en su primer intento de indexar la página. 

2. En el enfoque SSR (Server Side Rendering), el servidor web genera y envía una versión renderizada del sitio web al navegador. Este método se utiliza comúnmente en sitios web que cambian poco o nada, como blogs o sitios web de noticias, donde el contenido es principalmente estático.

• Ventajas: mejora el rendimiento de la carga inicial y permite que el usuario vea algo en pantalla inmediatamente antes de que se ejecute Javascript, mejora el SEO y la seguridad del sitio web. 

• Limitaciones: Interactividad limitada (menos con Universal). Malo para conexiones lentas a Internet.
    

Además, la mayor carga del servidor. Es una solución mucho más cara ya que exige más rendimiento de los servidores para generar el HTML y mayor número de peticiones. 

3. En el enfoque SSG (Static Site Generation) con JS, se combina el renderizado en el lado del servidor y el lado del cliente. El servidor envía una página HTML parcialmente renderizada al navegador, que luego completa la página con JavaScript en el cliente.

• Ventajas: mejora el rendimiento, es más barato, más seguro y mejora el SEO. Además es escalable y fácil de mantener. 

• Limitaciones: la interactividad puede ser limitada ya que todo va a ser estático y la autenticación o tratamiento de datos se complica porque no se cuenta con un servidor que procese los datos. La mayor complicación es el tiempo de construcción. 
  

Para resolverlo, fue creado el enfoque DSG (Deferred  Site Generation), el cuál genera las páginas más importantes en build time y el resto en el Cloud worker tras la primera petición del usuario. 

• Ventajas: mejora el tiempo de construcción y mantiene los beneficios de SSG: SEO y rendimiento.

• Limitaciones: tiene un soporte limitado y supone una mayor complejidad en el desarrollo. El verdadero problema es la imposibilidad de hacer pequeños cambios, ya que se vuelve a ejecutar el proceso de compilación. 

Aunque parece que la solución desaparece, se creó el Incremental Static Regeneration (ISR), una técnica utilizada en SSG que reconstruye solo las partes de un sitio web que han cambiado, en lugar de regenerar todo el sitio de nuevo. Los beneficios de esta metodología son el soporte de datos dinámicos, además de mejorar los tiempos de construcción. 

¿Cuáles son los inconvenientes? Que tiene un soporte limitado. Y el problema principal es que es inconsistente para actualizaciones en tiempo real. El primer visitante de una página activa la revalidación, pero primero ve una página de reserva (fallback) con datos obsoletos. 

Para solucionar esto, se inventó el ISR 2.0 (On-demand ISR), que permite llamar a un método cada vez que se genera un cambio en la API, llamando a la función por página y refrescandolo manualmente en lugar de esperar al proceso de revalidación. 

Otra solución posterior fue el Edge Rendering, una técnica en la que el contenido web se almacena en caché y se sirve directamente desde el servidor de borde (egde server). Este funciona mejor con contenido dinámico, reduce la latencia de la red, mejora la escalabilidad y el caché es en tiempo real. 

Este enfoque no tiene inconvenientes notables, pero tiene poca flexibilidad si un proyecto necesita tener diferentes modos de renderizado. 
Para dar solución a esto, se creó el Hybrid Rendering, técnica que combina el renderizado del lado del servidor y del cliente, pero con una versión 2.0 llamada Per-routes caching strategy, dónde las rutas pueden ser una página estática bajo demanda, revalidada, SPA, o del lado de servidor…

Jamstack, la tecnología para construir páginas web estáticas de alto rendimiento

Jamstack es un enfoque arquitectónico que desvincula la capa de experiencia web de los datos (Frontend) y la lógica empresarial (Backend). Esto supone numerosos beneficios: la escalabilidad, flexibilidad, rendimiento y mantenibilidad. 

La palabra JAM tiene su origen como puedes ver en la imagen. Si quieres conocerlo al detalle, haz clic y ve al meetup completo.

Cómo crear un sitio web utilizando Jamstack: un caso práctico

Alba Silvente enseñó a través de un ejemplo práctico cómo crear un sitio web utilizando Jamstack. Comenzó explicando cómo se puede utilizar un generador de sitios estáticos, como Gatsby o Next.js, para crear una estructura básica para el sitio web. A continuación, mostró cómo se puede integrar un Headless CMS, como Storyblok, para permitir la creación y edición de contenido dinámico. En esta demo, Alba también explicó cómo se pueden utilizar las API externas para agregar funcionalidades adicionales al sitio web.

Si quieres verlo en vídeo, haz clic en la imagen y lo encontrarás en el minuto 37:48. Si estás interesado en crear sitios web de alto rendimiento, vale la pena ver el vídeo completo para aprender más sobre esta tecnología emergente.

No Code para pymes, startups, autónomos y side-projects >

Temporadas anteriores de los #MeetupsGeeksHubs, +50 streaming de formación en tecnología >

Full Stack Developer, el puesto más demandado en el sector tecnológico >