Fronteira do 'use client' no Next.js — O Padrão de Composição

Colocar 'use client' no topo da página do Next.js é a forma mais rápida de anular as vantagens dos Server Components.

Quando um componente pai vira Client Component por importação direta, tudo o que ele importa desce junto para o bundle de JavaScript do navegador. O padrão para manter a interatividade sem perder performance é a composição: criar o componente cliente apenas onde o estado existe e passar os Server Components como children ou props.

O cliente cuida do clique e da animação. O servidor continua entregando o HTML pronto sem inflar o bundle.