Angular Academy · Урок

Передача состояния клиенту

Избегайте повторных запросов с помощью передачи состояния

«Передача состояния клиенту» — бесплатный урок Angular Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Angular Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Angular Academy содержит 4 уроков всего.

Проблема двойного запроса

Во время SSR сервер получает данные для формирования HTML. Без дополнительных мер клиент после гидратации снова получает те же данные, что приводит к лишнему запросу и может вызвать мерцание содержимого.

TransferState приходит на помощь

TransferState сериализует данные на сервере и помещает их в HTML, после чего клиент читает их вместо повторного запроса. Данные передаются в теге script внутри ответа.

Как передаются данные

Состояние, сохранённое на сервере, встраивается в страницу в виде JSON. При запуске клиент десериализует его, поэтому первая отрисовка использует те же данные, что и сервер.

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

Использование makeStateKey

Создайте типизированный ключ с помощью makeStateKey, а затем читайте или записывайте данные через сервис TransferState.

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

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

Шаблон «сначала прочитать, затем запросить»

И на сервере, и на клиенте: если ключ существует в TransferState, используйте его; в противном случае выполните запрос. Сервер получает и сохраняет данные, а клиент находит сохранённое значение и пропускает вызов.

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 делает это автоматически

Вызов provideClientHydration(withHttpTransferCacheOptions()) (по умолчанию включённый вместе с гидратацией) заставляет HttpClient сохранять ответы сервера на GET-запросы в TransferState, поэтому идентичные запросы клиента обслуживаются из кэша без ручного создания ключей.

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

Как избежать мерцания

Поскольку клиент повторно использует переданные данные, гидратированное представление в точности совпадает с HTML сервера, предотвращая вспышку, при которой содержимое исчезает и загружается заново.

Примечание о безопасности

Переданное состояние встраивается в общедоступный HTML. Никогда не помещайте в TransferState секреты, токены или личные данные пользователя, которые вы не хотели бы раскрывать в исходном коде страницы.

Пользовательский и автоматический подходы

HTTP-кэш передачи автоматически охватывает большинство запросов данных через GET. Используйте ручной makeStateKey для вычисляемого состояния, не связанного с HTTP, которое нужно передать с сервера на клиент.

Область действия кэша

HTTP-кэш передачи создаётся для каждого запроса и используется на клиенте один раз. После того как первый соответствующий запрос клиента прочитает его, последующие вызовы снова отправляются в сеть как обычно.

Проверка работы

Изучите ответ SSR и найдите встроенный скрипт состояния. На вкладке сети в браузере должно быть видно, что сразу после гидратации повторный запрос не выполняется.

Быстрая проверка

Проверьте свои знания о передаче состояния.

Итоги

Вы научились передавать данные с сервера на клиент с помощью TransferState и makeStateKey, использовали автоматический HTTP-кэш передачи, избежали двойных запросов и мерцания, а также не помещали личные данные в общедоступное встроенное состояние.

Часто задаваемые вопросы

Урок «Передача состояния клиенту» бесплатный?

Да — полный текст урока «Передача состояния клиенту» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Angular Academy, подпишись на CoddyKit PRO. Курс Angular Academy содержит 4 уроков всего.

Чему я научусь в уроке «Передача состояния клиенту»?

Избегайте повторных запросов с помощью передачи состояния Ты практикуешь Angular Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Angular Academy?

Предыдущий опыт не требуется. Angular Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.

Сколько времени занимает урок «Передача состояния клиенту»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Angular Academy?

Да. Каждый урок Angular Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к Angular Academy