Solução da AEM para cache de personalização ESI com componentes renderizados do lado do cliente
O conteúdo personalizado pode não se comportar como esperado quando o Edge Side Includes (ESI) é usado com componentes renderizados no cliente, em vez de retornados como fragmentos de HTML renderizados pelo servidor. Alinhar a implementação com endpoints de fragmento renderizados pelo servidor para casos de uso de ESI ou usar uma abordagem do lado do cliente para componentes que permanecem renderizados pelo cliente pode ajudar a resolver o problema.
Descrição description
Ambiente
Adobe Experience Manager as a Cloud Service
Problema/Sintomas
- Depois de implementar a ESI para conteúdo personalizado nas páginas de publicação do Adobe Experience Manager as a Cloud Service, os usuários podem ver um comportamento inesperado de armazenamento em cache.
- Se um usuário anônimo aquecer o cache para uma página pública, um usuário autenticado poderá ver posteriormente a versão anônima de um componente personalizado, ou o inverso poderá ocorrer.
- Os componentes afetados podem incluir itens como cabeçalhos, áreas de subscrição ou outros elementos da página que devem variar de acordo com o contexto do usuário.
- Nenhuma mensagem de erro clara pode aparecer nos logs ou no navegador, mesmo que a saída personalizada não seja renderizada conforme esperado.
- Você pode confirmar o problema comparando a mesma página em sessões anônimas e autenticadas após o aquecimento do cache e verificando se o componente afetado é retornado como HTML renderizado pelo servidor na resposta de origem ou renderizado posteriormente pelo JavaScript do lado do cliente.
Resolução resolution
Tente as seguintes etapas para resolver o problema:
-
Verifique se o componente usado para personalização é retornado da origem como um fragmento do HTML renderizado pelo servidor ou renderizado posteriormente no navegador pelo JavaScript.
-
Se você precisar de ESI para montar conteúdo personalizado, exponha o componente relevante como um fragmento de HTML renderizado no servidor que pode ser incluído separadamente. Atualize a configuração ESI ou Inclusão dinâmica do Apache Sling para que ela faça referência ao endpoint do fragmento renderizado pelo servidor.
-
Se um componente precisar permanecer renderizado no lado do cliente, use um padrão de personalização do lado do cliente para esse componente, em vez de depender da ESI para montá-lo.
-
Valide a implementação atualizada.
- Teste a página em sessões anônimas e autenticadas.
- Confirme se cada sessão recebe a versão esperada do componente afetado após o aquecimento do cache.
- Verifique se a resposta de origem contém a saída de fragmento esperada para os componentes que devem ser manipulados por ESI.