Qual é a diferença entre um React Server Component e um Client Component, e como você decide qual usar?

Server Components rodam só no servidor, em tempo de request ou de build, e nunca enviam o código deles para o navegador; eles podem dar await direto numa consulta ao banco, mas não podem usar estado, efeitos ou event handlers. Client Components são marcados com a diretiva use client, hidratam no navegador e cuidam da interatividade. Comece pelo servidor por padrão e empurre a fronteira do cliente o mais para baixo possível na árvore.

A forma como eu penso nisso é que Server Components servem para buscar dados e renderizar markup, e Client Components servem para qualquer coisa que o usuário toca. Um Server Component roda no servidor, então eu posso dar await numa query direto dentro dele, e nada desse código nem dessas dependências vai parar no bundle do navegador. O custo é não ter useState, nem useEffect, nem onClick. No momento em que eu preciso de um desses, eu coloco use client no topo daquele arquivo, e tudo que ele importa entra no bundle do cliente também. Então meu padrão é servidor e eu empurro a fronteira o mais para baixo que dá. No meu último projeto eu tinha um dashboard onde só o dropdown de filtro e o tooltip do gráfico eram interativos, então esses viraram dois client components pequenos e o resto da página, incluindo um renderizador de markdown bem pesado, ficou no servidor. O que costuma pegar as pessoas é que as props que cruzam a fronteira precisam ser serializáveis, então você não consegue passar uma função para baixo. O padrão que eu uso no lugar disso é passar children renderizados no servidor para dentro de uma casca de cliente.