¿Qué es Server Side Rendering (SSR) y cuáles son sus ventajas?

9min

Es posible que hayas oído que el Server Side Rendering (SSR) ofrece numerosas mejoras a los servicios digitales. Resolvemos tus dudas sobre la  técnica de renderización de código de las páginas web y te ayudamos con las mejores  herramientas para incorporar estas prácticas en tu día a día de desarrollo.

Índice

¿Qué es Server Side Rendering (SSR)?

Server Side Rendering (SSR) es una técnica de renderización de código de las páginas web. Esta técnica se basa en la creación del código de las páginas en el lado del servidor, entregando al cliente un código HTML ya construido que incluye todo el contenido que el navegador debe mostrar al usuario, perfectamente montado.

Es un concepto bastante general que se puede adaptar a numerosas prácticas de desarrollo y tecnologías. Además es una técnica muy útil para la optimización de aplicaciones web modernas.

Diferencias entre SSR y Client Side Rendering (CSR)

Para poder entender mejor qué es el Server Side Rendering, resulta especialmente útil contraponerlo a la alternativa opuesta en el desarrollo: el Client Side Rendering ( CSR). Básicamente, ambos modelos de desarrollo se diferencian en el lado donde se construye el HTML que debe presentar la información al usuario que visita una página web.

Mientras que el Server Side Rendering construye todo el contenido en el lado del servidor y envía un HTML montado, tanto con la estructura de la página como con los datos, el Client Side Rendering realiza esta misma operativa, pero con programación del lado del cliente, es decir, en JavaScript.

De este modo, el Client Side Rendering utiliza un código JavaScript que indica cómo deberá generarse el sitio web, y habitualmente emplea técnicas de AJAX para obtener los datos que debe integrar dentro del contenido de las páginas.

No existe una técnica que sea mejor o peor que otra, sino que cada una ofrece experiencias de desarrollo y aplicaciones más optimizadas para distintos tipos de objetivos.

Ventajas del Server Side Rendering para tu sitio web

Vamos a centrarnos ahora en conocer las ventajas que nos ofrece el modelo de desarrollo SSR.

Mejora del rendimiento inicial

La mejora del rendimiento puede ser una de las ventajas destacadas del Server Side Rendering, ya que el HTML nos llega perfectamente montado y no tiene que procesarse en el navegador para poder renderizarse. Al mismo tiempo, los datos llegan a la vez que el propio HTML, integrados en el código, con lo cual no requiere realizar peticiones extra a servicios web para obtener la información que debe visualizarse en la página.

Optimización para motores de búsqueda (SEO)

De todos modos, si tuviésemos que quedarnos con una de las ventajas fundamentales del server side rendering, sería la posibilidad de una mejora sustancial en el potencial SEO de los sitios web.

Dado que el contenido está construido directamente en la página que se envía al cliente, cualquier motor de búsqueda es capaz de obtener información mucho más completa que indexar en sus bases de datos. Esto hace que los sitios con server side rendering sean especialmente indicados si lo que buscamos es posicionamiento web orgánico.

Experiencia de usuario más fluida

En términos de experiencia de usuario, podríamos encontrar ventajas y desventajas con respecto al CSR

Por una parte, Client Side Rendering permite una experiencia de usuario mucho más cercana a las aplicaciones de escritorio, una vez la página ya está cargada en el navegador. Sin embargo,Server Side Rendering ofrece por lo general tiempos de carga sensiblemente menores, especialmente en la primera visita.

Además, el hecho de recibir el contenido ya montado, hace que el navegador pueda mostrar a los usuarios los contenidos de una manera más rápida que en otros modelos de desarrollo donde el JavaScript necesita ejecutarse primero para poder mostrar algo significativo a los visitantes.

Compatibilidad con navegadores antiguos

Generalmente, el renderizado del lado del cliente no suele ser un problema en el momento actual, ya que los navegadores están perfectamente actualizados a las últimas tecnologías. Sin embargo, el server side rendering es el único modelo que nos asegura una compatibilidad perfecta con todos los navegadores, incluso los más antiguos.

Reducción del tiempo de carga percibido

Esto ya lo hemos comentado: al recibir el contenido ya montado de antemano, el tiempo de carga percibido por el usuario puede ser menor en comparación con las páginas con Client Side Rendering, donde el navegador debe recibir primero el código de la página, luego los datos, y después montar la propia página combinando todos los contenidos recibidos.

Esto todavía resulta más determinante en la primera carga, ya que con la primera página que se visita el navegador tendrá que recibir una cantidad generalmente grande de código JavaScript que tendrá que descargar, interpretar y procesar.

¿Cuándo deberías usar SSR en tus proyectos?

