Skip to main content

What is waterfall fetching?

Next.jsMiddle~2 min read
Suggest an edit

Waterfall fetching is a situation where data loads sequentially, one request after another, and each next request starts only after the previous one finishes.

Because of this, the page load stretches out over time and becomes noticeably slower.

What waterfall fetching looks like in practice

Imagine a chain:

  1. The page loads
  2. The user's data is requested
  3. Only after that their orders are requested
  4. Only then - the details of each order

Schematically:

Request A → wait → Request B → wait → Request C

The total load time = the sum of all the delays.

Why this is bad for performance

1. Time is lost waiting

Every request waits for the previous one, even if:

  • they don't depend on each other
  • they could have run in parallel

Instead of:

A + B + C (in parallel)

you get:

A → B → C (in sequence)

2. The page's first render slows down

Until the whole chain finishes:

  • the data isn't ready
  • the content isn't shown
  • the user sees loading or emptiness

This hurts:

  • LCP
  • the overall feeling of speed

3. The effect gets worse on slow networks

On mobile internet:

  • every request = an extra delay
  • the waterfall becomes especially noticeable

Even a fast server doesn't save you if requests go strictly in sequence.

A common cause of waterfall fetching

In client-side rendering

js
useEffect(() => { fetchUser().then(user => { fetchOrders(user.id) }) }, [])

Here the second request is hard-tied to the first, even when that isn't necessary.

In server components (without optimization)

If several components:

  • each make their own fetch
  • and they are nested inside one another

the requests start lining up into a chain.

How waterfall fetching differs from parallel loading

Waterfall:

  • simpler to write
  • but slow

Parallel:

  • requests start at the same time
  • the page loads faster
  • network resources are used better

How this is usually fixed

The general principle:

  • move data loading higher up
  • make requests in parallel
  • avoid unnecessary dependencies between requests

In server rendering this is especially important, because every extra pause directly increases the page's response time.

In short

Waterfall fetching is when:

  • data loads in sequence
  • each request waits for the previous one
  • the load time adds up

This is one of the most common and least visible causes of slow pages, especially in applications with a lot of data.

Short Answer

Interview ready
Premium

A concise answer to help you respond confidently on this topic during an interview.

Suggest an edit