Gerador de Imagem Aleatória

Client Component

Percebeu como a página carregou na mesma hora que você clicou para visitá-la, mas a imagem demorou para carregar? Se não percebeu, recarregue a página.

Isso ocorre porque no Client Component, tudo é renderizado no lado do cliente. Então, a busca da imagem pela API só ocorre no navegador e enquanto não temos a imagem, exibimos uma mensagem de loading. Como estamos no cliente, conseguimos ter interatividade e o usuário pode clicar no botão para gerar uma nova imagem.

Não é tão bom para a experiência do usuário quando a página carrega e os componentes ainda não estão prontos. Nesse exemplo daqui, isso é pouco problemático, mas imagine numa página com muitos elementos que dependem de dados externos... Outra coisa ruim para a experiência que ocorre aqui é o layout shift, quando todo o layout da página é empurrado após a imagem ser carregada.

Volte e veja o exemplo misturado para uma melhor versão da página.