Enrutamiento

Cuando un usuario realiza una solicitud en el dominio de su storefront, esta es manejada por un manejador Express.js llamado render que está definido en pwa-kit-react-sdk/ssr/server/react-rendering. El manejador elige un componente para renderizar en respuesta. Este tipo de componente se denomina ruta. Las rutas que están disponibles para la renderización se definen en un grupo de objetos llamada routes en app/routes.jsx.

La matriz de rutas sigue la forma de configuración de rutassegún lo definido por el enrutador de React. Cada objeto de la matriz routes puede tener las siguientes propiedades:

ClaveTipoDescripciónDocumentos de referencia
rutaUna cadena de estilo Express, un grupo de cadenas o una expresión regularLa ruta que se compara con la ruta de la solicitud entrante para una posible coincidenciaAPI del enrutador de React → componente de la ruta → ruta
componenteFunción (importada en routes.jsx)Componente que se renderiza si la ruta coincide con la solicitudAPI del enrutador de React → componente de la ruta → componente
exactoBooleanoDetermina si la ruta debe ser una coincidencia exacta o noAPI del enrutador de React → componente de la ruta → exacto

Un proyecto recién generado ya incluye objetos en la matriz routes para muchas páginas estándar de comercio electrónico, como la página de inicio, la PLP y la PDP.

Pero, ¿cómo elige la aplicación React el componente adecuado para cada solicitud? Utilizamos la biblioteca Enrutador de React para buscar secuencialmente a través de los objetos de configuración de ruta en la matriz routes hasta encontrar una cadena path que coincida con la ruta solicitada.

El Enrutador de React le da muchas opciones para construir sus propias cadenas path. Puede especificar más de una ruta para el mismo componente y utilizar expresiones regulares para hacer coincidir las rutas que siguen un patrón.

El Enrutador de React también se utiliza en toda la Retail React App para implementar la navegación. Por ejemplo, todos los hipervínculos utilizan el componente Link del Enrutador de React. El Enrutador de React ofrece otros componentes que permiten acceder al historial del navegador, a los parámetros de consulta, etc.

Para obtener más información sobre cómo usar el Enrutador de React, consulte la documentación oficial. (Consulte la documentación de la versión 5, ya que otras versiones utilizan un sistema de concordancia de patrones diferente).

Cada componente especificado en la matriz routes se mejora automáticamente con la función routeComponent, un componente de orden alto del SDK del PWA Kit de React. La clase de base que se utiliza para construir routeComponent define varios métodos estáticos, incluidos dos importantes que los desarrolladores de storefronts pueden personalizar: getProps y shouldGetProps.

El método getProps se utiliza para suministrar datos obtenidos de solicitudes de la API a routeComponent través del objeto props.

Cuando routeComponent mejora un componente de la matriz routes, busca dentro de las propiedades del componente una función llamada getProps. Si define una función allí, se expone como un método del componente mejorado. No necesita definir la función para cada componente de la matriz routes, solo para aquellos en los que obtiene datos antes de renderizarlos.

Se espera que la función getProps que defina devuelva una promesa. Una vez que se asienta la promesa, su valor resuelto se pasa al componente mejorado a través del objeto props cuando se renderice el componente.

Cuando se renderiza un componente de la matriz routes, el método getProps del componente recibe un único objeto JavaScript. Este objeto tiene las siguientes propiedades, dependiendo del contexto de renderización:

ClaveTipoDescripciónDisponibilidadMás información
paramsObjetoContiene las propiedades de los objetos que corresponden a los parámetros de ruta nombrados en una cadena de ruta de estilo Express. Ejemplo: Si tiene la ruta /user/:name, el valor de :name en la ruta de solicitud está disponible como params.name. Valor predeterminado: {}.Tanto del lado del cliente como del lado del servidorAPI de Express → Solicitud → req.params
reqObjetoUna versión del objeto de solicitud de Node mejorada por Express. Representa la solicitud HTTP y con propiedades para la cadena de consulta, los parámetros, el cuerpo, los encabezados de HTTP, etc.Únicamente del lado del servidorAPI de Express → Solicitud
resObjetoRepresenta la respuesta de HTTP que una aplicación Express envía cuando recibe una solicitud de HTTP.Únicamente del lado del servidorAPI de Express → Respuesta
locationCadenaLa URL de la solicitud.Tanto del lado del cliente como del lado del servidorNo es parte de la API de Express

