Что такое TransferState и для чего он нужен?angular-67

TransferState — это ключевой механизм в Angular для оптимизации работы приложений с Server-Side Rendering (SSR). Он решает проблему двойной загрузки данных при переходе с серверного рендеринга на клиентский.

Проблема без TransferState

  1. На сервере:

    • Приложение рендерится с данными от API.
    • Эти данные встраиваются в HTML.

  2. На клиенте:

    • Angular перезапускает приложение.
    • Компоненты снова запрашивают те же данные.
    • Происходит дублирование запросов → лишняя нагрузка и задержки.

Как работает TransferState?

Механизм состоит из трех этапов:

1. Серверная часть

Данные сохраняются в специальный "ключ" при рендеринге на сервере:

import { TransferState, makeStateKey } from '@angular/platform-browser';

const DATA_KEY = makeStateKey('user-data');

// В серверном коде
this.http.get('/api/user').subscribe(data => {
  this.transferState.set(DATA_KEY, data); // Сохраняем данные
  res.render(indexHtml, { /* ... */ });
});

2. Передача в клиент

Данные автоматически встраиваются в HTML в теге <script>:

<script id="transfer-state" type="application/json">
  {"user-data":{"id":1,"name":"John"}}
</script>

3. Клиентская часть

На клиенте данные извлекаются вместо повторного запроса:

ngOnInit() {
  const cachedData = this.transferState.get(DATA_KEY, null);

  if (cachedData) {
    this.data = cachedData;
    this.transferState.remove(DATA_KEY); // Очищаем после использования
  } else {
    // Делаем запрос только если данных нет
    this.http.get('/api/user').subscribe(/* ... */);
  }
}

Ключевые особенности

  1. Эффективность:

    • Исключает дублирующие HTTP-запросы.
    • Уменьшает время загрузки страницы.

  2. Безопасность:

    • Данные сериализуются в JSON.
    • Можно использовать для критических данных (но не для sensitive data!).

  3. Гибкость:

    • Работает с любыми типами данных (объекты, массивы, примитивы).
    • Можно комбинировать с другими состояниями (например, NgRx).

Пример из реальной практики

Сценарий: Загрузка списка статей для блога.

Без TransferState:

  • Сервер: 1 запрос → рендеринг.
  • Клиент: повторный запрос → 2x нагрузка на API.

С TransferState:

  • Сервер: 1 запрос → сохраняет данные → рендеринг.
  • Клиент: забирает готовые данные → мгновенное отображение.

Ограничения

  1. Размер данных:

    • Большие объемы данных увеличивают размер HTML.
    • Рекомендуемый лимит: ```100-200KB.

  2. Асинхронные операции:

    • Требуется аккуратная работа с Observable/Promise.
    • Лучше использовать в комбинации с resolve в роутинге.

Резюмируем

TransferState — это:

  1. Мост между сервером и клиентом для передачи данных.
  2. Оптимизация — исключает дублирующие запросы.
  3. Простота — минимальный код для значительного эффекта.

Используйте его для:

  • SSR-приложений.
  • Данных, которые не меняются между серверным и клиентским рендерингом.
  • Улучшения производительности и UX.

Без TransferState ваше SSR-приложение будет работать, но менее эффективно!

Вопросы

Собеседования