curso [EXTRA] Server Side Rendering (SSR) VS Client Side Rendering (CSR)

[Nicolas.Tizeira]

Bueno como este tema lo pase muy por alto en las clases lo voy a añadir como un extra para los que no llegan a entender lo que significa server side rendering conocido como SSR y que es client side rendering conocido como CSR y sus diferencias entre si.

 

Bueno para no hacerlo muy largo paso a explicarles....

¿Que es Server Side Rendering?
 

Este es conocido como SSR o renderizado en la parte del servidor, y se puede decir que te da la posibilidad de poder renderizar el HTML de los componentes de tu web application en forma de cadena de texto desde la parte del servidor, en vez de utilizar el lado del cliente. Estas cadenas son las respuestas enviadas a las peticiones de la web application que estamos desarrollando. Es decir, que en ves de manipular del DOM con funciones sobre el navegador, delegamos esta tarea a un paso anterior que seria en el lado del servidor.

Esta es la alternativa mas usada hoy en día para poder brindar una falsa idea de una web "rápida" y por que digo falsa idea? por que en realidad lo que hace SSR es devolver en la primer peticion del index.php o index.html un index con contenido ya procesado en el lado del servidor, como un primer esqueleto, y luego ir completándolo.... Es muy utilizado para mentener a los usuarios impacientes en nuestra web application mostrando un poco de contenido piensan que la web cargo entera, pero en realidad aun sigue en proceso desde el lado del servidor. 

¿Que es Client Side Rendering?

Bueno todo lo contrario, este trabaja desde el lado del cliente y los componentes se renderizan modificando el DOM sobre el navegador atravez de funciones, lo que esto provoca que sea mas lenta la carga del sitio, ya que en la primer petición del index.html a nuestra web application esta debe renderizar el DOM ENTERO, provocando que tarde unos considerables segundos mas que utilizando el método SSR.
 

Y por si no quedo claro miren esta imagen que me las robe de un foro, si, esta vez no las hice yo por que es un tema que quiero explicar rápido y conciso no me voy a demorar preparándolo como cuando preparo las clases que si son 100% echas por mi de principio a fin:

Esto es una web application renderizada desde el cliente:

Y esto renderizada desde el servidor:

Y seguro digas, pero vos estas proponiendo React como tecnología avanzada y este utiliza CSR ya que es front-end y no back-end. Claro que si, pero que pasa REACT JS es especial y lo dije desde el principio, desde que comencé a hablarles sobre esta librería, React Js tiene SU PROPIO DOM VIRTUAL, lo conocido hoy en dia como Virtual DOM, por lo tanto este en los llamados y peticiones no renderizara el DOM ENTERO cada vez que se le realiza una petición, este los mantiene en constante comparacion entre el virtual y el original, en cuanto entra una petición es procesada en el virtual y este solo renderiza la parte modificada, actúa como SSR en la el front-end e incluso se puede decir que es mucho mas rapido y efectivo. Es decir que React utiliza SSR en front-end, y incluso logra agilizarlo mas de lo que ya lo conocíamos.


Pueden ver mas sobre Virtual DOM en la clase 2 que hablo sobre el. 

Saludos y hasta la próxima.