Junior
¿Qué es el renderizado del lado del servidor (SSR)?
sobes.tech AI
Respuesta de la IA
El renderizado del lado del servidor (SSR) es el proceso en el que una página web se genera en el servidor en respuesta a una solicitud del cliente. En lugar de enviar al cliente un documento HTML vacío y un paquete de JavaScript para su posterior renderizado en el navegador, el servidor crea un documento HTML completo con contenido ya insertado.
Ventajas del SSR:
- Optimización SEO: Los robots de búsqueda indexan más fácilmente el contenido, ya que se les proporciona HTML listo, en lugar de JavaScript generado dinámicamente.
- Tiempo de primera pintura (FCP): El usuario ve el contenido de la página más rápidamente, ya que el servidor ya ha proporcionado un HTML listo para que el navegador lo muestre inmediatamente.
- Rendimiento en dispositivos de baja potencia: Consume menos recursos en el dispositivo cliente, ya que la mayor parte del trabajo de generación de la página se realiza en el servidor.
- Mejor interacción en redes sociales: Las redes sociales al compartir obtienen contenido listo para vista previa, en lugar de una página vacía.
Desventajas del SSR:
- Aumento de la carga en el servidor: El servidor debe procesar las solicitudes de renderizado de cada página, lo que puede ser costoso en recursos.
- Reducción de la interactividad hasta la hidratación: Después de recibir el HTML, el navegador necesita tiempo para "hidratar" — enlazar la lógica de JavaScript con el DOM ya mostrado. Hasta que finalice la hidratación, la página puede ser parcialmente o completamente no interactiva.
- Complejidad en el desarrollo: Requiere una arquitectura específica de la aplicación y frameworks especiales (por ejemplo, Next.js para React, Nuxt.js para Vue.js, Angular Universal para Angular).
Con SSR, el cliente envía una solicitud al servidor, que la procesa, genera una cadena HTML con el contenido y la estructura listos, y la envía de vuelta al cliente. El navegador muestra el HTML recibido y luego carga y ejecuta el JavaScript del cliente para añadir interactividad (proceso de hidratación).