Angular Academy · Lezione

Trasferire lo stato al client

Evitare richieste duplicate con il trasferimento dello stato

Trasferire lo stato al client è una lezione Angular Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Angular Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Angular Academy include 4 lezioni in totale.

Il problema del doppio recupero

Durante SSR, il server recupera i dati per renderizzare l'HTML. Senza un supporto specifico, il client recupera nuovamente gli stessi dati dopo l'idratazione, sprecando una richiesta e rischiando uno sfarfallio del contenuto.

TransferState in soccorso

TransferState di Angular serializza i dati sul server e li inserisce nell'HTML, quindi il client li legge invece di recuperarli nuovamente. I dati viaggiano in un tag script della risposta.

Come vengono trasferiti i dati

Lo stato memorizzato dal server viene incorporato nella pagina come JSON. All'avvio, il client lo deserializza, così il primo rendering utilizza gli stessi dati usati dal server.

<!-- embedded in SSR HTML -->
<script id="ng-state" type="application/json">{"users-1":[...]}</script>

Utilizzare makeStateKey

Crei una chiave tipizzata con makeStateKey, quindi legga o scriva tramite il servizio TransferState.

import { makeStateKey, TransferState } from '@angular/core';

const USERS = makeStateKey<User[]>('users');
const state = inject(TransferState);
state.set(USERS, fetchedUsers);

Schema: prima leggere, poi recuperare

Sia sul server sia sul client: se la chiave esiste in TransferState, la utilizzi; altrimenti recuperi i dati. Il server recupera e memorizza i dati; il client trova il valore memorizzato e salta la chiamata.

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 lo fa automaticamente

La chiamata a provideClientHydration(withHttpTransferCacheOptions()) (abilitata per impostazione predefinita con l'idratazione) fa sì che HttpClient memorizzi in TransferState le risposte GET del server, così le richieste identiche del client vengono servite dalla cache senza chiavi manuali.

provideClientHydration(withHttpTransferCacheOptions({ filter: (req) => req.method === 'GET' }))

Evitare lo sfarfallio

Poiché il client riutilizza i dati trasferiti, la vista idratata corrisponde esattamente all'HTML del server, evitando il lampeggiamento in cui il contenuto scompare e viene ricaricato.

Nota sulla sicurezza

Lo stato trasferito viene incorporato nell'HTML pubblico. Non inserisca mai in TransferState segreti, token o dati privati per utente che non vorrebbe esporre nel codice sorgente della pagina.

Personalizzato o automatico

La cache di trasferimento HTTP gestisce automaticamente la maggior parte del recupero dei dati basato su GET. Utilizzi makeStateKey manualmente per lo stato calcolato non HTTP che desidera trasferire dal server al client.

Ambito della cache

La cache di trasferimento HTTP è valida per singola richiesta e viene consumata una sola volta dal client. Dopo che la prima richiesta client corrispondente l'ha letta, le chiamate successive vengono inviate normalmente alla rete.

Verificare il funzionamento

Analizzi la risposta SSR e cerchi lo script con lo stato incorporato. Nella scheda Rete del browser dovrebbe vedere che il recupero duplicato viene saltato subito dopo l'idratazione.

Controllo rapido

Verifichi le Sue conoscenze sul trasferimento dello stato.

Riepilogo

Ha imparato a trasferire i dati dal server al client con TransferState e makeStateKey, ha utilizzato la cache di trasferimento HTTP automatica, ha evitato doppi recuperi e sfarfallii e ha mantenuto i dati privati fuori dallo stato incorporato pubblicamente.

Domande Frequenti

La lezione «Trasferire lo stato al client» è gratuita?

Sì — il testo completo di «Trasferire lo stato al client» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Angular Academy, passa a CoddyKit PRO. Il corso Angular Academy include 4 lezioni in totale.

Cosa imparerò in «Trasferire lo stato al client»?

Evitare richieste duplicate con il trasferimento dello stato Eserciti Angular Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Angular Academy?

Non è richiesta alcuna esperienza precedente. Angular Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.

Quanto tempo richiede la lezione «Trasferire lo stato al client»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Angular Academy?

Sì. Ogni lezione Angular Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a Angular Academy