Server-Side Rendering

Clase 18 de 19 • Curso de Introducción al Desarrollo Backend

Harold German Granados Guerrero

student•

Muy importante usar el server side, en mi caso lo he usado al crear una plataforma donde se requiere mostrar muchos datos. Por ejemplo el codigo de barras para una empresa fabricante de Jeans son muchísimos códigos que maneja. En mi caso cree una vista en la base de datos para unir las consultas y así mostrarla al administrador del sistema. Use php y javascript para hacer el renderizado desde el lado del cliente .

Maira Duque

student•

**1. Server-Side Rendering: ** se renderiza el HTML del cliente totalmente en el lado servidor. 2. Client-Side Rendering: se renderiza la aplicación completamente en el navegador haciendo uso de Javascript y la gestión del DOM. 3. Rehydration: HÍBRIDO de las dos anteriores en el que se aprovecha el HTML y los datos renderizados desde el lado servidor, hidratándose con una aplicación javascript que se monta encima de esta. 4. Prerendering: Se renderiza la web en tiempo de construcción creando un artefacto que puede servirse de una manera totalmente estática.

Jairo Saul Salas Quiñones Pro-Dev | Sci-Tech

student•

Ventajas de: El Server Side Rendering (SSR)

++Mejora el SEO++: Los motores de búsqueda pueden indexar mejor las páginas que están renderizadas en el servidor.
++Carga más rápida de la página++: La página se renderiza en el servidor antes de enviarse al navegador, por lo que se puede mostrar al usuario mucho antes que si se hiciera en el lado del cliente.
++Mejora el rendimiento en dispositivos de baja potencia++: Al hacer el render en el servidor, se evita cargar la página completa en el navegador antes de mostrarla, lo que es importante en dispositivos de baja potencia.
++Mayor compatibilidad++: Al hacer el render en el servidor, se pueden garantizar que la página se muestre de manera consistente en todos los navegadores, incluso en aquellos que no soportan JavaScript.
++Mayor seguridad++: Al hacer el render en el servidor, se pueden ocultar datos sensibles y se pueden realizar validaciones y autenticaciones antes de enviar la página al navegador.

Erick Vasquez Murillo

student•

Les comparto una imagen en comparación del lado del cliente

WILLIAM ALEXANDER RODRIGUEZ ARROYO

student•

Excelente!

Cristian David Romero Melo

student•

1. ¿En qué consiste el Server-Side Rendering (SSR)?

Es un enfoque de renderizado en el que se procesa y genera completamente el HTML en el servidor, antes de enviarlo al navegador del cliente.

2. ¿Cómo se compara el Server-Side Rendering con el Client-Side Rendering (CSR)?

El SSR, el HTML lo genera el servidor

El CSR, la aplicación y el HTML se generan en el navegador del cliente utilizando JavaScript y el DOM.

3. ¿Qué es la técnica de Rehydration y en qué consiste?

Es una técnica que combina características de SSR y CSR. En el Rehydration, se aprovecha el HTML y los datos renderizados desde el servidor, y luego se "hidrata" o complementa con una aplicación JavaScript que se ejecuta en el navegador.

4. ¿Qué es Prerendering y cómo funciona?

El Prerendering es una técnica de renderizado web que implica generar y renderizar una página web completa en el servidor antes de que un usuario realice una solicitud. Esto significa que las páginas web se crean de antemano, y los resultados se almacenan en forma de archivos HTML estáticos que se pueden entregar de inmediato cuando se solicitan.

5. ¿Cuáles son las ventajas de utilizar Server-Side Rendering (SSR)?

Mejora el SEO (Motores de búsqueda)
Carga más rápida de la página
Mejora el rendimiento en dispositivos de baja potencia
Mayor compatibilidad
Mayor seguridad

6. ¿En qué situaciones es especialmente útil el Server-Side Rendering (SSR)?

Cuando se requiere:

Una indexación SEO efectiva
Una carga rápida de la página
Rendimiento en dispositivos de baja potencia
Mayor seguridad en la manipulación de datos y autenticación.

Juan Camilo Maldonado Perez

student•

¿Sí?

Entonces el Server-Side Rendering es una técnica de renderización que se utiliza para generar el contenido HTML en el servidor y enviarlo al cliente en respuesta a una solicitud web. Sus ventajas están es mejorar la velocidad de carga de la página, la accesibilidad y el SEO, y se puede implementar utilizando diferentes herramientas y tecnologías.

Elian Paniagua

student•

SSR

Ventajas

El renderizado del HTML es más rapido
Los motores de busqueda (Google, Bing) valoran mejor este tipo de renderizado

Desventajas

No es interactivo

