Use os exemplos como laboratório: leia o código, preveja o resultado e teste no ambiente de prática. Para guardar uma ideia, selecione qualquer trecho.
CAPÍTULO 14 DE 48
Suspense próximo ao dado lento
Neste capítulo, você transforma boundary granular em uma decisão de engenharia full-stack que pode ser explicada, testada e revisada. Você sairá com uma implementação pequena, evidências de teste e um critério reutilizável nos projetos seguintes.
Escrita, marcações e comentários ficam só neste navegador, separados por capítulo e sem sincronização com a conta. Evite informações sensíveis; limpar os dados do navegador pode remover seus registros.
As seis questões têm correção comentada. Laboratório e projeto são práticas livres, sem execução automática de código.
Prepare-se — O que você vai construir
- Explicar boundary granular sem depender de uma receita decorada.
- Relacionar shell estático ao contrato e ao fluxo observável.
- Aplicar conteúdo transmitido 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.
Entenda — Modelo mental e estrutura
1. Comece pelo modelo mental
Uma boundary próxima ao acesso não cacheado mantém mais interface no shell e transmite apenas a região lenta. O fallback deve ocupar um lugar coerente e não mudar foco inesperadamente. Em boundary granular, a sintaxe é apenas a superfície de um contrato. Relacione essa ideia a shell estático e conteúdo transmitido 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 boundary granular e como ele se relaciona com shell estático. 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
<main><h1>Relatório</h1><Suspense fallback={<GraficoSkeleton />}><Grafico /></Suspense></main>
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 boundary granular visível no código e permite evoluir conteúdo transmitido 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 boundary granular legível, verifica shell estático com evidência e registra os limites de conteúdo transmitido. 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 boundary granular.. 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.
Analise — Código em contexto
Uma revisão começa pela intenção. Para “Suspense próximo ao dado lento”, o requisito é: a solução deve demonstrar boundary granular, preservar shell estático e reagir de forma previsível quando conteúdo transmitido variar. Analise a variação abaixo e preveja o resultado antes de executá-la.
async function Grafico() { const dados = await getDados(); return <Chart data={dados} />; }
A variação isola shell estático. Acompanhe dados, controle e efeitos antes de decidir se o resultado respeita o contrato. Faça quatro passagens. Na primeira, identifique entradas e saídas. Na segunda, siga o fluxo de controle e as transformações. Na terceira, procure valores ausentes, concorrência, mutação e dependências do ambiente. Na quarta, avalie a experiência de erro e a capacidade de testar o trecho isoladamente.
Compare a variação com o exemplo principal. Escolha uma mudança e formule uma hipótese completa: “se eu alterar isto, espero aquilo, porque…”. Execute, observe e registre. A resposta importante não é apenas qual trecho passa no caso feliz, mas qual comunica melhor o contrato, reduz acoplamento e permanece compreensível para quem precisar manter, depurar ou integrar o módulo depois.
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 conteúdo transmitido sem perder boundary granular. 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.
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.
Confira — Gabarito comentado
Abrir gabarito e explicações completas
E1 — B. A implementação começa pelo contrato observável. Descreva primeiro o contrato de boundary granular e como ele se relaciona com shell estático. Assim, a sintaxe passa a servir a uma decisão que pode ser revisada.
E2 — A. A evidência precisa exercitar o mecanismo estudado. Executar o caminho principal e os limites de shell estático, observando o resultado de conteúdo transmitido. O caso feliz isolado não revela limites nem recuperação.
E3 — C. A armadilha é transportar uma convenção antiga ou marcar tudo como cliente para contornar o contrato de boundary granular. Ela oculta o mecanismo e amplia o risco de regressão quando dados ou requisitos mudam.
E4 — B. A alternativa correta inclui pessoas e integrações no contrato: Manter nomes, estados, foco e mensagens compreensíveis quando boundary granular chegar à interface. Estados e limites precisam permanecer compreensíveis.
E5 — A. A sequência baseada em evidência relaciona causa e efeito. Mudanças amplas escondem o mecanismo e dificultam perceber regressões.
E6 — C. Pronto para revisão significa atender critérios observáveis. O contrato de boundary granular está explícito, shell estático foi exercitado e a falha de conteúdo transmitido produz um estado compreensível. Outra pessoa ainda pode encontrar melhorias, mas consegue reproduzir a evidência.
Projete — Implemente, compare e refine
Entrega incremental: um laboratório Next.js sobre suspense próximo ao dado lento 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 boundary granular, como verificou shell estático e qual limite encontrou em conteúdo transmitido.
Consultar um modelo possível
<main><h1>Relatório</h1><Suspense fallback={<GraficoSkeleton />}><Grafico /></Suspense></main>
O modelo ilustra uma possibilidade. Use os critérios para revisar suas próprias ideias, não para copiar as mesmas frases.
Critérios para revisar
- O contrato de boundary granular está explícito, shell estático foi exercitado e a falha de conteúdo transmitido produz um estado compreensível.
- Manter nomes, estados, foco e mensagens compreensíveis quando boundary granular chegar à interface.
- O código evidencia boundary granular e shell estático 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.
Até 12.000 caracteres em cada versão. Produção livre, sem correção automática.
Retome — Organize sua revisão
- Explique com suas palavras a relação entre boundary granular e shell estático.
- Reabra o laboratório sem consultar o texto e reconstrua a decisão ligada a conteúdo transmitido.
- Aplique o teste “Executar o caminho principal e os limites de shell estático, observando o resultado de conteúdo transmitido.” 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.
SEU PROGRESSO NO CAPÍTULO 14
Um capítulo, no seu ritmo.
— exercícios respondidos
Carregando progresso…Você decide quando marcar este capítulo como lido. Isso não altera seus exercícios nem suas marcações.
Progresso salvo só neste navegador, sem sincronização com sua conta.