Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Як працює TransferState в Angular Universal?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**TransferState** - це механізм в Angular Universal, який дозволяє передати дані з сервера в браузер, щоб не робити повторний HTTP-запит після SSR. **Ключове:** TransferState - це "міст" між сервером і клієнтом, який передає готові дані, уникаючи повторних запитів і прискорюючи завантаження.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення**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 - це "міст" між сервером і клієнтом, який передає готові дані, уникаючи повторних запитів і прискорюючи завантаження.**Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.