Cada vez que arrancamos una nueva web-app, una de las decisiones más importantes que enfrentamos es cómo vamos a renderizarla. Esta elección va a impactar directamente en cómo se comporta nuestra aplicación para los usuarios.
En este post, voy a presentarte los siguientes enfoques de renderizado:
- Server Side Rendering (SSR)
- Static Rendering (SR)
- Client Side Rendering (CSR)
- SSR con (Re) Hidratación
- CSR con Pre-rendering
Métricas de rendimiento
Antes de arrancar con las explicaciones, te presento algunos términos que vamos a usar a lo largo del post, relacionados con cómo medir el rendimiento de cada enfoque de renderizado:
Time to First Byte (TTFB): se define como el tiempo entre hacer click en un link y recibir el primer byte de contenido.
First Paint (FP): el momento en que cualquier píxel se vuelve visible para el usuario.
First Contentful Paint (FCP): el momento en que el contenido solicitado (cuerpo del artículo, etc.) se vuelve visible.
Time To Interactive (TTI): el momento en que la página se vuelve interactiva (eventos conectados, etc.).
Server Side Rendering (SSR)
Server Side Rendering genera el HTML completo de una página en el servidor como respuesta a la navegación.
Esto evita round-trips adicionales para la obtención de datos y el templating en el cliente, ya que se resuelve antes de que el navegador reciba la respuesta.
Pros: el FCP es prácticamente igual al TTI.
Contras: el TTFB está atado a las capacidades del servidor.
Static Rendering (SR)
Static Rendering es una evolución sobre Server Side Rendering.
La diferencia principal entre SSR y SR es que Static Rendering ocurre en tiempo de build, en lugar de SSR que ocurre en tiempo de ejecución.
Pros: el FCP es prácticamente igual al TTI. El TTFB va a ser rápido.
Contras: si dependés de JavaScript para iniciar una SPA, esto va a llevar a una hidratación del lado del cliente.
Client Side Rendering (CSR)
Client-side rendering (CSR) significa renderizar las páginas directamente en el navegador usando JavaScript. Toda la lógica, obtención de datos, templating y routing se manejan en el cliente en lugar del servidor.
Pros: el FCP es bastante bueno.
Contras: como necesitás esperar a que el JS se cargue, descomprima, parsee y ejecute, los resultados de TTI son mayores que el FCP.
SSR con (Re) Hidratación
Server Side Rendering con (Re) Hidratación es un enfoque de renderizado que combina SSR y CSR.
Cuando el usuario solicita una página, el HTML se pre-renderiza en el servidor y empieza a enviarse al navegador. Después de que todo el HTML y JS estén completamente cargados, se inicia una SPA y las siguientes páginas se manejan del lado del cliente.
Pros: te da flexibilidad porque podés combinar diferentes enfoques de renderizado.
Contras: la flexibilidad que te brinda viene con el costo de un TTFB más lento, FCP más lento, y un delay considerable para el TTI porque todo el contenido renderizado en el servidor se va a re-renderizar en el cliente.
CSR con Pre-Rendering
Es una evolución sobre el enfoque CSR que consiste en renderizar el esqueleto de la web-app en tiempo de build para generar HTML estático.
Pros: podés obtener un TTFB más rápido porque el esqueleto de la app está pre-renderizado.
Contras: con este enfoque heredás todas las contras de CSR.
Genial, pero ¿cuál se ajusta mejor a mi caso?
Bueno, realmente depende de tu caso de uso, y de qué métricas son importantes para tu negocio.
Acá va un resumen rápido de cómo se comporta cada enfoque de renderizado en las métricas clave de rendimiento:
| Enfoque de Renderizado | TTFB | FCP | TTI |
|---|---|---|---|
| Server Side Rendering | Lento (depende del servidor) | Rápido | Rápido (igual al FCP) |
| Static Rendering | Muy rápido | Rápido | Rápido (igual al FCP) |
| Client Side Rendering | Rápido | Moderado | Lento (depende del JS) |
| SSR con (Re) Hidratación | Lento | Lento | Muy lento (costo de re-render) |
| CSR con Pre-Rendering | Rápido | Rápido (solo esqueleto) | Lento (depende del JS) |
Bueno, eso es todo. En los próximos posts vamos a seguir explorando más conceptos relacionados con la arquitectura de web apps.
Si te gustó este post, suscribite a nuestro newsletter para recibir las últimas novedades sobre tecnología, arquitectura de software y desarrollo de producto.
