Angular Academy · Leçon

Transférer l’état au client

Évitez les requêtes en double grâce au transfert d’état

Transférer l’état au client est une leçon Angular Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Angular Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Angular Academy comprend 4 leçons au total.

Le problème de la double récupération

Pendant le SSR, le serveur récupère des données pour générer le HTML. Sans mécanisme supplémentaire, le client récupère à nouveau les mêmes données après l’hydratation, ce qui gaspille une requête et peut provoquer un scintillement du contenu.

TransferState à la rescousse

Le TransferState d’Angular sérialise les données du serveur dans le HTML, puis le client les lit au lieu de les récupérer à nouveau. Les données sont transmises dans une balise script de la réponse.

Comment les données sont transmises

L’état enregistré sur le serveur est intégré à la page sous forme de JSON. Au démarrage, le client le désérialise afin que le premier rendu utilise les mêmes données que le serveur.

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

Utiliser makeStateKey

Créez une clé typée avec makeStateKey, puis lisez ou écrivez via le service TransferState.

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

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

Modèle : lire puis récupérer

Côté serveur comme côté client : si la clé existe dans TransferState, utilisez-la ; sinon, récupérez les données. Le serveur récupère et stocke les données ; le client trouve la valeur stockée et évite l’appel.

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 le fait automatiquement

L’appel à provideClientHydration(withHttpTransferCacheOptions()) (activé par défaut avec l’hydratation) permet à HttpClient de mettre en cache les réponses GET du serveur dans TransferState. Les requêtes identiques du client sont ainsi servies depuis le cache, sans clés manuelles.

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

Éviter le scintillement

Comme le client réutilise les données transférées, la vue hydratée correspond exactement au HTML du serveur, ce qui évite le flash pendant lequel le contenu disparaît puis se recharge.

Remarque de sécurité

L’état transféré est intégré au HTML public. Ne placez jamais dans TransferState des secrets, des jetons ou des données privées propres à un utilisateur que vous ne voudriez pas exposer dans le code source de la page.

Personnalisé ou automatique

Le cache de transfert HTTP couvre automatiquement la plupart des récupérations de données fondées sur GET. Utilisez manuellement makeStateKey pour l’état calculé ne provenant pas de HTTP que vous souhaitez transférer du serveur au client.

Portée du cache

Le cache de transfert HTTP est propre à chaque requête et est consommé une seule fois côté client. Après la lecture par la première requête client correspondante, les appels suivants utilisent normalement le réseau.

Vérifier le fonctionnement

Examinez la réponse SSR et recherchez le script d’état intégré. Dans l’onglet réseau du navigateur, vous devez constater que la récupération en double est ignorée juste après l’hydratation.

Vérification rapide

Vérifiez vos connaissances sur le transfert d’état.

Récapitulatif

Vous avez appris à transférer des données du serveur au client avec TransferState et makeStateKey, utilisé le cache de transfert HTTP automatique, évité les doubles récupérations et le scintillement, et empêché l’inclusion de données privées dans l’état intégré publiquement.

Questions Fréquemment Posées

La leçon « Transférer l’état au client » est-elle gratuite ?

Oui — le texte complet de « Transférer l’état au client » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Angular Academy, passe à CoddyKit PRO. Le cours Angular Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Transférer l’état au client » ?

Évitez les requêtes en double grâce au transfert d’état Tu pratiques Angular Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Angular Academy ?

Aucune expérience préalable n'est requise. Angular Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.

Combien de temps prend la leçon « Transférer l’état au client » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Angular Academy ?

Oui. Chaque leçon Angular Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

← Retour à Angular Academy