State naar de client overdragen
Vermijd dubbele aanvragen met state transfer
State naar de client overdragen is een gratis Angular Academy-les op CoddyKit. Dit is les 4 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Angular Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Angular Academy bevat in totaal 4 lessen.
Het probleem van dubbel ophalen
Tijdens SSR haalt de server gegevens op om HTML te renderen. Zonder aanvullende voorziening haalt de client dezelfde gegevens na hydratie opnieuw op. Dat verspilt een verzoek en kan een zichtbare inhoudswijziging veroorzaken.
TransferState als oplossing
De TransferState van Angular zet gegevens op de server om naar HTML en de client leest ze daarna in plaats van ze opnieuw op te halen. De gegevens reizen mee in een scripttag in het antwoord.
Hoe de gegevens worden doorgegeven
Status die op de server is opgeslagen, wordt als JSON in de pagina opgenomen. Bij het opstarten zet de client deze weer om, zodat de eerste weergave dezelfde gegevens gebruikt als de server.
<!-- embedded in SSR HTML -->
<script id="ng-state" type="application/json">{"users-1":[...]}</script>makeStateKey gebruiken
Maak een getypeerde sleutel met makeStateKey en lees of schrijf vervolgens via de service TransferState.
import { makeStateKey, TransferState } from '@angular/core';
const USERS = makeStateKey<User[]>('users');
const state = inject(TransferState);
state.set(USERS, fetchedUsers);Patroon: eerst lezen, daarna ophalen
Op zowel de server als de client: gebruik de waarde als de sleutel in TransferState bestaat; haal de gegevens anders op. De server haalt ze op en slaat ze op; de client vindt de opgeslagen waarde en slaat de aanroep over.
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 doet dit automatisch
Door provideClientHydration(withHttpTransferCacheOptions()) aan te roepen (standaard ingeschakeld met hydratie), slaat HttpClient serverantwoorden op GET-aanroepen op in TransferState. Identieke clientaanroepen worden dan vanuit de cache beantwoord zonder handmatige sleutels.
provideClientHydration(withHttpTransferCacheOptions({ filter: (req) => req.method === 'GET' }))De zichtbare wijziging voorkomen
Omdat de client de doorgegeven gegevens hergebruikt, komt de gehydrateerde weergave exact overeen met de HTML van de server. Zo voorkom je de flits waarbij inhoud verdwijnt en opnieuw wordt geladen.
Beveiligingsopmerking
Doorgestuurde status wordt opgenomen in de openbare HTML. Zet nooit geheimen, tokens of privégegevens per gebruiker die je niet in de paginabron zou tonen in TransferState.
Handmatig versus automatisch
De HTTP-overdrachtcache dekt de meeste gegevensophaling via GET automatisch af. Gebruik handmatig makeStateKey voor niet-HTTP-berekende status die je van de server naar de client wilt meenemen.
Cachebereik
De HTTP-overdrachtcache geldt per verzoek en wordt één keer op de client gebruikt. Nadat de eerste overeenkomende clientaanroep de cache heeft gelezen, gaan volgende aanroepen zoals gewoonlijk naar het netwerk.
Controleren of het werkt
Bekijk het SSR-antwoord en zoek naar het opgenomen statusscript. In het netwerkvenster van de browser hoort je te zien dat het dubbele ophalen direct na hydratie wordt overgeslagen.
Korte controle
Controleer je kennis van statusoverdracht.
Samenvatting
Je hebt geleerd hoe je gegevens met TransferState en makeStateKey van de server naar de client doorgeeft, de automatische HTTP-overdrachtcache gebruikt, dubbel ophalen en zichtbare inhoudswijzigingen voorkomt en privégegevens buiten de openbaar opgenomen status houdt.
Leer HTML met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 38
- Lessen
- 144
Veelgestelde vragen
Is de les “State naar de client overdragen” gratis?
Ja — je kunt hier op het web alle 3 lessen van het leerpad Angular Academy, waaronder “State naar de client overdragen”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus Angular Academy bevat in totaal 4 lessen.
Wat leer ik in “State naar de client overdragen”?
Vermijd dubbele aanvragen met state transfer Je oefent met Angular Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met Angular Academy te beginnen?
Ervaring vooraf is niet nodig. Angular Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 4 van 4.
Hoe lang duurt de les “State naar de client overdragen”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over Angular Academy?
Ja. Elke les over Angular Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- Waarom server-side rendering
- Angular SSR instellen
- Serverroutes en renderingmodi
- State naar de client overdragen