Roteamento

Quando um usuário faz uma solicitação ao domínio de sua loja virtual, ela é tratada por um manipulador do Express.js chamado render, que está definido em pwa-kit-react-sdk/ssr/server/react-rendering. Como resposta, o manipulador seleciona um componente para renderizar. O tipo de componente se chama “rota”. As rotas disponíveis para renderização são definidas em uma matriz de objetos denominada routes em app/routes.jsx.

O array de rotas segue o formato de configuração de rota, como definido pelo React Router. Cada objeto no array routes pode ter as propriedades a seguir:

Chave	Tipo	Descrição	Docs de referência
path	Uma string no estilo do Express, um array de strings ou uma expressão regular	O caminho que é comparado ao caminho da solicitação de entrada para uma possível correspondência	React Router API → Route component → path
component	Função (importada em `routes.jsx`)	Componente a renderizar se o caminho corresponder à solicitação	React Router API → Route component → component
exact	Booleano	Determina se o caminho deve ser uma correspondência exata ou não	React Router API → Route component → exact

Um projeto recentemente gerado já inclui objetos no array routes para muitas páginas padrão do comércio eletrônico, como a de início, PLP e PDP.

Mas como seu React App escolhe o componente correto a renderizar para uma solicitação determinada? Usamos a biblioteca do React Router para buscar sequencialmente por meio dos objetos de configuração da rota no array routes até que encontre uma string path que corresponda ao caminho da solicitação.

O React Router oferece a você uma série de opções para criar suas strings path. Você pode especificar mais de um caminho para o mesmo componente e usar expressões regulares para fazer a correspondência de caminhos que seguem um padrão.

O React Router também é usado no Retail React App para implementar a navegação. Por exemplo, todos os hyperlinks usam o componente Link do React Router. O React Router oferece outros componentes que dão acesso ao histórico de navegação, aos parâmetros de consulta, entre outros.

Para saber mais sobre como usar o React Router, veja a documentação oficial. (Considere a documentação da versão 5 porque as demais versões usam um sistema padrão de correspondência diferente.)

Cada componente especificado no array routes é automaticamente melhorado pela função routeComponent, um componente de ordem superior do PWA Kit React SDK. A classe básica que é usada para criar routeComponent define diversos métodos estáticos, incluindo dois importantes que os desenvolvedores de lojas (virtuais) podem personalizar: getProps e shouldGetProps.

O método getProps é usado para fornecer dados obtidos por solicitações de API ao routeComponent via o objeto props.

Quando o routeComponent aprimora um componente do array routes, ele verifica as propriedades do componente em busca de uma função de nome getProps. Se você define uma função ali, ela é exposta como um método do componente aprimorado. Você não tem que definir a função para cada componente na matriz routes, apenas os componentes nos quais você busca dados antes de renderizá-los.

Espera-se que a função getProps que você define retorne uma promessa. Quando a promessa é atendida, o valor resolvido dela é passado para o componente aprimorado por meio do objeto props no momento da renderização do componente.

Quando um componente do array routes é renderizado, o método getProps do componente é fornecido com um único objeto JavaScript. Esse objeto tem as propriedades a seguir, dependendo do contexto de renderização:

Chave	Tipo	Descrição	Disponibilidade	Mais informações
`params`	Objeto	Contém propriedades do objeto que correspondem aos parâmetros da rota nomeada em uma string de rota no estilo Express. Exemplo: Se você tem a rota `/user/:name`, então o valor de `:name` no caminho de solicitação está disponível como params.name. Valor padrão: `{}`.	No lado do cliente e no lado do servidor	Express API → Request → req.params
`req`	Objeto	Uma versão do objeto da solicitação do Node aprimorada pelo Express. Representa a solicitação HTTP e com as propriedades para a string de consulta, os parâmetros, o corpo, os cabeçalhos HTTP e mais.	Somente no lado do servidor	Express API → Request
`res`	Objeto	Representa a resposta HTTP que um aplicativo Express envia quando recebe uma solicitação HTTP.	Somente no lado do servidor	Express API → Response
`location`	String	O URL da solicitação.	No lado do cliente e no lado do servidor	Não é parte da Express API

