Tipos de renderizado: Server Side Rendering, Client Side Rendering y modos estáticos

Clase 6 de 15 • Audiocurso de Frameworks y Arquitecturas Frontend: Casos de Estudio

Giuliano De Leonardis

student•

Renderizado web

Es la representación gráfica del contenido de una página, es decir, el proceso necesario para mostrar una página web en un navegador. Server-side Rendering El renderizado de las web se ha hecho, de forma histórica, en el servidor. Es decir, que el servidor se encarga de generar el HTML que se va a mostrar al usuario.

Ventajas del Server-side Rendering
1. El servidor puede generar el HTML de forma dinámica, así que puede mostrar diferentes datos dependiendo de la petición del usuario. Además, si quieres hacer SEO, es vital, ya que tu aplicación web será indexada por Google de manera más fácil. No necesita ejecutar nada de JavaScript para saber qué información muestra tu página. También, si un usuario tiene JavaScript deshabilitado, tu aplicación pordría seguir funcionando.
2. Rendimiento percibido por el usuario. Como el servidor ya devuelve el HTML, el usuario no tiene que esperar que se cargue el JavaScript para ver la página.
Desventajas del Server-side Rendering
1. El servidor tiene que generar una archivo HTML, lo que hace que el tiempo de respuesta inicial pueda ser más lento

Client-side Rendering Se ha popularizado en los últimos años.

El servidor no genera el archivo HTML o genera uno muy básico. Lo único que se encarga es de enviar el código JavaScript necesario para que el navegador pueda generar el HTML en el cliente
Ventajas del Client-side Rendering
1. El servidor no tiene que generar nada, por lo que evitamos ese trabajo. Así es más económico.
Desventajas del Client-side Rendering
1. No es tan fácil de indexar por Google, ya que necesita ejecutar el JavaScript para saber qué información tiene tu página.
2. Si el usuario tiene JavaScript deshabilitado, tu aplicación no va a funcionar.
3. El usuario tiene que esperar a que se descargue JavaScript para ver la página, por lo que el rendimiento percibido puede ser peor.

Static-Site Generation Se ha popularizado últimamente, ya que tiene una mezcla de los dos anteriores. En lugar de generar el HTML en el servidor, en cada petición, lo hacemos solo en el momento de la compilación. Así, el servidor no tiene que generar el HTML, solo tiene que servirlo. Así sí podemos indexar nuestra página para SEO

Desventajas del Static-Site Generation
1. Al ser estático no se genera el HTML de forma dinámica Incremental Static-Regeneration En lugar de generar un HTML estático, en el momento de la compilación, lo hace en el momento de la petición. El servidor genera el HTML estático, para cada petición, pero solo sino existe. Si el usuario vuelve a visitar la misma página, el servidor devuelve el HTML ya creado. Islas Fomenta pequeños trozos de interactividad dentro de las páginas web renderizadas, ya sea por el servidor o de forma estática.

Ejemplos de uso

Página de búsqueda de Platzi Lo mejor es usar "server-side rendering", ya que es una página que tiene mucha información dinámica. El servidor genera un HTML de forma dinámica para cada petición
Página principal de Platzi Lo mejor, para esta landing page, lo mejor es usar "static-side generation", ya que es una página que tiene información que no cambia mucho.
Página de un curso Lo mejor sería "incremental static regeneration", ya que es una página que tiene información dinámica (como las valoraciones) pero tampoco cambia con mucha frecuencia.
Página de lista de comentarios Lo mejor es usar "client-side rendering", ya que no es información que deseamos indexar en los motores de búsqueda, y si el usuario tiene JavaScript deshabilitado, no pasa nada.

Miguel Ángel Durán García

teacher•

Buenísimo el resumen!!!

Marcos Monteverde

student•

gracias

Fidel Parabacuto

student•

Acá les dejo un poco de data de Island Architecture:

