Enrutamiento

Cuando un usuario realiza una solicitud en el dominio de su escaparate, 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:

Clave	Tipo	Descripción	Documentos de referencia
ruta	Una cadena de estilo Express, un grupo de cadenas o una expresión regular	La ruta que se compara con la ruta de la solicitud entrante para una posible coincidencia	API del enrutador de React → componente de la ruta → ruta
componente	Función (importada en `routes.jsx`)	Componente que se renderiza si la ruta coincide con la solicitud	API del enrutador de React → componente de la ruta → componente
exacto	Booleano	Determina si la ruta debe ser una coincidencia exacta o no	API 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:

Clave	Tipo	Descripción	Disponibilidad	Más información
`params`	Objeto	Contiene 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 servidor	API de Express → Solicitud → req.params
`req`	Objeto	Una 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 servidor	API de Express → Solicitud
`res`	Objeto	Representa la respuesta de HTTP que una aplicación Express envía cuando recibe una solicitud de HTTP.	Únicamente del lado del servidor	API de Express → Respuesta
`location`	Cadena	La URL de la solicitud.	Tanto del lado del cliente como del lado del servidor	No es parte de la API de Express

A partir de la versión 3.0.0, introdujimos una nueva estrategia de obtención de datos llamada withReactQuery que puede usar en lugar de getProps.
Puede usar withReactQuery y withLegacyGetProps al mismo tiempo.
getProps y shouldGetProps se eliminaron de la plantilla predeterminada de las páginas de Retail React App, pero no están en desuso. Se mantiene el apoyo a largo plazo para estos métodos.

Consulte Actualización a la versión 3.

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.

Para obtener un enfoque de enrutamiento alternativo, consulte Resolución deURL.

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