Renderización

La arquitectura del PWA Kit se basa en el sistema de renderización de React, y añade características que benefician tanto a los usuarios como a los desarrolladores. Esta guía de arquitectura examina en detalle estas características del sistema de renderizado de PWA Kit y su funcionamiento. Se presta especial atención a las partes del SDK de React de PWA Kit y la Retail React App que se unen para potenciar cada característica.

Para crear una primera impresión favorable, la primera página que un usuario solicita de su storefront debe cargarse lo más rápido posible. Pero las solicitudes de la primera página exigen más tiempo de renderización que las siguientes. Se deben renderizar todos los componentes de la página, no solo los que necesitan actualizarse. Para la carga crítica de la primera página, utilizamos la renderización del lado del servidor porque ofrece una poderosa herramienta para optimizar el rendimiento: el almacenamiento en caché.

El almacenamiento en caché del CDN de Managed Runtime puede guardar una versión de una página renderizada previamente y ofrecérsela al usuario en un instante. No hay renderización más rápida que la que ya está hecha.

Para saber cómo aumentar el rendimiento mediante el almacenamiento en caché, consulte nuestra guía sobre Cómo maximizar la tasa de aciertos en caché.

Servidor de la aplicación

El código principal para la renderización del lado del servidor se ejecuta dentro del servidor de la aplicación. El servidor de aplicaciones es una aplicación Exprés que maneja las solicitudes de HTTP entrantes y llama a una función llamada render como respuesta. El servidor de la aplicación se define en app/ssr.js.

La función render se importa desde el SDK de React del PWA Kit. Las funciones de ayuda (también del SDK) crean una instancia de Express y le adjuntan la función render como método de enrutamiento de Express para todas las solicitudes GET.

Después de la primera carga de la página, las tareas de renderización se transfieren del lado del servidor al lado del cliente a través de un proceso llamado hidratación. Durante la hidratación, la aplicación de React comienza a ejecutarse en el navegador del usuario. Los gestores de eventos entran en acción para responder a los aportes del usuario. Los elementos de la página se renderizan según sea necesario y según los aportes del usuario en la renderización del lado del cliente. Este renderizado más eficiente y dirigido por el usuario permite la experiencia fluida por la que React es famoso.

La arquitectura del PWA Kit trabaja detrás de escena para que la transición de la renderización del lado del servidor a la del lado del cliente sea lo más fluida posible. Por ejemplo, todos los componentes están precargados con todas las props que necesitan, incluso las que fueron el resultado de las solicitudes a la API. Durante la renderización del lado del servidor, estas props se serializan y se incrustan en la fuente de la página para que se puedan utilizar durante la hidratación.

Código isomórfico

Debido a que el mismo código se renderiza tanto en entornos del lado del servidor como del lado del cliente, debe ser isomórfico. El JavaScript isomórfico (también conocido como JavaScript universal) es un código que no depende del acceso directo a ninguna construcción de código que solo esté disponible en un entorno de ejecución u otro. Cuando una construcción no está disponible en ambos entornos, se debe añadir un código condicional alrededor de esta para asegurarse de que esté disponible en el entorno actual.

La siguiente tabla enumera algunas construcciones de uso común que deben utilizarse con el código condicional:

ConstructoDescripciónDisponibilidad
window.locationURL actual del navegadorSolo del lado del cliente
reqSolicitud de HTTP de ExpressSolo del lado del servidor
resRespuesta de HTTP de ExpressSolo del lado del servidor

Para determinar si la renderización se produce del lado del cliente o del servidor, compruebe la presencia del objeto window. El siguiente ejemplo utiliza esta técnica para renderizar un precio solo del lado del cliente:

Parte del contenido, como el que es personalizado o el que cambia con frecuencia, debe renderizarse únicamente del lado del cliente para obtener el mejor rendimiento posible. Consulte nuestra guía sobre Cómo maximizar la tasa de aciertos en caché para obtener más información.

Revise el código fuente en app/ssr.js para obtener un mayor entendimiento de la renderización. Contiene importantes configuraciones del servidor de aplicaciones, como la duración por defecto del almacenamiento en la caché para las páginas.

Mientras lee la documentación del PWA Kit, no se pierda la guía de arquitectura de la Retail React App.