Você sabe o que é bfcache no front-end? Aprendi isso no meu trabalho.

Como isso causou problema em uma entrega dentro da empresa

Para quem não sabe, sou desenvolvedor front-end no LuizaLabs, empresa do ecossistema da varejista Magazine Luiza e prove toda tecnologia que é utilizada nas lojas e no e-commerce da mesma.

Em uma entrega de atividade dentro de um projeto com Next.js, precisou ser criado um middleware para verificar a existência de um cookie do usuário, caso não existisse iria cair em uma condicional. O problema foi o middleware não ser disparado por causa do bfcache e simplesmente o cliente nunca caia dentro da condicional esperada por conta disto.

O que é bfcache?

Back/forward cache ou abreviado bfcache é um cache de avanço e retorno do browser. Quando você avança de uma página para outra, invés de destruir a página anterior quando sai dela, ela é salva como se tivesse criado um snapshot. Assim, sempre que você avançar uma página e voltar para ela, o browser não precisa refazer uma requisição GET para que seja renderizado novamente todo HTML.

Por isso pode já ter acontecido com você de voltar uma página e nem sequer aparecer algo no browser de que aquela URL está sendo carregada.

Com bfcache desativado

Uma requisição HTTP do tipo GET vai ser feita sempre que acessar a página

Com o bfcache ativado

O carregamento da página irá ser praticamente instantâneo pois a página irá estar cacheada no seu browser. Sem precisar fazer requisições.

Extra: solução para o bfcache no meu caso

No meu caso, usando Next.js eu tive que alterar o código excluindo o middleware criado e transformei em um useLayoutEffect. Assim eu faço a verificação deste cookie no componente onde preciso validar. Caso fosse preciso validar em todos componentes/rotas da aplicação, a melhor solução seria talvez criar um componente que encapsule todos os demais, contendo essa regra.

Fim

Minha ideia não é fazer um artigo gigante sobre o tema, mas ser útil para vocês. Acredito que agora isso pode te prevenir alguns cenários caso seja um desenvolvedor front-end e já optar pelo melhor caminho, ou se um dia acontecer com algum colega de equipe vocês sabem explicar o motivo. Mas tem muito mais ainda sobre esse cache caso queira pesquisar na internet.