The waterfall problem
A common pattern is fetch on render: a component mounts, then its effect starts a fetch, showing a spinner. If that component renders a child that also fetches, the child cannot start until the parent finishes. Requests chain into a slow waterfall.
Render as you fetch
The render as you fetch pattern starts fetching as early as you know what is needed, typically at route navigation, before the component renders. The component then reads the in flight result and suspends if it is not ready.
- Kick off requests at route or event time, not inside render effects.
- Render immediately and let Suspense show fallbacks for pending data.
- Because fetches start early and in parallel, nested data loads concurrently.
Why it is faster
Fetch on render serializes: render, then fetch, then render child, then fetch. Render as you fetch overlaps fetching with rendering and fires sibling requests together, collapsing the waterfall into parallel work.
Key idea
Render as you fetch starts requests before render and reads them via Suspense, turning chained waterfalls into parallel loading.