Software e IA para executivos · Capítulo 7 de 41 · 6 min
Decidir o que roda no servidor e o que vai ao celular
Dois critérios bastam para ler uma proposta de interface: quanto o time reaproveita de peça pronta e quanto código vai para o celular do cliente.
Este capítulo faz parte do curso gratuito Software e IA para executivos.
Aprovar uma proposta de interface sem perguntar onde cada tela é montada custa venda perdida no celular e patch de segurança adiado. Frontend é a parte do produto que o cliente toca: a tela, o formulário, o botão de comprar. Componente é a peça dessa tela escrita uma vez e reaproveitada em muitas telas.
Componentes reduzem trabalho repetido, mas o ganho depende do desenho e da necessidade do produto, não de um multiplicador fixo de produtividade. A pergunta que decide o orçamento é outra: quanto do código dessas peças viaja para o aparelho de quem compra.
No Next.js, componentes de servidor buscam dado e produzem HTML sem enviar o próprio código ao navegador. Componentes cliente ganham interação, como estado que muda e clique que responde. A diretiva use client inclui o arquivo marcado e as importações dele na fronteira do cliente.
Marcar um arquivo não transforma toda a árvore visual em código do navegador. Um componente de servidor pode ser recebido como conteúdo por um componente cliente, sem que o código dele atravesse a fronteira.
É por isso que useState quebra num componente de servidor. Ele executa uma vez, produz HTML e termina. Não existe ali ciclo de nova renderização para o estado disparar, nem clique para escutar.
Marcar a página inteira anula o ganho. O conteúdo que sairia pronto do servidor vira trabalho do aparelho do cliente, e esse aparelho é o elo mais lento da corrente. Página pesada em rede móvel perde venda antes de abrir; código que roda no servidor não pesa no celular de ninguém.
A versão do framework decide risco, e por isso entra na conversa com o fornecedor. O Next.js 16.3, de 03/08/2026, é a linha que ainda recebe correção de segurança.
O patch de 25/08/2026 fechou duas falhas críticas de execução remota de código sem autenticação. Uma delas veio de dependência de terceiro, dentro do pacote de imagens; a outra atinge servidor Windows. Atualizar biblioteca de terceiro é decisão de risco, não detalhe de manutenção.
Se a figura ultrapassar a área visível, deslize para os lados. Pelo teclado, foque a figura e use as setas.
Na revisão da proposta, a pergunta certa é quais telas precisam mesmo de interação e quais são conteúdo que o servidor entrega pronto. Quando o fornecedor responde que quase tudo é interativo, você paga para transformar catálogo em aplicativo, com a lentidão que vem junto.
Antes de aprovar, peça o inventário das peças reaproveitadas, tirado do próprio repositório, e o número de arquivos marcados com use client, com o motivo dos três maiores. Abra a página mais importante no celular, com dados móveis, e conte os segundos até o texto principal aparecer; acima de três, cobre explicação por escrito.
Seu caderno neste capítulo
Abrir o caderno completoSelecione um trecho do capítulo para destacar ou anotar. Nos vídeos e áudios, use Anotar este momento. No teclado, selecione com Shift e as setas e use Alt+Shift+D para destacar ou Alt+Shift+N para anotar.
Salvo neste navegador. Entre na sua conta para levar o caderno a outros aparelhos.
Entre na sua conta para compartilhar o que aprendeu e convidar alguém para estudar com você.
Conexões deste capítulo
Veja o que estudar antes e para onde seguir depois, explore os conceitos e compare abordagens em outros cursos. Sugestões marcadas como “sugerido pelo grafo” vêm dos assuntos em comum, não do índice do curso.
Conceitos deste capítulo
O mesmo assunto em outros cursos
- Frontends com VibecodingEscolher a stack e projetar suas dependênciasExaminar conexões de Escolher a stack e projetar suas dependências
- Node.js: JavaScript no ServidorIntrodução ao Next.jsExaminar conexões de Introdução ao Next.js
- API Design: REST, GraphQL e Boas PráticasPerformance e CachingExaminar conexões de Performance e Caching
Voltar ao capítulo anterior: Participar do planejamento para revisar menos no fim
Leve uma ideia para a prática
Escolha uma atividade no painel e volte a este curso quando quiser.
Atividades e evolução ficam reunidas no painel da sua conta.
Capítulos vizinhos em Software e IA para executivos
- 05Como ler um número sobre produtividade com IA
- 06Participar do planejamento para revisar menos no fim
- 07Decidir o que roda no servidor e o que vai ao celular
- 08Onde a página fica pronta, e o que cada opção custa
- 09Medir a velocidade que o cliente sente no celular dele