En un proyecto en el que usa React, el contenido real de su sitio web no está en un archivo .html, sino en archivos Javascript.
Los navegadores solo pueden representar un archivo html.
Representación del lado del servidor
- Cómo reducir el tamaño de archivo de una imagen, digamos de 250kb a 20kb
- ¿Cómo afecta la longitud del formulario de registro / registro a la conversión?
- ¿Existen buenos centros de capacitación para el desarrollo web / desarrollo de aplicaciones de Android en NCR?
- ¿Cuáles son las relaciones entre clases, métodos, objetos y funciones?
- ¿Cómo puedo hacer que una página de inicio de WordPress sea estática?
Extrajo el archivo / cadena HTML de su código Javascript / React en el servidor y luego envió un archivo / cadena html simple y simple al cliente / navegador que mostrará inmediatamente al usuario sin ningún paso adicional.
Representación del lado del cliente
No extrajo la cadena html del código javascript en el servidor y envió el archivo javascript al cliente / navegador. Ahora, el navegador no puede mostrarle nada al usuario de inmediato, porque ahora es el trabajo del navegador ejecutar el código javascript, obtener la cadena html y luego mostrarla al navegador. Este paso puede llevar bastante tiempo si su archivo javascript es grande y tiene muchos componentes.
La representación del lado del servidor no es necesaria en las aplicaciones de reacción
Antes de que se lanzaran bibliotecas y marcos como Angular / React, todos los sitios web usaban html para mostrar contenido al usuario. Los motores de búsqueda revisarán este archivo html e indexarán todo el contenido para que su sitio web sea visible para alguien que lo busque.
Cuando se lanzaron bibliotecas como angular / react, la gente comenzó a usarlas, pero la indexación de motores de búsqueda se convirtió en un problema. Dado que todo el código ahora se escribió en Javascript y los navegadores no indexarán nada que no esté escrito en HTML, lo que reducirá el ranking del motor de búsqueda de su sitio web.
Entonces, la gente comenzó a usar la representación del lado del servidor para representar una cadena html desde javascript y luego enviarla al usuario. De esta forma, los motores de búsqueda también pueden indexarlo. Gana gana para todos.
Ahora, como los motores de búsqueda son mucho más inteligentes, también han comenzado a ejecutar su código javascript, por lo que lo que he mencionado anteriormente no es una muy buena razón para hacer la representación del lado del servidor ahora.
Ahora, todos hacen SSR para mejorar el primer tiempo de pintura significativo .
Como mencioné anteriormente, en la representación del lado del cliente, todo el contenido se procesa en el cliente, por lo que el usuario tiene que esperar a que se descarguen grandes fragmentos de código Javascript y luego esperar aún más a que el navegador muestre algo. ¡Este es terrible!
Para mejorar la experiencia del usuario, SSR viene a rescatar.
Cuando se configura SSR, y un usuario visita el sitio web, el servidor representará inmediatamente la página en el servidor y creará una cadena html y luego enviará la cadena html al navegador, ahora desde que el navegador recibió una cadena html, la procesará inmediatamente sin perder más tiempo. De esta forma, el usuario verá algo en la página y no tendrá que esperar demasiado. Además, mientras mira alrededor de la página web, el navegador descargará el resto del código javascript del servidor y la página web se volverá completamente interactiva.
Cosas extra
Reaccionar es inteligente. Entonces, cuando esté utilizando SSR en reacción, no volverá a representar la página después de cargar el código de JavaScript. Automáticamente sabrá que usó SSR y simplemente encontrará todos los nodos DOM y luego adjuntará controladores de eventos, etc.
Espero haberlo explicado bien. Avísame si tienes más preguntas.
