La renderización hace referencia al proceso de creación del código necesario para crear una página con la que los usuarios finales pueden interactuar a través de su navegador. Esto incluye preparar el contenido, aplicar la lógica y el procesamiento, e incluir los elementos de la IU y otros componentes obligatorios necesarios para mostrar la página final. Las aplicaciones basadas en el contenido se enfocan en la velocidad de carga rápida, la latencia baja y los tiempos de renderización rápidos.
Renderización del servidor (SSR)
La renderización del servidor (SSR) implica renderizar páginas web en el servidor y, luego, enviar el HTML renderizado por completo al navegador del cliente, en lugar de renderizarlas del lado del cliente con JavaScript. Cuando los usuarios acceden a una aplicación, su navegador envía una solicitud al servidor. La aplicación procesa la solicitud en el servidor, lo que incluye recopilar datos de bases de datos o APIs externas, y luego procesa el HTML para la página solicitada. Luego, el servidor envía el código HTML completamente procesado de la página de vuelta al navegador del usuario. Cuando el navegador del usuario recibe el código HTML, este carga los archivos JavaScript necesarios.
Obtén información sobre HTML en web.dev.
Los beneficios de usar la SSR incluyen una velocidad de carga inicial rápida, un buen rendimiento de la optimización por motores de búsqueda (SEO), confiabilidad y una buena experiencia del usuario en general. Sin embargo, la implementación de la SSR puede ser más compleja que la del procesamiento del cliente (CSR) debido a la sobrecarga de rendimiento y la habilidad de desarrollo necesaria para compilar y mantener aplicaciones compatibles con SSR. SSR es especialmente beneficioso para aplicaciones web basadas en contenido, plataformas de comercio electrónico y cualquier aplicación que requiera un buen rendimiento de SEO y velocidades de respuesta iniciales rápidas.
Generación de sitios estáticos (SSG)
La generación de sitios estáticos (SSG) genera archivos HTML estáticos durante el tiempo de compilación y se los entrega a los usuarios sin renderización del servidor o del cliente. El contenido web se crea, por lo general, en un formato estructurado como Markdown, JSON o YAML, y también incluye texto, imágenes y otros recursos. Una herramienta de generación de sitios estática, como Hugo o Jekyll, procesa el contenido y genera archivos HTML, CSS y JavaScript. El resultado estático es el sitio web completo, y estos archivos estáticos se implementan en un servidor web, CDN o servicio de hosting.
Obtén más información sobre CSS y HTML en web.dev.
Como los archivos son estáticos, se pueden almacenar en caché y, por lo tanto, se cargan muy rápidamente. SSG es una buena opción para aplicaciones web que no cambian con frecuencia o aquellas que se actualizan mediante compilaciones periódicas de sitios. No es una opción adecuada para aplicaciones web con interactividad dinámica.
Procesamiento del cliente (CSR)
La renderización del lado del cliente (CSR) se realiza en el navegador del cliente, no en el servidor. Las aplicaciones web suelen cargarse en plantillas HTML mínimas y, luego, el contenido se manipula de forma dinámica con JavaScript y los datos de los servidores o las APIs. Después de una solicitud de aplicación, el servidor envía un documento HTML mínimo con la estructura básica y el código JavaScript necesarios para procesar la página. El código JavaScript se ejecuta en el navegador del usuario. Luego, el código procesa los datos recuperados y genera el contenido, que incluye CSS, HTML y todos los elementos interactivos. Luego, el código JavaScript responde a la interacción del usuario, como el envío de un formulario.
Los beneficios del CSR incluyen transiciones de página rápidas e interfaces responsivas. A menudo, las aplicaciones web basadas en CSR tienen tiempos de carga iniciales lentos en comparación con SSR, y pueden presentar desafíos de SEO. A medida que las aplicaciones de CSR crecen, pueden volverse bastante complejas de desarrollar y mantener.