Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Що таке waterfall fetching?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**Waterfall fetching** - це ситуація, коли дані завантажуються **послідовно, один запит за іншим**, і кожен наступний запит починається **лише після завершення попереднього**. **Ключове:** через це завантаження сторінки розтягується в часі і стає помітно повільнішим, тому борються з цим паралельними запитами.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення**Waterfall fetching** - це ситуація, коли дані завантажуються **послідовно, один запит за іншим**, і кожен наступний запит починається **лише після завершення попереднього**. Через це завантаження сторінки розтягується в часі і стає помітно повільнішим. --- ## Як виглядає waterfall fetching на практиці Уявімо ланцюжок: 1. Завантажується сторінка 2. Запитуються дані користувача 3. **Лише після цього** запитуються його замовлення 4. **Лише потім** - деталі кожного замовлення Схематично: ``` Запит A → чекаємо → Запит B → чекаємо → Запит C ``` Загальне завантаження = сума всіх затримок. --- ## Чому це погано для продуктивності ### 1. Втрачається час на очікування Кожен запит чекає на попередній, навіть якщо: - вони не залежать одне від одного - їх можна було виконати паралельно Замість: ``` A + B + C (паралельно) ``` виходить: ``` A → B → C (по черзі) ``` --- ### 2. Уповільнюється перший рендер сторінки Поки не завершиться весь ланцюжок: - дані не готові - контент не відображається - користувач бачить завантаження або порожнечу Це погіршує: - LCP - загальне відчуття швидкості --- ### 3. Посилюється ефект на повільних мережах На мобільному інтернеті: - кожен запит = додаткова затримка - waterfall стає особливо помітним Навіть швидкий сервер не рятує, якщо запити йдуть строго по черзі. --- ## Часта причина waterfall fetching ### У клієнтському рендерингу ```js useEffect(() => { fetchUser().then(user => { fetchOrders(user.id) }) }, []) ``` Тут другий запит **жорстко залежить** від першого, навіть якщо це не обов'язково. --- ### У серверних компонентах (без оптимізації) Якщо кілька компонентів: - кожен сам робить `fetch` - і вони вкладені один в одного запити починають вибудовуватися в ланцюжок. --- ## Чим waterfall fetching відрізняється від паралельного завантаження **Waterfall:** - простіше написати - але повільно **Паралельно:** - запити стартують одночасно - сторінка завантажується швидше - краще використовуються ресурси мережі --- ## Як із цим зазвичай борються Загальний принцип: - **піднімати завантаження даних вище** - **робити запити паралельно** - **уникати зайвих залежностей між запитами** У серверному рендерингу це особливо важливо, тому що кожна зайва пауза напряму збільшує час відповіді сторінки. --- ## Коротко Waterfall fetching - це коли: - дані вантажаться по черзі - кожен запит чекає на попередній - час завантаження складається Це одна з найчастіших і непомітних причин повільних сторінок, особливо в застосунках з великою кількістю даних.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.