Conoce todas las Técnicas de Renderizado de Sitios Web

En la actualidad existen muchas herramientas que podemos utilizar para crear sitios o aplicaciones web. Seguramente como desarrollador habrás conocido que hay algunos tipos de renderizado como Server Side Rendering (SSR), Client Side Rendering (CSR), Static Site Generators (SSG) y algunas otras técnicas. Y sí aún no entiendes cómo funcionan, en este post te explicaré de manera fácil en qué consiste cada una y con qué framework o stack se pueden realizar dichas técnicas, para que así tengas más claro que herramienta considerar para tu próximo proyecto.

¿Qué es renderizar?

Primero hay que definir la palabra renderizar, en el desarrollo web consiste en la conversión de nuestro código a algo con lo que los usuarios pueden interactuar en nuestro sitio web, por ejemplo un botón, un enlace, un formulario. Cuándo alguien visita nuestro sitio web, en pasos simplificados, el navegador debe descargar y renderizar dicho código, pero la forma en qué llega al usuario final es la que puede cambiar dependiendo de las técnicas que empleemos.

Tipos de renderizados

Si bien el navegador al final solamente interpreta código HTML, CSS y JavaScript, la forma en que llega ese código es el tipo de renderizado. Se dividen en tres tipos diferentes:

• Client Side Rendering (CSR)
• Server Side Rendering (SSR)
• Static Site Generation (SSG)

Cada una cambiará la experiencia de los usuarios en un sitio web, desde la percepción del rendimiento hasta la interactividad. Muchos frameworks ofrecen la posibilidad de utilizar cualquiera de estos tipos de renderizados.

Client Side Rendering (CSR)

Este tipo de renderizado se hace mayormente desde el navegador, desde la representación de la interfaz y el layout hasta la lógica de formularios y llamadas de APIs. Cuándo el navegador hace una petición a un sitio web que implementa este tipo de renderizado, normalmente recibe un archivo HTML que apenas tiene contenido, ya que lo demás se hará a través del JavaScript que esté enlazado. Este enfoque también puede ser conocido como Single Page Applications

Ventajas del Client Side Rendering

Si bien este tipo de renderizado no tiene muchas ventajas, hay que destacar:

• La navegación entre vistas es rápida, después de renderizar toda la aplicación y al ir de una vista a otra, por ejemplo de inicio (/) a contacto (/contacto), esta no se volverá a descargar y no tendrá que hacer peticiones al servidor.

Desventajas del Client Side Rendering

Entre las desventajas de este tipo de renderizado se encuentran:

• Bajo rendimiento, debido a que toda la aplicación se debe ejecutar mediante JavaScript, el navegador debe analizar e interpretar toda la cantidad de código necesario para visualizar la página.
• Mal posicionamiento en SEO, debido a que rastreadores como el de Google le resulta mucho más fácil rastrear código HTML, al rastrear sitios web utilizado Client Side Rendering debe ejecutar un proceso de renderizado para poder analizarlo, lo cual es costoso y hará que nuestro sitio tenga menos relevancia.
• Complejidad de mantenimiento, cuándo una aplicación crece demasiado, utilizando este tipo de renderizado hará que a la larga sea muy difícil de mantener y escalar, debido a que toda la lógica desde componentes pequeños hasta componentes complejos, se hagan mediante JavaScript.

¿Cuándo utilizar Client Side Rendering?

Client Side Rendering es recomendado cuándo:

• No deseas tener posicionamiento en buscadores.
• Deseas crear una aplicación web interactiva con datos dinámicos.

Para crear un panel de administración o dashboard, que es algo que no nos interesa posicionar en buscadores y es un proyecto que requiere ser dinamico, debido al manejo y actualización de datos, es un claro ejemplo dónde nos puede resultar muy útil.

Aunque resulte cómodo programar utilizando librerías que se renderizan en el cliente, muchas veces realmente no es necesario, ya agregamos complejidad extra innecesaria a nuestros proyecto, por ejemplo si queremos crear un portafolio que contiene información que no va a cambiar muy a menudo es mejor utilizar otro tipo de renderizado.

¿Qué librerías podemos utilizar?