El paradigma de Island Architecture está estrechamente relacionado con la hidratación de las páginas estáticas, mejorando su rendimiento y performance.
Las páginas estáticas que se generan con SSR, al ser ejecutadas por el navegador, pueden convertirse en interactivas gracias a la hidratación.
El proceso de hidratación -o rehidratación- consiste en añadir interactividad mediante JavaScript al HTML generado del lado del servidor, con la adición de Event Handlers que permiten al usuario poder interactuar con la interfaz gráfica.

Fuente

Miguel Ángel Durán García

teacher•

👏

Ameth Ordoñez Erazo

student•

Yo utilice mucho el Server-Side Rendering, sobre todo cuando se utiliza con PHP, pero ahora que estoy trabajando con tecnologías como Vue, el Client-Side Rendering y el Static Rendering son muy útiles y beneficiosos para el rendimiento de las aplicaciones. Como dice Midu, todo depende de lo que se necesite, del proyecto que se esté realizando para sacarle el mejor provecho a cada una. 👍

Félix Alejandro Zelaya Orellana

student•

Genial!!

Edgar Omar Llanque Cordova

student•

entonces, en un solo proyecto podríamos hacer uso de más de un tipo de rendering según el contenido y dinamismo del proyecto? o es que todo el proyecto deberá usar un solo tipo de rendering

Jorge Arias Argüelles

student•

El Server Side Rendering (SSR) tiene varias ventajas sobre el Client Side Rendering (CSR):

Rendimiento inicial: SSR genera el HTML en el servidor, lo que permite que los usuarios visualicen contenido más rápido, especialmente en conexiones lentas.
SEO mejorado: Los motores de búsqueda pueden indexar mejor el contenido generado en el servidor, mejorando el posicionamiento de la página.
Menor carga en el cliente: Al realizar el rendering en el servidor, se reduce el procesamiento que debe hacer el navegador del usuario, lo que beneficia a dispositivos con menos recursos.

SSR es particularmente útil en aplicaciones donde la optimización de SEO y la velocidad de carga son críticas.

Matias Ezequiel Rivero

student•

En el desarrollo web, el renderizado se refiere al proceso de generar contenido para que sea mostrado en el navegador. Existen varios tipos de renderizado, cada uno con sus ventajas y casos de uso específicos.

La elección del tipo de renderizado depende de los requisitos específicos del proyecto, como la importancia del SEO, el contenido dinámico y la velocidad percibida por el usuario.

Matias Ezequiel Rivero

student•

5. Edge-Side Rendering (ESR)

Descripción: El contenido se genera en servidores cercanos al usuario final (edge). Esto mejora la latencia al reducir la distancia entre el servidor y el cliente.
Ventajas:
- Tiempo de respuesta muy rápido.
- Combina personalización con alta velocidad.
Desventajas:
- Puede requerir infraestructura específica (CDN con capacidades de ejecución).
Herramientas comunes: Vercel, Cloudflare Workers.

6. Progressive Rendering

Descripción: Combina técnicas para mostrar contenido lo más rápido posible, cargando partes críticas primero y dejando el resto para después.
Ventajas:
- Mejora la experiencia del usuario al mostrar contenido rápidamente.
- Ideal para aplicaciones con mucho contenido visual o texto.
Desventajas:
- Requiere planificación cuidadosa para definir qué contenido es crítico.

Tipos de renderizado: Server Side Rendering, Client Side Rendering y modos estáticos

Introducción

¿Qué aprenderás en este curso?

Arquitectura de Frontend: Conceptos

¿Qué es la Arquitectura en el Frontend?

Patrones de arquitectura clásicos

Clean Architecture en el Frontend

Screaming Architecture

Frameworks

Tipos de renderizado: Server Side Rendering, Client Side Rendering y modos estáticos

Next.js, Nuxt.js, Astro, Remix...

Más allá del código

Monorepositorios vs. Multirepositorios

Flujos de trabajo en Git para trabajar en equipo

Objetivo: crear una plataforma web

Tendencias en la arquitectura

La mala fama de los monolitos

Microfrontends: ¿qué son y cuándo usarlos?

Backend for Frontend

Síguientes pasos

¿Cómo elegir mi arquitectura de frontend y framework?

¿Y ahora por dónde sigo?