Что такое waterfall-проблема при параллельных и последовательных запросах в Next.js и как её избежать?

Что такое waterfall-проблема?

Waterfall-проблема (или каскадная проблема) в Next.js возникает, когда несколько запросов к данным выполняются последовательно, а не параллельно. Каждый следующий запрос ждет завершения предыдущего, что приводит к суммированию времени ожидания. Это особенно критично на серверной стороне, где задержка каждого запроса увеличивает время рендеринга страницы.

Пример проблемы

Рассмотрим типичный случай в getServerSideProps:

export async function getServerSideProps() {
  const user = await fetch('/api/user'); // 200ms
  const posts = await fetch('/api/posts'); // ждет user, еще 200ms
  const comments = await fetch('/api/comments'); // ждет posts, еще 200ms
  return { props: { user, posts, comments } };
}

Общее время — 600ms, хотя запросы независимы.

Как избежать

Используйте Promise.all для параллельного выполнения независимых запросов:

export async function getServerSideProps() {
  const [user, posts, comments] = await Promise.all([
    fetch('/api/user'),
    fetch('/api/posts'),
    fetch('/api/comments')
  ]);
  return { props: { user, posts, comments } };
}

Теперь все три запроса выполняются одновременно, и общее время равно максимальному из них (200ms).

Где еще встречается

Waterfall может возникать в серверных компонентах React при использовании async/await внутри компонентов, которые зависят друг от друга. В таких случаях выносите независимые запросы на верхний уровень или используйте Suspense для потоковой загрузки.

Вывод: Waterfall-проблема ухудшает производительность приложений Next.js. Её избегают параллелизацией независимых запросов через Promise.all или аналогичные механизмы, что особенно важно для серверного рендеринга и улучшения пользовательского опыта.