Fetch waterfall''''ы — диагностика и лечение через Promise.all

Страница профиля нуждается в данных пользователя (200ms), его постах (300ms) и количестве подписчиков (150ms). Ни один из них не зависит от другого. Почему же страница загружается 650ms вместо 300ms?

Что такое waterfall

Fetch waterfall — серия запросов, где каждый начинается только после завершения предыдущего. Классический React waterfall:

1. Компонент A монтируется, вызывает fetch('/api/user') в useEffect
2. Ответ приходит (200ms) — компонент перерисовывается, рендерит дочерний B
3. Компонент B монтируется, вызывает fetch('/api/posts') в своём useEffect
4. Ответ приходит (300ms) — рендерит дочерний C
5. Компонент C вызывает fetch('/api/followers') (150ms)

Итого: 650ms. Хотя ни один из этих трёх fetch’ей не зависит от данных другого.

Почему образуются waterfall’ы

Корневая причина — data colocation встречается с последовательным рендерингом. React рендерит дерево компонентов сверху вниз. Каждый компонент запускает свой effect после монтирования. Дочерний компонент не может смонтироваться, пока родитель не отрендерится, а это происходит только после прихода данных родителя. Даже если данные дочернего и родительского компонентов независимы, зависимость рендеринга создаёт зависимость fetch’а.

Этот паттерн особенно опасен в глубоко вложенных деревьях: дерево из 5 уровней с одним fetch’ем на уровень добавляет 5 последовательных round-trip’ов, даже если каждый fetch логически независим.

Фикс 1: Promise.all у родителя

Самое простое лечение: поднять все независимые fetch’и к общему родителю и запустить их параллельно.

// Плохо — waterfall
const user = await fetchUser(id);
const posts = await fetchPosts(id);
const followers = await fetchFollowers(id);

// Хорошо — параллельно
const [user, posts, followers] = await Promise.all([
  fetchUser(id),
  fetchPosts(id),
  fetchFollowers(id),
]);

Суммарное время падает с суммы до максимума. С 5 независимыми fetch’ами по 200ms: 1000ms → 200ms.

Фикс 2: TanStack Query useQueries

При использовании клиентской библиотеки, useQueries запускает несколько запросов параллельно из одного вызова хука:

const results = useQueries({
  queries: [
    { queryKey: ['user', id], queryFn: () => fetchUser(id) },
    { queryKey: ['posts', id], queryFn: () => fetchPosts(id) },
    { queryKey: ['followers', id], queryFn: () => fetchFollowers(id) },
  ],
});

Все три запускаются одновременно. Каждый результат имеет свой loading/error state.

Фикс 3: Sibling RSC компоненты

В React Server Components, sibling async компоненты по умолчанию fetch’ят параллельно, потому что сервер может разрешить их одновременно:

// Оба fetch'ят одновременно на сервере
async function ProfilePage({ id }) {
  return (
    <div>
      <UserCard id={id} />   {/* fetches user */}
      <PostsList id={id} />  {/* fetches posts — параллельно с UserCard */}
    </div>
  );
}

Ключ: не await один перед рендерингом другого. Держи их как siblings, дай React’у диспетчеризировать их параллельно.