Para solucionar erros em uma função getProps, você tem duas opções.

A primeira opção é emitir um objeto HTTPError, que pode ser importado de pwa-kit-react-sdk/ssr/universal/errors. Quando você emite um HTTPError, um componente Error é renderizado.

A segunda opção é usar props para informar ao componente renderizado sobre o erro, para que possa ser usado na lógica personalizada de tratamento de erros.

Veja aqui um exemplo que usa ambos os enfoques de tratamento de erros.

O objeto retornado pelo getProps é serializado e incorporado no HTML renderizado via um objeto chamado __PRELOADED_STATE__ na origem da página.

Para que o tamanho do HTML não cresça, selecione bem os dados a serem retornados em getProps. Se possível, evite retornar toda a resposta da solicitação de uma API, por exemplo.

Para ver em seu navegador a versão da página que é renderizada no lado do servidor, anexe ?__server_only ao URL. Esse parâmetro de consulta interrompe o processo de hidratação para que o navegador não assuma a renderização, deixando a página intocada depois da renderização do lado do servidor. Para ver uma versão formatada do objeto __PRELOADED_STATE__, adicione ?__server_only&__pretty_print à string de consulta.

Quando os usuários navegam para páginas subsequentes durante a renderização do lado do cliente, a página é imediatamente renderizada. Como a renderização pode acontecer enquanto getProps ainda está buscando dados, sempre escreva código condicional em seus componentes para que lidem com props indefinidos. Não se esqueça também de renderizar um componente de espaço reservado (como Skeleton do Chakra UI) enquanto os props ainda estão indefinidos.

No lado do cliente, o método render de seu componente é chamado antes e depois que o getProps é resolvido. Use a propriedade isLoading passada ao seu componente para decidir se a tela de carregamento será renderizada ou não.

Ao fazer várias solicitações HTTP no getProps, tente fazê-las em paralelo. Se isso não for possível, considere migrá-las para renderização no lado do cliente.

Se você quer apenas buscar dados no lado do cliente, use React Hooks no seu componente em vez de getProps.

Se você quiser executar o mesmo código em todas as rotas, defina uma função getProps que integre o componente App, um dos componentes especiais. Este tipo de componente é usado para adicionar funcionalidades compartilhadas entre várias rotas. Para saber mais sobre o componente App e outros componentes especiais, confira nosso guia sobre Componentes especiais.

O método shouldGetProps controla quando chamar o método getProps. Durante a renderização no lado do servidor, shouldGetProps é chamado apenas uma vez. Durante a renderização no lado do cliente, ele é chamado sempre que o método componentDidUpdate do React para o ciclo de vida é chamado.

Por padrão, getProps chama getProps sempre que há mudanças no valor de location.pathname. Você pode substituir o comportamento padrão de cada componente no array routes ao definir sua própria função chamada shouldGetProps como uma propriedade do componente. Você pode personalizar shouldGetProps para inspecionar a solicitação e só chamar getProps para determinadas solicitações.

Entenda o roteamento em mais detalhes revisando o código-fonte. Veja aqui alguns arquivos importantes para ver no Retail React App:

app/routes.jsx: demonstra a sintaxe no estilo Express para a correspondência de caminho, incluindo parâmetros da rota nomeada.
app/pages/product-detail/index.jsx: este componente de amostra para a PDP inclui funções personalizadas para getProps e shouldGetProps.
app/components/_app_config/index.jsx: inclui um extenso código de configuração e a função getProps para todo o aplicativo.

Conforme você lê a documentação do PWA Kit, não deixe de ver o guia de arquitetura O Retail React App.