Representación del lado del cliente frente al lado del servidor en React

1. Renderizado del lado del cliente en React
2. Representación del lado del servidor en React
3. Representación del lado del cliente frente al lado del servidor en React

Tradicionalmente, las páginas web solían renderizarse en el servidor, pero con la aparición de marcos basados en JavaScript como React, la renderización del lado del cliente ha cobrado impulso. En estos días, las aplicaciones web se pueden representar en el servidor, en el navegador (del lado del cliente) o utilizar una combinación de ambos.

Renderizado del lado del cliente en React

React framework se utiliza principalmente para crear aplicaciones renderizadas en el lado del cliente. La mayoría de los tutoriales que ve en línea describen el proceso de creación de aplicaciones de una sola página.

Los tutoriales en React docs siguen este patrón, al igual que create-react-app, un paquete simple que le permite comenzar a crear aplicaciones React rápidamente.

Las aplicaciones de React renderizadas en el lado del cliente se desacoplan del servidor. El servidor solo muestra el HTML inicial, que es esencialmente una página vacía.

Luego, React representa elementos interactivos en el lado del cliente para llenar la página con contenido, imágenes y todo lo demás que compone la página. Por ejemplo, Netflix usa mucho React para representar elementos interactivos en el lado del cliente.

Representación del lado del servidor en React

Puede usar React para representar la página completa (incluidos los textos, las imágenes y el contenido) en el servidor. Cuando el usuario visita un sitio web, el servidor cargará la página HTML completa con todo su contenido.

Este enfoque permite que los rastreadores web, como los bots de Google, indexen la página con todo su contenido.

Sin embargo, si la página se representa completamente en el lado del servidor, no puede contener características de interactividad. Por ejemplo, si la página de inicio de Facebook solo se mostrara en el servidor, los usuarios no podrían ver las notificaciones nuevas sin actualizar la página.

Representación del lado del cliente frente al lado del servidor en React

La mayoría de los sitios web como Facebook y Netflix usan una combinación de ambos para obtener lo mejor de ambos mundos. Por ejemplo, si desea que Google indexe su sitio web y gane tráfico de motores de búsqueda, debe mostrar todo su contenido de texto en el lado del servidor.

Las aplicaciones del lado del cliente pueden verse bien para los visitantes, pero los bots solo ven una página HTML vacía.

Cuando se utiliza la combinación de CSR (representación del lado del cliente) y SSR (representación del lado del servidor), el servidor presenta un archivo HTML con el contenido mínimo necesario. Una vez que se cargan los scripts, puede usar el enfoque de representación del lado del cliente para mostrar funciones interactivas.