Buscar dados no servidor

02

Prepare-se — O que você vai construir

• Explicar I/O assíncrono sem depender de uma receita decorada.
• Relacionar fetch não cacheado por padrão ao contrato e ao fluxo observável.
• Aplicar payload validado em um caso real e em um limite.

Se precisar de apoio, consulte a capítulo anterior e volte a estas tarefas. Não há obrigação de seguir um prazo.

03

Entenda — Modelo mental e estrutura

1. Comece pelo modelo mental

Server Components podem usar fetch, ORM ou banco. No modelo atual, fetch não fica em cache por padrão; status e payload continuam precisando de verificação. Em I/O assíncrono, a sintaxe é apenas a superfície de um contrato. Relacione essa ideia a fetch não cacheado por padrão e payload validado antes de editar o exemplo. Em software real, uma linha pode compilar e ainda representar uma suposição incorreta sobre dados, tempo, ambiente ou responsabilidade. Por isso, descreva a entrada, a transformação e o resultado observável com palavras simples.

Descreva primeiro o contrato de I/O assíncrono e como ele se relaciona com fetch não cacheado por padrão. Implemente a menor versão que revele o mecanismo e mantenha o caminho principal fácil de seguir. Se a solução depende de estado implícito, conversão silenciosa ou ordem acidental, registre essa dependência e procure torná-la explícita. O objetivo não é memorizar uma receita: é reconhecer quando o conceito se aplica, escolher uma abstração proporcional e conseguir explicar o custo dessa escolha.

2. Leia o código como uma sequência de decisões

export default async function Page() {
  const response = await fetch('https://api.example.test/produtos');
  if (!response.ok) throw new Error('HTTP ' + response.status);
  const produtos = parseProdutos(await response.json());
  return <Lista produtos={produtos} />;
}

Leia o exemplo de fora para dentro. Primeiro localize os dados e o contrato público; depois acompanhe as transformações; por fim, identifique efeitos, falhas e saídas. O trecho deixa I/O assíncrono visível no código e permite evoluir payload validado sem esconder o fluxo principal. Digite o trecho em vez de apenas copiá-lo. Troque nomes e valores, faça uma hipótese e execute novamente. Essa comparação mostra o que pertence à regra da linguagem ou do framework e o que existe apenas por causa do exemplo.

Observe também o que o código não garante. Next.js organiza renderização, rotas, dados e entrega; React descreve a interface; autorização e integridade permanecem responsabilidades explícitas do código de servidor. Um tipo estático não valida automaticamente uma resposta externa; um componente não substitui semântica; uma abstração não corrige um contrato mal definido. Comentários úteis registram intenção, limite ou motivo. Comentários que repetem a sintaxe não compensam nomes vagos ou responsabilidades misturadas.

3. Converta observação em critério verificável

Uma solução forte torna I/O assíncrono legível, verifica fetch não cacheado por padrão com evidência e registra os limites de payload validado. Um bom critério descreve contexto, ação e resultado. Em vez de “funcionou”, registre qual entrada foi usada, qual saída era esperada e como uma falha deveria aparecer. Inspecione valores, mensagens e transições no Next.js 16.3.4, React 19.2, TypeScript e navegador. Quando houver interface, percorra também com teclado, zoom e tecnologia assistiva; quando houver servidor ou compilação, confira logs, tipos e limites de confiança.

A armadilha central é: transportar uma convenção antiga ou marcar tudo como cliente para contornar o contrato de I/O assíncrono.. Corrija a causa antes de empilhar exceções. Reduza o caso, reproduza o problema, altere uma variável por vez e repita o teste. Ao terminar, você deve conseguir dizer por que a solução funciona, quais suposições preserva, onde pode falhar e que evidência outra pessoa pode usar para revisar a entrega.

05

Construa — Teste cada decisão no ambiente

Crie um laboratório pequeno e executável em Next.js 16.3.4, React 19.2, TypeScript e navegador. Reproduza o exemplo, explique cada etapa e crie uma segunda versão que aplique payload validado sem perder I/O assíncrono. Primeiro implemente o caminho principal sem abstrações prematuras. Depois use o depurador, o verificador de tipos, os testes ou as ferramentas de inspeção adequadas para confirmar o fluxo. Por último, force três situações adversas: entrada vazia, volume maior que o esperado e falha controlada em Next.js 16.3.4, React 19.2, TypeScript e navegador.

Não corrija todos os sintomas de uma vez. Para cada falha, anote hipótese, evidência e menor mudança. Rode novamente os cenários já aprovados para detectar regressões. Quando houver mais de uma solução possível, escolha pela clareza do contrato, pela facilidade de teste e pelo custo de mudança. Uma captura ou um log ajuda a documentar, mas código, critérios e testes reproduzíveis continuam sendo a fonte principal da entrega.

06

Pratique — Seis decisões de implementação

Resolva primeiro pelo raciocínio. Consultar o capítulo e testar hipóteses no navegador faz parte do processo; depois, releia as justificativas.

08

Projete — Implemente, compare e refine

Entrega incremental: um laboratório Next.js sobre buscar dados no servidor com rota executável, tipos gerados e estados verificáveis. Comece descrevendo, em até cinco linhas, quem usa o recurso e qual tarefa precisa concluir. Separe domínio, entrada e apresentação conforme a escala do problema. Inclua um caso real, um limite e uma falha recuperável. Ao final, escreva uma nota técnica explicando onde aplicou I/O assíncrono, como verificou fetch não cacheado por padrão e qual limite encontrou em payload validado.

export default async function Page() {
  const response = await fetch('https://api.example.test/produtos');
  if (!response.ok) throw new Error('HTTP ' + response.status);
  const produtos = parseProdutos(await response.json());
  return <Lista produtos={produtos} />;
}

Critérios para revisar

• O contrato de I/O assíncrono está explícito, fetch não cacheado por padrão foi exercitado e a falha de payload validado produz um estado compreensível.
• Manter nomes, estados, foco e mensagens compreensíveis quando I/O assíncrono chegar à interface.
• O código evidencia I/O assíncrono e fetch não cacheado por padrão sem estado acidental.
• A nota técnica registra o teste de entrada vazia, volume maior que o esperado e falha controlada em Next.js 16.3.4, React 19.2, TypeScript e navegador.

09

Retome — Organize sua revisão

• Explique com suas palavras a relação entre I/O assíncrono e fetch não cacheado por padrão.
• Reabra o laboratório sem consultar o texto e reconstrua a decisão ligada a payload validado.
• Aplique o teste “Executar o caminho principal e os limites de fetch não cacheado por padrão, observando o resultado de payload validado.” ao projeto acumulado e registre uma melhoria.

Feche a explicação, tente lembrar um exemplo e depois confira. Retome uma dificuldade no próximo encontro e alguns dias depois; ajuste o intervalo ao que ainda precisa praticar.

Use exemplos concretos na autoavaliação: “consigo explicar com consulta” ou “quero praticar novamente”. Marcar como lida não representa uma certificação.