Librerías como React, Vue, Svelte y Angular, son excelentes para el tipo de renderizado desde el cliente, ya que todo el código generado será a través de JavaScript. Si bien existen plugins que podemos configurar para renderizar componentes a HTML, es mejor utilizar herramientas ya configuradas para este enfoque.

Server Side Rendering (SSR)

El renderizado desde el servidor es lo que comúnmente se ha utilizado desde el inicio de la Web, aunque puedas pensar que está relacionado con los frameworks modernos, la verdad que no es así solamente que se está volviendo a poner de moda, después de la popularidad del Client Side Rendering y las Single Page Applications.

Cuándo el navegador solicita una página web, está es creada desde el servidor compilando todo el código y los datos y devuelve una página HTML completa. Los datos son actualizados dinámicamente en cada solicitud del navegador, es por eso que en este tipo de sitios web debemos recargar constantemente para obtener la última versión.

Ventajas del Server Side Rendering

Las ventajas del Server Side Rendering encontramos:

• Performance, debido a que el código entregado al usuario final está compilado a HTML y solamente se necesita JavaScript en partes dinámicas de nuestra aplicación web, el rendimiento es considerablemente mejor.
• Posicionamiento SEO, al entregar código HTML es mucho más fácil escanear nuestro sitio web para los rastreadores.

Desventajas del Server Side Rendering

Si bien puede ser un enfoque que sea muy tentador utilizar, debes tomar en cuenta:

• Siempre dependes de contratar un proveedor de alojamiento para ejecutar tu aplicación, aunque sea muy sencilla.
• Si tu sitio web llega a tener muchas visitas, al ejecutarse todo desde el servidor este debe manejar todas esas peticiones por lo que los costes van a aumentar.

¿Cuándo utilizar Server Side Rendering?

Cuándo tenemos una aplicación web creada en cualquier librería frontend y queremos mejorar aspectos de rendimiento y posicionamiento en buscadores es recomendable utilizar Server Side Rendering.

Cuándo queremos utilizar funcionalidades más complejas como autenticación, inicios y registro de sesión, validación de formularios o almacenamiento en bases de datos siempre tendremos que utilizar cualquier herramienta o lenguaje que funcione desde el servidor.

¿Qué herramientas podemos utilizar?

Para el renderizado desde el servidor podemos utilizar cualquier lenguaje de servidor como: PHP, Node.js, Python, Ruby, Go, C# y muchísimos otros lenguajes.

En este tipo de renderizado podemos encontrar herramientas como:

• WordPress
• Drupal
• Joomla
• Strapi

Y cualquier Manejador de Contenido (CMS), ya que los CMS están construídos utilizando lenguajes de servidor. Pero también podemos utilizar frameworks modernos como:

• Next.js
• Nuxt.js
• Svelte Kit
• Angular Universal

Si bien no son frameworks que manejan contenidos mediante una interfaz como los CMS, son herramientas que pueden combinar distintos tipos de renderizados de los componentes escritos en librerías como React, Vue, Svelte y Angular respectivamente, en este caso podemos utilizar Server Side Rendering para servir código HTML que se entregará a los usuarios en cada petición.

Static Site Generation (SSG)

Los sitios web estáticos no son más que sitios web que funcionan con HTML, CSS y JavaScript y no requieren de código de servidor para funcionar. Se denominan estáticos porque todos los datos están incrustados directamente en el código. Si bien utilizando solamente con archivos HTML podemos crear sitios estáticos pero al tener un nuestro proyecto más grande como un blog no resulta cómodo, es por eso que existen herramientas que nos permiten compilar a HTML y separar lógica en componente que podemos reutilizar.

Para actualizar nuevos datos de nuestra página web, requerirá de una nueva compilación de todo el proyecto aún si es mínimo el cambio, aunque podemos automatizar este proceso con herramientas de Integración Continua/Despliegue Continuo (CI/CD), como GitHub Actions para hacer la compilación desde un servidor en lugar de nosotros hacerlo en nuestra máquina local.

Ventajas de los generadores de sitios estáticos

Entre la mayores ventajas que podemos encontrar para los generadores de sitios estáticos están:

