Angular Academy · Lektion

Zustand an den Client übertragen

Doppelte Anfragen mit State Transfer vermeiden

Lektion 4 von 413 Schritte

Zustand an den Client übertragen ist eine kostenlose Angular Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Angular Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Angular Academy-Kurs umfasst insgesamt 4 Lektionen.

Das Problem doppelter Abrufe

Während des SSR ruft der Server Daten ab, um HTML zu rendern. Ohne entsprechende Maßnahmen ruft der Client dieselben Daten nach der Hydration erneut ab. Das verschwendet eine Anfrage und kann zu einem kurzen Inhaltsflackern führen.

TransferState als Lösung

Angular serialisiert Daten auf dem Server mit TransferState in das HTML. Anschließend liest der Client diese Daten aus, statt sie erneut abzurufen. Die Daten werden in einem Script-Tag der Antwort übertragen.

So werden die Daten übertragen

Auf dem Server gespeicherter State wird als JSON in die Seite eingebettet. Beim Start des Clients wird er deserialisiert, sodass das erste Rendern dieselben Daten verwendet wie der Server.

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

makeStateKey verwenden

Erstellen Sie mit makeStateKey einen typisierten Schlüssel und lesen oder schreiben Sie anschließend über den TransferState-Service.

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

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

Muster: erst lesen, dann abrufen

Auf Server und Client gilt: Wenn der Schlüssel in TransferState vorhanden ist, verwenden Sie seinen Wert, andernfalls führen Sie den Abruf aus. Der Server ruft die Daten ab und speichert sie; der Client findet den gespeicherten Wert und überspringt den Aufruf.

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 erledigt das automatisch

Der Aufruf von provideClientHydration(withHttpTransferCacheOptions()) (bei aktivierter Hydration standardmäßig eingeschaltet) veranlasst HttpClient, serverseitige GET-Antworten in TransferState zwischenzuspeichern. Dadurch werden identische Client-Anfragen ohne manuelle Schlüssel aus dem Cache bedient.

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

Flackern vermeiden

Da der Client die übertragenen Daten wiederverwendet, stimmt die hydratisierte Ansicht exakt mit dem Server-HTML überein. So wird das kurze Aufblitzen verhindert, bei dem Inhalte verschwinden und neu geladen werden.

Sicherheitshinweis

Der übertragene State wird in das öffentliche HTML eingebettet. Legen Sie niemals Geheimnisse, Tokens oder private Benutzerdaten in TransferState ab, die Sie nicht im Quelltext der Seite offenlegen würden.

Manuell oder automatisch

Der HTTP-Transfer-Cache deckt die meisten datenabrufenden GET-Anfragen automatisch ab. Verwenden Sie makeStateKey manuell für Nicht-HTTP-Zustände, die Sie vom Server zum Client übertragen möchten.

Gültigkeitsbereich des Caches

Der HTTP-Transfer-Cache gilt pro Anfrage und wird auf dem Client einmalig verwendet. Nachdem die erste passende Client-Anfrage ihn gelesen hat, gehen nachfolgende Aufrufe wie gewohnt über das Netzwerk.

Überprüfen, ob es funktioniert

Untersuchen Sie die SSR-Antwort und suchen Sie nach dem eingebetteten State-Script. Im Netzwerk-Tab des Browsers sollte direkt nach der Hydration zu sehen sein, dass der doppelte Abruf übersprungen wird.

Schnelltest

Überprüfen Sie Ihr Wissen über die Zustandsübertragung.

Beantworte es in der interaktiven Lektion

Zusammenfassung

Sie haben gelernt, Daten mit TransferState und makeStateKey vom Server zum Client zu übertragen, den automatischen HTTP-Transfer-Cache zu verwenden, doppelte Abrufe und Flackern zu vermeiden und private Daten aus dem öffentlich eingebetteten State herauszuhalten.

Kostenlos starten

Lerne HTML mit einem KI-Tutor — kostenlos

Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.

Kurse: 38
Lektionen: 144

Kostenlos lernen Den vollständigen Kurs ansehen

Häufig gestellte Fragen

Ist die Lektion „Zustand an den Client übertragen“ kostenlos?

Ja — der vollständige Text von „Zustand an den Client übertragen“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Angular Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Angular Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Zustand an den Client übertragen“?

Doppelte Anfragen mit State Transfer vermeiden Du übst Angular Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Angular Academy zu starten?

Keine Vorkenntnisse erforderlich. Angular Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.

Wie lange dauert die Lektion „Zustand an den Client übertragen“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Angular Academy-Lektion Code schreiben und ausführen?

Ja. Jede Angular Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu Angular Academy