Gerador de Imagem Aleatória

Server Component

Client Component

Nesse exemplo, a imagem é buscada no servidor, pelo Server Component. Isso faz com que, quando a página é carregada, a imagem já esteja renderizada. Assim, evitamos o layout shift e entregamos mais experiência para o usuário!

Ainda assim, podemos ter interatividade ao usar um Client Component dentro desse Server Component. Então, o usuário ainda pode atualizar a imagem.