Server-Side Rendering

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 .

**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.

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

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.

¿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.

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

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

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.

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.

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.

Interesante este concepto sobre renderizar las paginas web y como estas nos benefician con su uso. Lo que llamo mi atencion es la interaccion con el HTML en tiempo real. Es algo interesante.