Skip to main content

Як працює TransferState в Angular Universal?

AngularJunior~1 хв читання
Запропонувати правку

TransferState - це механізм в Angular Universal, який дозволяє передати дані з сервера в браузер, щоб не робити повторний HTTP-запит після SSR.

Навіщо він потрібен

При SSR сервер уже отримав дані з API, щоб відмалювати сторінку. Але коли в браузері вмикається Angular (на етапі hydration), він за замовчуванням запускає ті самі запити знову, тому що клієнт про це не знає.

TransferState вирішує цю проблему: сервер кладе дані в стан, а клієнт читає і використовує їх, замість повторного запиту.

Як це працює за кроками

  1. SSR робить HTTP-запит на сервері
  2. Кладе результат у TransferState
  3. Angular вставляє ці дані в HTML (як скрипт з JSON)
  4. Браузер читає їх при старті і підставляє в сервіс
  5. HTTP-запит на клієнті НЕ виконується повторно

Дуже спрощений приклад

На сервері:

ts
this.http.get('/api/products').subscribe(data => { this.transferState.set(PRODUCTS_KEY, data); });

На клієнті:

ts
const data = this.transferState.get(PRODUCTS_KEY, null);

Якщо дані є: використовуємо їх, якщо немає: тільки тоді робимо http.get().

Що дає TransferState

Проблема без ньогоРішення з TransferState
подвійні HTTP-запити (сервер + клієнт)запит лише один
повільна hydrationшвидка інтерактивність
зайве навантаження на APIменше трафіка

Підсумок

TransferState в Angular Universal - це "міст" між сервером і клієнтом, який передає готові дані, уникаючи повторних запитів і прискорюючи завантаження.

Коротка відповідь

Для співбесіди
Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Запропонувати правку