CSR

Ventajas

Es altamente interactivo

Desventajas

Requiere más recursos por parte del cliente de forma local.
JSON no es tan rapido ( es el formato de datos que el servidor respondera al cliente y el deberia contruir y renderizar en base a eso.)
Malo para los motores de busqueda

yesenia gil

student•

Que es renderizar

Francisco Javier Cervantes Candelario

student•

El renderizado 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.

ROMMEL DUAREZ SAENZ

student•

es el procesamiento del texto de la pagina para convertirlo en lo q se ve en pantalla

Jairo Saul Salas Quiñones Pro-Dev | Sci-Tech

student•

> Ventajas del Client-Side Rendering (CSR)

++Interacción en tiempo real con el usuario++: Al renderizar la página en el lado del cliente, se permite una interacción en tiempo real con el usuario, lo que significa que la página puede responder a las acciones del usuario sin tener que recargar la página completa.
++Menos sobrecarga del servidor++: Al hacer que el cliente lleve a cabo gran parte del procesamiento, se reduce la sobrecarga del servidor, lo que puede mejorar significativamente la velocidad y el rendimiento de la aplicación.
++Personalización en el lado del cliente++: Al renderizar la página en el lado del cliente, se puede permitir una mayor personalización para el usuario, como la personalización de la vista y la experiencia de usuario en general.
++Experiencia de usuario más suave++: Al tener una experiencia de usuario más interactiva y en tiempo real, se logra una experiencia de usuario más suave y agradable para el usuario.

Jairo Saul Salas Quiñones Pro-Dev | Sci-Tech

student•

En general, el CSR es una buena opción para aplicaciones más interactivas y personalizables, mientras que el SSR es una buena opción para aplicaciones que requieren un rendimiento y una escalabilidad más sólidos.

yesenia gil

student•

que es renderizar

William Schnaider Torres Bermon

student•

El renderizado es el proceso de mostrar tu página web en un navegador, debido a que transforma los documentos HTML y otros recursos de una página web en una representación visual interactiva en el dispositivo del usuario. Por lo que renderizar tiene que ver con una serie de acciones como: analizar, procesar y visualizar una web, las cuales son realizadas en cuestión de segundos.

El motor de renderizado es un software que toma contenido marcado (como HTML, XML, archivos de imágenes, etc.) e información de formateo (como CSS, XSL, etc.) y luego muestra este contenido ya formateado en la pantalla de aplicaciones. Los motores de renderizado se usan usualmente en navegadores web, clientes de correo electrónico u otras aplicaciones que deban editar y mostrar contenidos web.

CARLOS JARAMILLO

student•

CSR (Client-Side Rendering):

CSR significa "renderizado del lado del cliente". En CSR, la mayoría del procesamiento de renderizado se realiza en el navegador del cliente, es decir, en el lado del cliente. La aplicación web descarga un esqueleto básico de HTML y JavaScript al cliente. Posteriormente, el JavaScript se ejecuta en el navegador del cliente para solicitar datos al servidor y generar el contenido de la página dinámicamente. Es útil para aplicaciones interactivas que requieren actualizaciones frecuentes y manipulación del DOM en el lado del cliente. Algunos frameworks populares que admiten CSR incluyen React, Angular y Vue.js. SSR (Server-Side Rendering):

SSR significa "renderizado del lado del servidor". En SSR, el procesamiento de renderizado se realiza en el servidor antes de enviar el HTML al navegador del cliente. El servidor genera la página completa y la envía al cliente, lo que significa que el navegador recibe el contenido listo para mostrarse. SSR es beneficioso para mejorar el SEO (Optimización de Motores de Búsqueda) y para mejorar el tiempo de carga inicial de la página, ya que se entrega una versión renderizada al cliente desde el principio. Puede ser más costoso en términos de recursos de servidor en comparación con CSR, especialmente para aplicaciones altamente dinámicas. Frameworks como Next.js (para React), Nuxt.js (para Vue.js) y Angular Universal (para Angular) son ejemplos de frameworks que admiten SSR. En resumen, CSR y SSR son dos enfoques diferentes para el renderizado de aplicaciones web, cada uno con sus propias ventajas y casos de uso específicos. La elección entre CSR y SSR depende de varios factores, como los requisitos de rendimiento, la experiencia del usuario deseada y las necesidades de SEO.

Cristian Camilo Cortes Ortiz

student•

SERVER-SIDE RENDERING

