O navegador às vezes não solicita imagens do meu servidor Node

Question

Eu tenho um servidor Node em execução. Eu registro cada pedido que o servidor recebe. Quando eu digito a URL no meu navegador, vejo um comportamento errático.

Às vezes, todos os arquivos são carregados e a página é carregada bem. Outras vezes, apenas arquivos de texto são solicitados ( .js , .css etc) e os arquivos de mídia ( .jpeg , .png ) nunca são solicitados do meu servidor.

O que faria com que um navegador fizesse parte do tempo solicitando os arquivos de mídia, mas parte do tempo os ignoraria?

    

Answer 1

Isso não é um problema, isso é um comportamento esperado. Navegadores modernos são muito agressivos em como armazenam imagens em cache. E no caso do Chrome, ele reterá o conteúdo da página da Web - imagens e arquivos externos - até que o cache expire ou seja eliminado manualmente.

Cache de conteúdo no Chrome.

Para ver esse comportamento em ação, carregue sua página no Chrome e siga os registros do seu aplicativo do Node. Agora, depois que a página é carregada, abra-se no inspetor da web no Chrome, clicando com o botão direito do mouse e clicando em "Inspecionar", e navegando até a guia "Rede". Veja a imagem abaixo para referência. Uma das opções na guia "Rede" é rotulada como "Desativar cache".

Se você marcar essa caixa e, em seguida, recarregar a página, os logs agora deverão mostrar todos os elementos da página que estão sendo recarregados. Essa opção no inspetor é uma ferramenta do desenvolvedor da Web para casos em que o armazenamento em cache atrapalha mais do que ajuda. FWIW, uma opção semelhante existe no Safari.

CabeçalhosdecontroledecachedoservidordaWeb.

OutraopçãoéverquaiscabeçalhosseuservidordaWebestáenviandousandoaopçãocurl-Inalinhadecomando.BastaobteroURLdeumaimagemouelementodasuapáginadaWebeexibiroscabeçalhospormeiodaopçãocurl-Inalinhadecomando.

Porexemplo,digamosquevocêtenhaumaimagemchamadatest.pngemumservidorchamadoexample.com.VocêpodeexecutaressecomandoparavisualizaroscabeçalhosqueoservidordaWebenviaquandoprocessaumasolicitaçãoparatest.png:

curl-Ihttp://example.com/test.png

Ou,paraveralgunscabeçalhosreais,vamosverificaroscabeçalhosenviadosaoacessarologotipodoGoogleusandoestemétodo:

curl-Icurl-Ihttps://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png

Oscabeçalhosretornadosqueestouvendosão:

HTTP/1.1200OKAccept-Ranges:bytesContent-Type:image/pngContent-Length:13504Date:Mon,01Jan201802:59:24GMTExpires:Mon,01Jan201802:59:24GMTCache-Control:private,max-age=31536000Last-Modified:Thu,08Dec201601:00:57GMTX-Content-Type-Options:nosniffServer:sffeX-XSS-Protection:1;mode=blockAlt-Svc:hq=":443"; ma=2592000; quic=51303431; quic=51303339; quic=51303338; quic=51303337; quic=51303335,quic=":443"; ma=2592000; v="41,39,38,37,35"

Tenha em atenção que Cache-Control header e é max-age value de 31536000. Sabe para que 31536000 se traduz? Isso é um número em segundos e isso é o equivalente a 1 ano. Então, o que os servidores do Google estão dizendo é que o navegador deve armazenar essa imagem por um ano antes de verificar uma nova.

Meu palpite é que qualquer aplicação do Node que você esteja executando também deve ter algum tipo de configuração Cache-Control semelhante e se você quiser ver cargas mais frequentes de conteúdo, você deve diminuir essa configuração de Cache-Control . Mas normalmente isso deve ser feito apenas para fins de desenvolvimento e teste; para um servidor de produção aproveitando o cache do navegador é uma ótima coisa. E obter o equilíbrio correto para as necessidades da aplicação é uma ciência em si.