• Elegir con el que te sientas más cómodo, debido a que existen una gran variedad de herramientas escritas en muchos lenguajes podemos elegir la que más se ajuste a nuestras necesidades.
• Bajo costes, debido a qué el código final solamente será HTML, CSS y JavaScript, existen muchos servicios que ofrecen hosting gratuitos para este tipo de proyectos, como GitHub Pages.
• Facilidad de desarrollo.
• Buen rendimiento de nuestro proyecto web.
• Posicionamiento SEO.

Desventaja de los generadores de sitios estáticos

• Hacer una construcción del proyecto para cada cambio, si bien puede resultar muy cómodo desarrollar utilizando generadores de sitios estáticos, para cada cambio que hagamos tendremos que regenerar todo nuevamente, lo que dependiendo de qué tan grande sea nuestro proyecto llevará mucho tiempo.

¿Qué herramientas podemos utilizar?

Los generadores de sitios estáticos también se pueden conocer como JAM Stack, que es el acrónimo de JavaScript, APIs and Markup y consiste en crear sitios web utilizando solamente tecnologías frontend, como HTML para la estructura del sitio, CSS para el estilo del sitio, JavaScript para la interactividad con las Web APIs o el llamado de APIs externas de datos y Markdown para la generación de páginas estáticas (normalmente blogs).

Y existen muchos generadores de sitios estáticos cómo:

• Astro
• Gatsby
• Jekyll
• 11ty
• Hugo
• Next.js

Si deseas conocer que otros generadores de sitios estáticos y con qué lenguaje de programación están creados puedes visitar la página: https://jamstack.org/generators/.

Técnicas de renderizado

Con el requerimiento de brindar una mejor experiencia a los usuarios en la web, se crearon varias técnicas que combinan los diferentes tipos de renderizados y para tratar de solventar la problemática de altos tiempos de construcción debido a generar contenido estático.

Se crearon técnicas cómo:

• Distributed Persistent Rendering
• Incremental Static Regeneration
• Edge Rendering

Distributed Persistent Rendering (DPR)

Renderizado Persistente Distribuído, permite a los desarrolladores definir qué rutas tendrán mayor importancia de construcción desde que un usuario visitó dicha ruta.

Con esta técnica las rutas más visitadas de nuestro sitio web serán construídas constantemente dependiendo de la actualización de contenido que hagamos y las menos visitadas tendrán menos importancia de construcción, por lo que las rutas menos visitadas serán más lentas de cargar debido a que no tienen esa relevancia de actualización porque se crean a bajo demanda. La mayor ventaja de esta técnica es que los usuarios nunca verán contenido antiguo.

Incremental Static Regeneration (ISR)

Regeneración Estática Incremental es una técnica que surgió gracias a Next.js, con esta técnica se hace la construcción de nuestro proyecto y se almacena en el caché del servidor. Cuándo un usuario visita la página se muestra la versión que fue almacenada en caché mientras se hace una nueva construcción con datos nuevos en segundo plano. Por lo que la versión almacenada en caché se actualizará en cada construcción.

Edge Rendering

Edge Rendering consiste en una técnica de red similar a las CDN, que son servidores distribuidos alrededor del mundo, así cuándo un usuario visita nuestro sitio web éste se enviará desde un servidor cercano geográficamente al propio usuario, experimentando así una velocidad de carga rápida, ya que los datos no tendrán que viajar desde servidores lejanos.

Si bien esta no es una técnica que podamos implementar con algún framework, es proveída por servicios como Vercel Edge Functions, Netlify Edge, Cloudflare Workersy algunos otros.

Conclusión

Hay muchas opciones cuando se trata de crear páginas web y cada una tiene sus propias implicaciones, todo se reduce a elegir la herramienta adecuada. Una forma de probar si necesitas SSR o CSR es deshabilitar JavaScript y cargar la página web, si aún funciona, es probable que se renderiza previamente.

El uso de la arquitectura JAM Stack permite comenzar poco a poco y agregar complejidad donde sea necesario. Renderizar previamente tanto contenido como sea posible y usar menos JavaScript es mejor para todos, debido al aumento del rendimiento, la portabilidad y la capacidad de mantenimiento son solo algunas de las razones por las que actualmente prefiero los Generadores de Sitios Estáticos o JAM Stack.