Server-Side Rendering
Contenido del curso
Server-Side Rendering
Contenido del curso
Harold German Granados Guerrero
Maira Duque
Jairo Saul Salas Quiñones Pro-Dev | Sci-Tech
Cristian David Romero Melo
Elián Yeltzin Paniagua Mariaca
Juan Camilo Maldonado Perez
Jairo Saul Salas Quiñones Pro-Dev | Sci-Tech
yesenia gil
Eduardo Razo Cobián
ROMMEL DUAREZ SAENZ
Cristian Camilo Cortes Ortiz
Jairo Saul Salas Quiñones Pro-Dev | Sci-Tech
Ismael Torres
Luis Angel Casas Pérez
Erick Marcial Machacado Rizo
yesenia gil
William Schnaider Torres Bermon
CARLOS JARAMILLO
Sergio Ivan Alvarez Uribe
Kenneth Angulo L
Kenneth Angulo L
Mario Alejandro Crespo Reyes
Daniel Eduardo Rojas Pulido
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.
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.
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)?
6. ¿En qué situaciones es especialmente útil el Server-Side Rendering (SSR)?
Cuando se requiere:
SSR
Ventajas
Desventajas
CSR
Ventajas
Desventajas
¿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.
> 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.
Que es renderizar
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.
es el procesamiento del texto de la pagina para convertirlo en lo q se ve en pantalla
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:*
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:
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.
🧠 Node.js + Express: Busco mentes críticas
Acabo de publicar Neec Backend. Dicen que el mejor código es el que se comparte y se critica.
Estimado compañero desarrollador, si no te conformas con lo básico. Entra, clónalo y dime: ¿Qué harías tú diferente?
Si te gusta la iniciativa, deja una ⭐ en el repo para que más estudiantes lo encuentren. Tu feedback es el combustible de este proyecto.
👇 El código está aquí:
Deberías considerar Server-Side Rendering (SSR) cuando la optimización para motores de búsqueda (SEO) y un tiempo de carga inicial rápido son cruciales para tu aplicación, como en sitios de contenido o e-commerce. SSR renderiza la página en el servidor antes de enviarla al cliente, lo cual mejora la experiencia del usuario y la visibilidad en buscadores. Sin embargo, esto puede aumentar la carga en tu servidor, lo cual es un factor a considerar.
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.
que es renderizar
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.
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.
Este concepto me quedo mas claro recientemente estudiando los frameworks de JS (solid, react, etc).
Porque entregan al navegador el codigo HTML (ya masticado por decirlo asi) .
De hecho en la clase de optimizacion web, tambien hablan del SSR como una tecnica de optimizacion.
¿Cómo mejora el SSR el posicionamiento SEO?
El SSR mejora el SEO porque le entrega a los motores de búsqueda (como Googlebot) el contenido de tu página ya procesado y listo para ser leído. Cuando usas renderizado del lado del cliente, los rastreadores a veces tienen problemas o retrasos para ejecutar el JavaScript y descubrir qué hay en tu sitio. Al enviar un HTML completo desde el servidor, garantizas que las etiquetas meta, los títulos y el contenido principal sean indexados instantáneamente, logrando mejor visibilidad.
Hay un error chiquito, realmente la plataforma se llama:
Netlify
Aunque Server-Side Rendering - SSR añade carga al servidor, puede contribuir a la escalabilidad al liberar recursos del lado del cliente y mejorar la percepción de velocidad. Al enviar una página ya renderizada, reduce el tiempo que el navegador dedica a procesar JavaScript inicial, permitiendo que la aplicación se sienta más rápida y responsiva. Esto puede mejorar la experiencia del usuario, un factor indirecto pero importante en la escalabilidad y retención de usuarios.
