Skip to main content

Що таке waterfall fetching?

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

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 - це коли:

  • дані вантажаться по черзі
  • кожен запит чекає на попередній
  • час завантаження складається

Це одна з найчастіших і непомітних причин повільних сторінок, особливо в застосунках з великою кількістю даних.

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

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

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

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