Para manejar los errores en una función getProps, tiene dos opciones.

La primera opción es arrojar un objeto HTTPError, que se puede importar desde pwa-kit-react-sdk/ssr/universal/errors. Al arrojar un HTTPError, se renderiza un componente Error dedicado.

La segunda opción es usar props para informar al componente renderizado del error para que pueda ser usado en la lógica de manejo de errores personalizada.

Este es un ejemplo que utiliza ambos enfoques de gestión de errores:

El objeto devuelto por getProps se serializa y se incrusta en el HTML renderizado a través de un objeto llamado __PRELOADED_STATE__ en la fuente de la página.

Para mantener el tamaño pequeño del HTML renderizado, sea selectivo en cuanto a qué datos devolver en getProps. Por ejemplo, evite devolver la respuesta completa de una solicitud a la API, si es posible.

Para obtener una vista previa de la versión de la página que se renderiza en su navegador del lado del servidor, añada ?__server_only a la URL. Este parámetro de consulta detiene el proceso de hidratación para que el navegador no se encargue de la renderización, lo que deja la página sin cambios después de la renderización del lado del servidor. Para ver una versión bonita del objeto __PRELOADED_STATE__, añada ?__server_only&__pretty_print a la cadena de consulta.

Cuando los usuarios navegan a páginas posteriores durante la renderización del lado del cliente, la página se renderiza inmediatamente. Dado que el renderizado puede ocurrir mientras getProps sigue obteniendo datos, escriba siempre código condicional en sus componentes para manejar los props no definidos. También recuerde renderizar un componente marcador de posición (como Skeleton de la IU de Chakra) mientras los props estén indefinidos.

En el lado del cliente, el método render de su componente se llama antes y después de que getProps resuelva. Utilice la proposición isLoading pasada a su componente para decidir si se renderiza una pantalla de carga o no.

Al hacer varias solicitudes HTTP en getProps, intente hacerlas en paralelo. Si no puede hacerlos en paralelo, considere la posibilidad de pasarlos al renderizado del lado del cliente.

Si solo quiere obtener datos en el lado del cliente, utilice enlaces de React en su componente en lugar de getProps.

Si desea ejecutar el mismo código para todas las rutas, puede definir una función getProps que pertenezca al componente App, que es uno de los componentes especiales. Los componentes especiales se utilizan para agregar una funcionalidad que se comparte en varias rutas. Para obtener más información sobre el componente de la aplicación y otros componentes especiales, consulte nuestra guía de Componentes especiales.

El método shouldGetProps controla cuándo se hace la llamada al método getProps. Durante el renderizado del lado del servidor, se llama a shouldGetProps solo una vez. Durante el renderizado del lado del cliente, se lo llama cada vez que se llama al método componentDidUpdate del ciclo de vida de React.

Por defecto, getProps llama al getProps cada vez que el valor de location.pathname cambia. Puede reemplazar el comportamiento predeterminado de cada componente en el grupo routes definiendo su propia función llamada shouldGetProps como una propiedad del componente. Se puede personalizar shouldGetProps para inspeccionar la solicitud y llamar únicamente a getProps para determinadas solicitudes.

Comprenda mejor el enrutamiento revisando el código fuente. Estos son algunos de los archivos clave que hay que comprobar en la Retail React App:

  • app/routes.jsx: demuestra la sintaxis de estilo Express para la coincidencia de rutas, incluidos los parámetros de ruta nombrados.
  • app/pages/product-detail/index.jsx: este componente de muestra para el PDP incluye funciones personalizadas tanto para getProps como para shouldGetProps.
  • app/components/_app_config/index.jsx: incluye un amplio código de configuración y una función getProps para toda la aplicación.

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