La diferencia entre renderizado del lado del cliente y renderizado del lado del servidor (redirigido)

Representación del lado del servidor: genera el árbol DOM en el lado del servidor y lo devuelve al front-end.

Representación del lado del cliente (SSR): el frontend va al backend y obtiene los datos para generar el árbol DOM.

Ventajas del renderizado del lado del servidor:

1. Intente no ocupar recursos del front-end. El front-end requiere menos tiempo y es más rápido.

2. Es beneficioso para la optimización SEO, porque hay una página HTML completa en el backend, por lo que es más fácil para los rastreadores rastrear información.

Desventajas de la renderización del lado del servidor:

1. No favorece la separación del front-end y back-end y reduce la eficiencia del desarrollo.

2. El análisis de HTML acelera el front-end, pero aumenta la presión sobre el servidor.

Ventajas del renderizado del lado del cliente:

1. El front-end y el back-end están separados, lo que mejora la eficiencia del desarrollo.

2. La experiencia del usuario es mejor. Convertimos el sitio web en un SPA (aplicación de página única) o convertimos parte del contenido en un SPA. Cuando los usuarios hacen clic, no habrá saltos frecuentes.

Desventajas del renderizado del lado del cliente:

1. El tiempo de respuesta del front-end es lento, especialmente en la primera pantalla, lo que resulta insoportable para los usuarios.

2. No favorece la optimización SEO porque el rastreador no reconoce SPA, por lo que solo registra una página.

La diferencia entre la representación del lado del servidor y la representación del lado del cliente:

1. La diferencia esencial entre los dos: quién ha completado el empalme completo de html, la representación del lado del servidor genera DOM en el árbol del lado del servidor, la representación del lado del cliente genera un árbol DOM en el lado del cliente.

2. Velocidad de respuesta: la representación del lado del servidor acelerará la velocidad de respuesta de la página, mientras que la representación del lado del cliente tendrá una velocidad de respuesta más lenta.

3. Optimización SEO: la representación del lado del servidor es más propicia para que los rastreadores capturen información porque tiene varias páginas, mientras que la representación del lado del cliente no es propicia para la optimización SEO.

4. Eficiencia del desarrollo: la lógica de representación del lado del servidor no está bien separada, lo que no favorece la separación del front-end y el back-end, y la eficiencia del desarrollo del cliente es baja. El renderizado lateral se desarrolla utilizando la separación del front-end y el back-end, que es más eficiente. Esta es también la forma en que se presentan la mayoría de las empresas.

Distinga intuitivamente entre renderizado del lado del servidor y renderizado del lado del cliente:

Si puede encontrar el texto del contenido en la página de inicio en el código fuente, entonces es el DOM construido en el lado del servidor. Esta es la representación del lado del servidor y lo contrario es la representación del lado del cliente.

Debemos utilizar renderizado del lado del servidor o renderizado del lado del cliente:

Debemos elegir el método de renderizado según el escenario empresarial.

Si se trata de un sitio web corporativo cuya función principal es la visualización de páginas sin interacciones complejas y requiere una buena optimización del motor de búsqueda, entonces deberíamos utilizar el renderizado del lado del servidor.

Si se trata de una página de administración de back-end que es altamente interactiva y no necesita considerar la optimización del motor de búsqueda, entonces deberíamos utilizar la representación del lado del cliente.

El método de representación a utilizar no es absoluto. Muchos sitios web ahora utilizan la representación del lado del servidor y la representación del lado del cliente: la primera pantalla utiliza la representación del lado del servidor y otras páginas utilizan la representación del lado del cliente. Esto asegura que la primera pantalla se cargue más rápido y también logra la separación del front-end y back-end.