El proceso de renderización en JAMstack

Todo se basa en Headless

Hasta hace unos años la forma de crear una plataforma digital no salía del esquema tradicional monolítico; un servidor web, una base de datos y todo encapsulado en un servidor único que contenía todas las relaciones y dependencias.

Pero el tiempo pasó y las tendencias web cambiaron, las personas ya no estaban necesariamente frente a un computador de escritorio para navegar y el volumen de usuarios creció a niveles antes inimaginados. La respuesta es que las plataformas se robustecieron, comenzaron a buscar integrar cada nuevo aspecto, aunque lamentablemente no lograban mantener el cambio como dinámica.

Es en este escenario que nace JAMstack, que cambia el paradigma en la manera de construir arquitectura web e incorpora la idea del cambio como el proceso (casi) natural de toda plataforma. ¿El secreto? Quita la cabeza del cuerpo, liberando el potencial de ambos.

Nos encanta esa analogía aunque suene raro, pero en el fondo trata de desacoplar el frontend del backend. Separando todo lo que tiene que ver con la interfaz, el contenido y sus funcionalidades de los sistemas internos. Optimizando la entrega del contenido a cualquier dispositivo que lo requiera de manera rápida, ya que se encuentra previamente cargado (pre-rendering) y listo para su entrega, sofisticando la experiencia digital.

¿Cuál es la relación de JAMstack con el pre-rendering?

Cuando hablamos de pre-rendering nos referimos a que las entradas y el contenido que forma parte de tu plataforma es cargado en el momento de la compilación de tu sitio. Esto quiere decir que el contenido que visualiza un cliente no es cargado necesariamente cuando lo solicita, sino que puede ya estar listo en el caché (usualmente) de una CDN. Te preguntarás para qué sirve esto, y verás, en la metodología JAMstack todo se trata de optimizar tu plataforma para que siempre este lista a cualquier dispositivo, en cualquier lugar. Aún cuando tengan una conexión lenta y se encuentren a miles de kilómetros del país donde reside (opera) la plataforma.

Piénsalo de la siguiente manera, eres dueño de un pequeño puesto móvil de tu comida favorita, en un día normal tú sabes que venderás, digamos, entre 30 y 50 platos, lo que es un número adecuado para las capacidades de tu cocina. En eso se te ocurrió llevar tu puesto al centro vacacional más concurrido de la ciudad, e inmediatamente tus ventas suben a 300 platos. Tu cocina no tiene la capacidad para despachar ese volumen de platos bajo el principio de; plato pedido, plato cocinado.

¿Qué es lo que harías en una situación así? ¿Seguirías ocupando las mismas herramientas y forma de atender? Efectivamente, necesitas cambiar o de lo contrario la gente comenzará a irse, nadie quiere esperar tiempos excesivos por su comida. Así que comienzas a preparar de antemano las guarniciones y acompañamientos más frecuentes, porque sabes que seguirás preparando ese ingrediente especial que cada cliente busca, pero todo los demás ingredientes estarán listos para servirlos. Toda una revolución culinaria; aumentas tus ventas, dispones de seguridad operacional y todo tu negocio crece.

Es esa la mentalidad la que fomenta trabajar desde la metodología JAMstack. Más que utilizar una tecnología en específico en lo que nos enfocamos es construir sitios estáticos que compilan anticipadamente (casi) todo el contenido, de modo que cuando un cliente realiza una consulta el resultado está listo para ser entregado sin necesitar pasar por un servidor web.

Conoce las formas de renderización diferida en JAMstack: DPR e ISR

Te estarás preguntando cómo es posible realizar esto, bueno aquí es donde cobra sentido el apartado anterior; todo se basa en Headless. Al trabajar de manera desacoplada no necesitas que cada solicitud web sea procesada por tu servidor y consultada a tu base de datos. Ya que al ser cargado al caché de tu CDN al momento de compilar ya no necesitarás un servidor para procesarlo ni una base de datos para consultarlo.

Esto cobra especial relevancia para las grandes marcas que cuentan con plataformas con cientos de productos, miles de entradas de contenido. Imagínate cómo respondería un servidor si tuviese que cargar una y otra vez todo ese contenido. Para ellos el pre-rendering es la solución.

Lo mejor que al construir arquitectura headless no estás sujeto a un único proveedor o tecnología, lo que ha permitido que diferentes empresas desarrollen sus propias recetas de renderización. Pero todas siempre enfocadas en optimizar las plataformas para que las grandes empresas puedan contar con la mejor tecnología.

• Incremental Static Regeneration de Next.js (ISR) es una propuesta que propone aprovechar la condición de sitio estático, propio de JAMstack, para poder ir cargando nuevas entradas sin tener que compilar nuevamente todo el sitio. Así lo que ya está almacenado en el caché se mantiene, mientras que por detrás se regenera la plataforma con las nuevas entradas.
• Distributed Persistent Rendering de Netlify (DPR) esta propuesta tiene un enfoque adicional y es reducir la complejidad de los sistemas (filosofía JAMstack). Así que para optimizar la carga de las plataformas distribuyen el contenido, de manera que al compilar el sitio se carga todo lo elemental en el caché de manera que cuando un cliente pida algo que no está cargado la plataforma lo carga y a partir de ese momento también queda en el caché. ¿Recuerdas lo de preparar previamente los ingredientes?
• Deferred Static Generation de Gatsby.js (DSG) sigue el mismo espíritu y es la manera de Gatsby de diferir la carga del contenido, de manera que en el momento de compilar el sitio solo carga lo crítico. Y es que muchas veces las grandes marcas cuentan con productos que no son muy demandados, por lo que es mejor dejarlos a la espera de ser solicitados.

En Reign trabajamos desde JAMstack, porque compartimos la idea de que lo más importante es optimizar el desempeño de las plataformas, pero siempre desde la flexibilidad y libertad que te ofrece una arquitectura headless. Así aquellos sitios de cientos de miles de páginas puedan operar con la fluidez que las personas esperan que tengas.