No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Ventajas y desventajas del Server Side Rendering

5/17
Recursos

¿Cuáles son las ventajas del Server-Side Rendering?

El Server-Side Rendering (SSR) ofrece una serie de beneficios significativos, especialmente en el ámbito de la optimización de motores de búsqueda (SEO) y el rendimiento web.

  • Mejora del SEO y la indexación: Al utilizar SSR, se obtiene un primer vistazo completo del DOM al cargarse la aplicación. Esto permite que los motores de búsqueda indexen de manera más eficiente el contenido, mejorando la visibilidad en los resultados de búsqueda.

  • Accesibilidad mejorada: SSR presenta todos los elementos HTML desde el inicio, haciendo la aplicación más accesible para diversos usuarios.

  • Rendimiento: Proporciona una carga inicial más rápida debido a que los elementos cruciales están disponibles inmediatamente, lo que se traduce en mejoras en el rendimiento.

  • Función de proxy server: Con SSR, es posible transformar el servidor en un proxy server. Esto significa manejar respuestas de solicitudes a APIs antes de enviarlas al cliente, garantizando datos limpios y fáciles de manejar.

  • Prefetching de datos: Permite cargar datos necesarios de antemano sin requerir múltiples solicitudes desde el cliente. Esto es bien útil para manejar grandes cantidades de información sin saturar el navegador.

¿Y cuáles son las desventajas del Server-Side Rendering?

A pesar de sus múltiples ventajas, el SSR presenta también algunos desafíos que deben tenerse en cuenta.

  • Costo de infraestructura: A diferencia de los archivos estáticos, que pueden alojarse en servidores simples, SSR requiere un servidor Node específicamente, lo que puede conllevar gastos extra en infraestructura.

  • Vulnerabilidad a ataques: Al disminuir la dependencia de JavaScript en el cliente, creas un nuevo vector de ataque en el servidor que debe manejarse con buenas políticas de seguridad.

  • Routing más lento: En aplicaciones de una sola página (SPA), el routing se realiza en el cliente, permitiendo una navegación rápida. En SSR, el routing recae en el servidor, lo que puede resultar en una experiencia más lenta para el usuario.

  • Incompatibilidad con ciertas APIs: Algunas APIs del navegador y librerías pueden no funcionar con SSR. Al tratar de usarlas, podrían aparecer excepciones debido a que no existen en el contexto del servidor.

¿Existe una solución para superar las limitaciones del Server-Side Rendering?

Es fundamental conocer las limitaciones del SSR para mitigar sus desventajas. Una técnica útil en este contexto es la rehidratación, que ayuda a integrar la interactividad en un DOM inicialmente generado por SSR.

  • Proceso de rehidratación: Luego de que el servidor envía el HTML inicial sin interactividad (comparado con enviar un "DOM seco"), el cliente utiliza frameworks como React para añadir interactividad, mediante un proceso llamado rehidratación. Esto consiste en añadir capas de JavaScript al DOM ya existente.

Este enfoque no solo mitiga algunas de las limitaciones del SSR, sino que también optimiza la experiencia del usuario combinando lo mejor del Client-Side y Server-Side Rendering.

Para profundizar en tópicos técnicos específicos sobre el rendimiento del SSR y el proceso de rehidratación, se recomienda revisar recursos como el sitio web.dev, escrito por expertos de Google, donde se detalla cada paso de este proceso y se mide mediante herramientas como Core Web Vitals. Así, podrás entender mejor cómo afecta cada tipo de renderizado al rendimiento de la web. ¡Te invitamos a seguir explorando estas fascinantes tecnologías para aprovechar al máximo sus capacidades!

Aportes 5

Preguntas 0

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Ventajas:

  • Mejora en indexación y en SEO
  • Carga inicial as rapida
  • Mejor Performance
  • Mejor accesibilidad
  • Funciona como un proxy server: Manejo de request con datos mal formado o de difícil acceso
  • Prefetching de datos: Manejamos los datos que nuestra aplicación quiere tener sin necesidad de hacer peticiones desde el cliente

Desventajas:

  • Mayor Costo: Pagar un servidor de Node.
  • Nuevo vector de ataque: el servidor, se deben seguir políticas de seguridad en el Backend.
  • Mas lento al cambiar de ruta(Routing), el Routing se maneja desde el servidor
  • Incompatibilidad con APIs y librerías del navegador. (Principal desventaja)
**Resumen esquemático de las ventajas del Server Side Rendering (SSR)** 1. **Mejora en SEO e indexación** - **Por qué:** El SSR envía un DOM completamente renderizado al cliente, lo que facilita a los motores de búsqueda indexar el contenido correctamente. 2. **Carga inicial más rápida** - **Por qué:** Al enviar el HTML ya renderizado, el tiempo hasta que el usuario ve algo es menor, mejorando la percepción de rendimiento. 3. **Mejora en la accesibilidad** - **Por qué:** Todos los elementos HTML están disponibles en la carga inicial, permitiendo que tecnologías de asistencia como lectores de pantalla accedan al contenido de inmediato. 4. **Funciona como proxy server** - **Por qué:** Puede manejar y transformar respuestas de APIs antes de enviarlas al cliente, facilitando el manejo de datos de diversas fuentes. 5. **Prefetching de datos** - **Por qué:** Permite cargar datos en el servidor antes de que lleguen al cliente, optimizando el uso de ancho de banda y mejorando la experiencia del usuario. Estas ventajas hacen del SSR una opción atractiva para mejorar la experiencia del usuario y la eficiencia de las aplicaciones web.
I needed this course...
![]()![](https://web.dev/static/articles/rendering-on-the-web/image/app-rendering-types-examples_960.png)
La lectura tiene una imagen muy buena de la comparación entre renderizados ![](https://static.platzi.com/media/user_upload/infographic-showing-spec-cbd56ed4c56f1_856-41ccac26-daa3-4517-84fb-33582e8c4edb.jpg)