Transferindo o estado para o cliente
Evite requisições duplicadas usando a transferência de estado.
Transferindo o estado para o cliente é uma aula grátis de Angular Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Angular Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Angular Academy inclui 4 aulas no total.
O problema da busca dupla
Durante o SSR, o servidor busca dados para renderizar o HTML. Sem ajuda, o cliente busca os mesmos dados novamente após a hidratação, desperdiçando uma solicitação e podendo causar uma oscilação no conteúdo.
TransferState ao resgate
O TransferState do Angular serializa os dados do servidor no HTML; depois, o cliente os lê em vez de buscá-los novamente. Os dados viajam em uma tag de script na resposta.
Como os dados são transferidos
O estado armazenado no servidor é incorporado à página como JSON. Na inicialização, o cliente o desserializa, para que a primeira renderização use os mesmos dados usados pelo servidor.
<!-- embedded in SSR HTML -->
<script id="ng-state" type="application/json">{"users-1":[...]}</script>Usando makeStateKey
Crie uma chave tipada com makeStateKey e, em seguida, leia ou grave dados por meio do serviço TransferState.
import { makeStateKey, TransferState } from '@angular/core';
const USERS = makeStateKey<User[]>('users');
const state = inject(TransferState);
state.set(USERS, fetchedUsers);Padrão de ler e depois buscar
No servidor e no cliente: se a chave existir em TransferState, use-a; caso contrário, faça a busca. O servidor busca e armazena; o cliente encontra o valor armazenado e ignora a chamada.
const state = inject(TransferState);
if (state.hasKey(USERS)) {
this.users = state.get(USERS, []);
} else {
this.http.get<User[]>('/api/users')
.subscribe(u => { this.users = u; state.set(USERS, u); });
}HttpClient faz isso automaticamente
Chamar provideClientHydration(withHttpTransferCacheOptions()) (ativado por padrão com a hidratação) faz com que HttpClient armazene em cache as respostas GET do servidor no TransferState. Assim, solicitações idênticas do cliente são atendidas pelo cache sem chaves manuais.
provideClientHydration(withHttpTransferCacheOptions({ filter: (req) => req.method === 'GET' }))Evitando a oscilação
Como o cliente reutiliza os dados transferidos, a visualização hidratada corresponde exatamente ao HTML do servidor, impedindo o efeito em que o conteúdo desaparece e é carregado novamente.
Observação de segurança
O estado transferido é incorporado ao HTML público. Nunca coloque no TransferState segredos, tokens ou dados privados de usuários que você não exporia no código-fonte da página.
Manual versus automático
O cache de transferência HTTP cobre automaticamente a maioria das buscas de dados baseadas em GET. Use makeStateKey manualmente para dados computados não relacionados a HTTP que você queira transportar do servidor para o cliente.
Escopo do cache
O cache de transferência HTTP é específico de cada solicitação e é consumido uma vez no cliente. Depois que a primeira solicitação correspondente do cliente o lê, as chamadas seguintes vão para a rede normalmente.
Verificando se funciona
Inspecione a resposta SSR e procure o script de estado incorporado. Na aba de rede do navegador, você deverá ver que a busca duplicada é ignorada logo após a hidratação.
Verificação rápida
Verifique seus conhecimentos sobre transferência de estado.
Recapitulação
Você aprendeu a transportar dados do servidor para o cliente com TransferState e makeStateKey, usou o cache automático de transferência HTTP, evitou buscas duplicadas e oscilações e manteve os dados privados fora do estado incorporado publicamente.
Perguntas Frequentes
A aula “Transferindo o estado para o cliente” é grátis?
Sim — o texto completo de “Transferindo o estado para o cliente” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Angular Academy, atualize para CoddyKit PRO. O curso de Angular Academy inclui 4 aulas no total.
O que vou aprender em “Transferindo o estado para o cliente”?
Evite requisições duplicadas usando a transferência de estado. Você pratica Angular Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Angular Academy?
Nenhuma experiência prévia é necessária. Angular Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.
Quanto tempo leva a aula “Transferindo o estado para o cliente”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Angular Academy?
Sim. Cada aula de Angular Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Por que usar renderização no servidor
- Configurando o Angular SSR
- Rotas do servidor e modos de renderização
- Transferindo o estado para o cliente