Suggest an editImprove this articleRefine the answer for “What is waterfall fetching?”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)**Waterfall fetching** is a situation where data loads **sequentially, one request after another**, and each next request starts **only after the previous one finishes**. **Key point:** because of this, the page load stretches out in time and becomes noticeably slower, which is why the fix is to make requests run in parallel.Shown above the full answer for quick recall.Answer (EN)Image**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.For the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.