El renderizado en el lado del servidor (Server-Side Rendering) es una técnica utilizada en el desarrollo web donde las páginas HTML se generan y renderizan en el servidor antes de ser enviadas al cliente. A diferencia del renderizado en el lado del cliente, donde el navegador del usuario construye la página usando JavaScript*,* SSR proporciona contenido completamente renderizado desde el servidor*, mejorando así el tiempo de carga inicial y la indexabilidad por motores de búsqueda. Esto es particularmente beneficioso para aplicaciones que requieren una rápida presentación del contenido y un mejor rendimiento* SEO*. Frameworks como:*

Next.js para React
Nuxt.js para Vue.js

Facilitan la implementación de SSR*, permitiendo a los desarrolladores combinar lo mejor de ambos mundos: la rapidez de carga y la interactividad. Aunque* SSR puede incrementar la carga del servidor y la complejidad del desarrollo, ofrece una experiencia de usuario más rápida y fluida, especialmente en conexiones lentas o dispositivos con recursos limitados.

Formatos de respuesta del servidor:

JSON
XML
Files
HTML

Sergio Ivan Alvarez Uribe

student•

Había escuchado el concepto cuando se realiza un deploy en un servicio gratuito de hosting, en donde la solicitud para cargar la página queda en una cola para ser procesada eventualmente.

Erick Marcial Machacado Rizo

student•

Server-Side Rendering (SSR) es una técnica donde el servidor procesa y genera el HTML completo de una página web en cada solicitud, enviándolo ya listo al navegador. A diferencia del Client-Side Rendering, el contenido es visible y rastreable por los motores de búsqueda desde el inicio, mejorando el SEO y la velocidad de la primera carga percibida por el usuario.

Carlos Orejuela

student•

Client Side Rendering (CSR): El servidor envía los archivos HTML, CSS y JS que componen la página web. Luego, el navegador es quien se encarga de "poner todo junto" para renderizarlo. Para ello, se pueden utilizar frameworks de JS, tales como: React, Vue, Angular.
Server Side Rendering (SSR): El renderizado es tarea del servidor, es decir, se encarga de ejecutar el código (JS, Pytho, PHP) para generar el contenido del HTML. Sin embargo, esto obliga al usuario a recargar la página para tener un contenido actualizado. Pero, en la actualidad se tienen frameworks como Astro que genera el HTML estático y solo los objetos que necesitan interactividad obtienen JS.

Frandel Corporan Rodríguez

student•

Todavía no me quedo claro como identifico un sitio renderizado desde el servidor o por cliente.

Benjamin Allen Ramirez Horna

student•

Para identificar si un sitio es renderizado del lado del servidor (SSR) o del lado del cliente (CSR), revisa lo siguiente:

Tiempo de carga inicial: SSR suele cargar más rápido la primera vez, ya que el HTML completo se envía desde el servidor.
Interactividad: En CSR, el contenido se carga de forma dinámica mediante JavaScript, lo que puede resultar en una experiencia más interactiva después de la carga inicial.
Inspección de código: Si al ver el código fuente de la página (Ctrl+U) ves un HTML completamente formado, es probable que sea SSR. Si ves un documento vacío o con scripts cargando contenido, es CSR.

Esta distinción es fundamental en el desarrollo web y se relaciona con el curso de desarrollo backend que estás tomando en Platzi.

Jesús Rivas

student•

Excelente!! Teóricamente lo había entendido, pero no sabia como observarlo para identificarlo en la práctica. Gracias Benjamin

Juan Felipe Rodriguez Valencia

student•

Server Side Rendering (SSR) es un enfoque en el desarrollo web donde las aplicaciones generan el contenido en el servidor en lugar de en el cliente. En SSR, las páginas HTML se crean en el servidor y se envían al navegador del usuario, lo que permite que el contenido sea visible de inmediato. Esto mejora la optimización para motores de búsqueda (SEO) y puede aumentar la velocidad de carga inicial.

A diferencia del Client Side Rendering (CSR), donde la mayor parte de la lógica y el contenido se cargan en el navegador, SSR puede ofrecer una mejor experiencia para usuarios con conexiones lentas. Técnicas como Next.js son populares para implementar SSR, facilitando la creación de aplicaciones React con esta capacidad.

Cristofer Vargas Morales

student•

Los frameworks como Angular, React, Vue y Astro pueden generar HTML y renderizarlo directamente en el servidor, un proceso conocido como Server-Side Rendering (SSR). Esto permite que el HTML se genere en el servidor y se envíe al cliente como una página completa. Sin embargo, también pueden funcionar en conjunto con un backend para proporcionar datos dinámicos, lo que significa que puedes usar un componente backend intermedio para un renderizado más complejo y dinámico. Esto depende de la arquitectura de tu aplicación y de tus necesidades específicas.

Nabil Aparicio

student•

LPTM React es una libreria