¿Qué es el renderizado del lado del servidor?
El renderizado del lado del servidor (SSR) genera el HTML inicial de una página en el servidor y lo envía al navegador. Después, el JavaScript del lado del cliente puede hidratar ese HTML para proporcionar interactividad.
Cómo funciona el renderizado del lado del servidor
El SSR ejecuta el renderizado de componentes en un servidor para cada solicitud o a partir de una caché del lado del servidor, y produce una representación HTML que puede mostrarse antes de que se ejecute el paquete de la aplicación. Después, la hidratación vincula la lógica del cliente al marcado correspondiente cuando se necesita interactividad. Esto difiere de la generación estática, que crea el HTML antes de las solicitudes, y de las páginas renderizadas íntegramente en el cliente, que parten de una estructura mínima. El SSR forma parte de la ruta de entrega web y puede combinar el contexto de la solicitud, los datos del backend y el enrutamiento antes de enviar la respuesta.
Datos clave
- La hidratación espera que el árbol inicial del cliente coincida con el marcado del servidor; la configuración regional, la hora, los valores aleatorios o las ramas de código exclusivas del navegador pueden causar discrepancias y hacer que se descarte trabajo.
- El renderizado del servidor puede hacer que el contenido inicial esté disponible antes, pero la lentitud de los datos del backend o los cálculos sin caché aumentan el tiempo hasta el primer byte, a menos que los resultados se transmitan progresivamente o se almacenen en caché.
- El código ejecutado durante el SSR no dispone del DOM del navegador, y los componentes marcados para el cliente también pueden renderizarse en el servidor para generar el HTML inicial. Por eso, accede a window o document solo desde código exclusivo del navegador, como efectos o controladores de eventos, y carga los módulos que accedan a ellos al importarse mediante una importación dinámica del lado del cliente.
Cuándo importa el renderizado del lado del servidor
Usa SSR cuando sean importantes el contenido inicial, las vistas previas de enlaces, el descubrimiento en buscadores o la capacidad de funcionar sin JavaScript. Añade trabajo de renderizado al servidor y puede causar errores de hidratación si el resultado del navegador difiere del HTML del servidor.