No tienes acceso a esta clase

¬°Contin√ļa aprendiendo! √önete y comienza a potenciar tu carrera

Aprende Inglés, Programación, AI, Ciberseguridad y más a precio especial.

Antes: $249

Currency
$209
Suscríbete

Termina en:

1 Días
12 Hrs
21 Min
48 Seg

Server-Side Rendering

18/19
Recursos

Aportes 12

Preguntas 3

Ordenar por:

¬ŅQuieres ver m√°s aportes, preguntas y respuestas de la comunidad?

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

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.

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

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.

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.

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.