Przekazywanie stanu do klienta
Unikać zduplikowanych żądań dzięki przekazywaniu stanu
Przekazywanie stanu do klienta to bezpłatna lekcja Angular Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Angular Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Angular Academy zawiera 4 lekcji w sumie.
Problem podwójnego pobierania
Podczas SSR serwer pobiera dane, aby wyrenderować kod HTML. Bez dodatkowej obsługi klient po hydratacji pobierze te same dane ponownie, marnując żądanie i ryzykując migotanie treści.
TransferState na ratunek
TransferState serializuje dane na serwerze do kodu HTML, a następnie klient odczytuje je zamiast pobierać je ponownie. Dane są przesyłane w znaczniku skryptu w odpowiedzi.
Jak dane są przesyłane
Stan zapisany na serwerze jest osadzany na stronie w formacie JSON. Podczas uruchamiania klient deserializuje te dane, dzięki czemu pierwsze renderowanie korzysta z tych samych danych co serwer.
<!-- embedded in SSR HTML -->
<script id="ng-state" type="application/json">{"users-1":[...]}</script>Używanie makeStateKey
Utwórz klucz z określonym typem za pomocą makeStateKey, a następnie odczytuj dane lub zapisuj je za pośrednictwem usługi TransferState.
import { makeStateKey, TransferState } from '@angular/core';
const USERS = makeStateKey<User[]>('users');
const state = inject(TransferState);
state.set(USERS, fetchedUsers);Wzorzec „odczytaj, potem pobierz”
Po stronie serwera i klienta: jeśli klucz istnieje w TransferState, użyj jego wartości; w przeciwnym razie pobierz dane. Serwer pobiera dane i je zapisuje, a klient odnajduje zapisaną wartość i pomija wywołanie.
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 robi to automatycznie
Wywołanie provideClientHydration(withHttpTransferCacheOptions()) (domyślnie włączone wraz z hydratacją) powoduje, że HttpClient zapisuje odpowiedzi serwera na żądania GET w TransferState. Dzięki temu identyczne żądania klienta są obsługiwane z pamięci podręcznej bez ręcznego tworzenia kluczy.
provideClientHydration(withHttpTransferCacheOptions({ filter: (req) => req.method === 'GET' }))Zapobieganie migotaniu
Ponieważ klient ponownie wykorzystuje przesłane dane, widok po hydratacji dokładnie odpowiada kodowi HTML serwera, co zapobiega znikaniu i ponownemu ładowaniu treści.
Uwaga dotycząca bezpieczeństwa
Przesłany stan jest osadzany w publicznym kodzie HTML. Nie należy umieszczać w TransferState sekretów, tokenów ani prywatnych danych użytkownika, których nie można ujawniać w źródle strony.
Ręcznie czy automatycznie
Pamięć podręczna transferu HTTP automatycznie obsługuje większość pobierania danych za pomocą GET. Ręcznie używaj makeStateKey dla obliczanego stanu niezwiązanego z HTTP, który chcesz przenieść z serwera do klienta.
Zakres pamięci podręcznej
Pamięć podręczna transferu HTTP obowiązuje w ramach jednego żądania i jest używana tylko raz po stronie klienta. Po odczytaniu jej przez pierwsze pasujące żądanie klienta kolejne wywołania są standardowo kierowane do sieci.
Weryfikowanie działania
Sprawdź odpowiedź SSR i poszukaj osadzonego skryptu stanu. W karcie sieciowej przeglądarki powinno być widać, że bezpośrednio po hydratacji ponowne pobieranie zostało pominięte.
Szybki test
Sprawdź swoją wiedzę o przesyłaniu stanu.
Podsumowanie
Dowiedziałeś się, jak przenosić dane z serwera do klienta za pomocą TransferState i makeStateKey, korzystać z automatycznej pamięci podręcznej transferu HTTP, unikać podwójnego pobierania i migotania oraz nie umieszczać prywatnych danych w publicznie osadzanym stanie.
Często zadawane pytania
Czy lekcja „Przekazywanie stanu do klienta” jest bezpłatna?
Tak — pełny tekst „Przekazywanie stanu do klienta” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Angular Academy, przejdź na CoddyKit PRO. Kurs Angular Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Przekazywanie stanu do klienta”?
Unikać zduplikowanych żądań dzięki przekazywaniu stanu Ćwiczysz Angular Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Angular Academy?
Nie wymagamy żadnego doświadczenia. Angular Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.
Ile czasu zajmuje lekcja „Przekazywanie stanu do klienta”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Angular Academy?
Tak. Każda lekcja Angular Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Dlaczego renderowanie po stronie serwera
- Konfiguracja Angular SSR
- Trasy serwera i tryby renderowania
- Przekazywanie stanu do klienta