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é.
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.
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:
| Constructo | Descripción | Disponibilidad |
|---|---|---|
window.location | URL actual del navegador | Solo del lado del cliente |
req | Solicitud de HTTP de Express | Solo del lado del servidor |
res | Respuesta de HTTP de Express | Solo 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.
El sistema de renderización del PWA Kit proporciona una identificación de correlación (en formato UUID v4 format) en cada página. La identificación de correlación se puede utilizar para hacer coincidir las solicitudes y respuestas del PWA Kit con la actividad de otros sistemas, como la API de B2C Commerce.
En el lado del servidor, la identificación de correlación se establece en el valor de requestId en la puerta de entrada de API de la infraestructura de Managed Runtime. En el lado del cliente, se genera una UUID con cada navegación de página utilizando el método randomUUID() de la Web Crypto API integrada.
Para obtener la identificación de correlación en su aplicación PWA Kit, importe el enlace useCorrelationId:
Puede reenviar la identificación de correlación de PWA Kit a la API de B2C Commerce mediante el encabezado correlation-x. En la respuesta, la identificación de correlación reenviada se devuelve en el encabezado x-correlation-id, combinada con una identificación interna de la API.
Para obtener más información acerca de cómo utilizar la identificación de correlación de la API de B2C Commerce, consulte Acerca de la API de B2C Commerce.
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 predeterminada 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.