Renderização
A arquitetura do PWA Kit se baseia no sistema de renderização do React, adicionando recursos que traem vantagens tanto para os usuários quanto para os desenvolvedores. Este guia de arquitetura aborda esses recursos do sistema de renderização do PWA Kit em detalhes e mostra como funcionam. Um destaque maior é dado às partes do PWA Kit React SDK e ao Retail React App, disponibilizado para melhorar ainda mais cada recurso.
Para criar uma primeira impressão favorável, a primeira página que um usuário solicita da sua loja (virtual) deve ser carregada o mais rápido possível. Porém, as solicitações de primeira página exige mais tempo de renderização do que as solicitações de página subsequentes. Cada componente na página deve ser renderizado, não somente os que precisam ser atualizados. Para o carregamento essencial da primeira página, usamos renderização no lado do servidor porque ela oferece uma ferramenta poderosa para otimizar o desempenho: o cache.
O cache da CDN do Managed Runtime pode armazenar uma versão previamente renderizada de uma página e apresentá-la ao usuário instantaneamente. Não há renderização mais rápida do que uma que já tenha sido feita!
Para saber como aumentar o desempenho por meio do cache, veja nosso guia Maximizar a taxa de acertos do cache.
O código principal para a renderização no lado do servidor é executado dentro do App Server. O App Server é um aplicativo Express que processa as solicitações HTTP de entrada e chama uma função denominada render em resposta. O App Server está definido em app/ssr.js.
A função render é importada do PWA Kit React SDK. As funções auxiliares (também do SDK) criam uma instância do Express e vincula a função render a ela como um método de roteamento do Express para todas as solicitações GET.
Depois do carregamento da primeira página, as tarefas de renderização são transferidas do lado do servidor para o lado do cliente através de um processo chamado hidratação. Durante a hidratação, seu React App começa a se executar no navegador do usuário. Os manipuladores de eventos entram em ação para responder à entrada do cliente. Os elementos da página são renderizados conforme necessário e de acordo com o instruído na entrada do usuário na renderização do lado do cliente. Essa renderização mais eficiente e orientada pelo usuário permite uma experiência mais fluida graças ao React.
A arquitetura do PWA Kit opera nos bastidores para tornar a transição da renderização do lado do servidor para a renderização no lado do cliente a mais descomplicada possível. Por exemplo, todos os seus componentes são pré-carregados com todos os props necessários, até mesmo props resultantes das solicitações da API. Durante a renderização do lado do servidor, esses props são serializados e incorporados na origem da página para que possam ser usados durante a hidratação.
Como o mesmo código é renderizado tanto no ambiente no lado do servidor quando no ambiente no lado do cliente, ele dever ser isomórfico. JavaScript isomórfico (também chamado de JavaScript universal) é código que não precisa de acesso direto a nenhuma construção de código que só se encontre disponível em um ambiente de execução ou outro. Quando uma construção não está disponível em ambos os ambientes, você deve adicionar código convencional para garantir que esteja disponível no ambiente atual.
A tabela a seguir relaciona algumas das construções mais comumente usadas que devem ser usadas com código condicional:
| Construção | Descrição | Disponibilidade |
|---|---|---|
window.location | URL atual do navegador | Lado do cliente somente |
req | Solicitações HTTP do Express | Lado do servidor somente |
res | Respostas HTTP do Express | Lado do servidor somente |
Para determinar se a renderização está acontecendo no lado do cliente ou do servidor, verifique a existência do objeto window. O exemplo a seguir usa essa técnica para renderizar um preço somente no lado do cliente:
Alguns conteúdos, como conteúdo personalizado ou que sofrem modificações frequentes, só devem ser renderizados no lado do cliente para que o desempenho seja o mais alto possível. Veja nosso guia Maximizar a taxa de acertos do cache para mais informações.
O sistema de renderização do PWA Kit fornece um ID de correlação (no formato UUID v4) em cada página. O ID de correlação pode ser usado para fazer a correspondência entre solicitações e respostas do PWA Kit com atividades em outros sistemas, como a B2C Commerce API.
No lado do servidor, o ID de correlação está definido com o valor do requestId no gateway de API da infraestrutura do Managed Runtime. No lado do cliente, um UUID é gerado com cada navegação de página usando o método randomUUID() da Web Crypto API integrada.
Para obter um ID de correlação em seu aplicativo do PWA Kit, importe o gancho useCorrelationId:
Você pode encaminhar o ID de correlação do PWA Kit para a B2C Commerce API pelo cabeçalho correlation-x. Na resposta, o ID de correlação encaminhado é retornado no cabeçalhox-correlation-id, combinado a um ID interno da API.
Para saber mais sobre o uso do ID de correlação com a B2C Commerce API, consulte Sobre a B2C Commerce API.
Entenda a renderização em mais detalhes revisando o código-fonte em app/ssr.js. Ele contém configurações importantes do servidor de aplicativos, como a duração padrão do cache das páginas.
Conforme você lê a documentação do PWA Kit, não deixe de ver o guia de arquitetura O Retail React App.