Ahora vamos a ver los casos en los que sería recomendable el uso de Server Side Rendering.

Proyectos orientados al SEO

La primera necesidad fundamental para decantarse por el Server Side Rendering, como hemos dicho antes, es el posicionamiento de los sitios web en los motores de búsqueda. Si necesitas un sitio optimizado para SEO, deberías acudir directamente a cualquier solución que te ofrezca sServer Side Rendering.

Aplicaciones con mucho contenido dinámico

Si la aplicación requiere mucho contenido que se debe extraer a partir de bases de datos y cambia con mucha frecuencia, lo ideal es hacer el renderizado en el servidor para que siempre el contenido se encuentre actualizado.

Sitios con tráfico desde redes sociales o motores de búsqueda

Como hemos dicho antes, si esperamos que el tráfico provenga de motores de búsqueda, lo ideal es que esté preparado para que éstos puedan indexarlo perfectamente. A esto podemos sumarle otras fuentes de tráfico, como redes sociales, en las cuales lo ideal es que los usuarios puedan acceder directamente al contenido profundo de los sitios web.

Frameworks y tecnologías populares que usan SSR

Vamos a repasar algunas de las tecnologías y frameworks más relevantes para conseguir que aplicaciones desarrolladas con tecnologías JavaScript (susceptibles de usar CSR) puedan apoyarse fácilmente en el Server Side Rendering para conseguir mejoras relevantes en el desempeño de las aplicaciones.

Next.js para React

Si vuestro ecosistema preferido es React, la opción más adecuada y extendida para conseguir server side rendering es Next.js, que nos ofrece una experiencia de desarrollo especialmente atractiva para aplicaciones modernas y bien optimizadas para SEO.

Nuxt.js para Vue

Ahora bien, si nuestro framework de desarrollo frontend preferido es Vue.js, la herramienta equivalente es Nuxt.js, que ofrece más o menos las mismas características y posibilidades de Next, pero con el framework progresivo Vue.

Angular Universal

La alternativa para el desarrollo de Server Side Rendering basado en aplicaciones Angular se llama Angular Universal. También es una excelente herramienta optimizada para conseguir buenos resultados SEO en las aplicaciones desarrolladas con el framework frontend Angular.

Otros frameworks compatibles con SSR

No obstante, además de estas herramientas populares, encontramos muchas otras que nos permiten el desarrollo de sitios con Server Side Rendering.

Quizás la más usada actualmente es Astro, que permite construir sitios rápidos combinando múltiples frameworks y haciendo SSR o incluso SSG. Otra alternativa destacada es SvelteKit, que ofrece un enfoque muy optimizado y sencillo para el renderizado en el servidor.

Buenas prácticas para implementar SSR correctamente

Para poder implementar correctamente las técnicas de Server Side Rendering, sería bueno tener en cuenta algunos consejos como los siguientes:

Gestión eficiente del caché

La gestión de la caché es importante para evitar la sobrecarga del servidor, a la vez que se consigue una aplicación capaz de responder de manera más rápida. Dependiendo del framework o infraestructura que uses, es posible que algunas cosas sean más sencillas que otras, pero puedes tener en cuenta algunas prácticas como cachear las respuestas HTML generadas, usar un CDN para reducir la latencia geográfica o el uso de cabeceras HTTP que permitan el cacheo en el navegador, como por ejemplo «Cache-Control».

Minimización del tiempo hasta el primer byte (TTFB)

El TTFB (Time To First Byte) es la cantidad de tiempo que pasa desde que un usuario hace una solicitud a un servidor hasta que recibe el primer byte de la respuesta. Es un buen indicador del grado de optimización de un sitio, y puede ser especialmente importante en las páginas con SSR, porque generalmente el servidor necesitará un tiempo dado para componer el contenido que debe enviarse.

Para minimizar el tiempo hasta el primer byte y mejorar la experiencia y velocidad percibida por el usuario puedes usar la caché, evitar renderizados innecesarios, reducir la carga de trabajo del servidor (evitando lógica pesada o el uso de servicios con alta latencia), o incluso realizar el preprocesamiento o precarga de datos críticos, para tenerlos en memoria cuando sean necesarios.

Optimización del backend y del servidor

Además, es importante optimizar todo lo que respecta al servidor (el backend) para que el renderizado sea más rápido. Esto incluye consultas con sistemas como las bases de datos o servicios adicionales que tu backend utilice.

Además, si fuera necesario, puedes implementar estrategias más avanzadas como el balanceo de la carga del servidor y usar, en la medida de lo posible, procesos en background cuando se necesiten realizar tareas pesadas que requieran de más tiempo de procesamiento.

Fernán García de Zúñiga

Artículos relacionados

Productos relacionados: