Next.js
/Beginner
Sequential Data Fetching
Definition
Fetching data in a strict order, where Request B cannot begin until Request A has fully completed.
Explain Like I'm New
Sometimes waterfalls are unavoidable. You can't fetch a user's 'Recent Orders' until you first fetch the user's 'ID'. Request 2 depends entirely on the result of Request 1.
Real World Example
Authenticating a user token to get their `companyId`, and then making a second query using that `companyId` to fetch the company's billing data.
Common Use Cases
- •Dependent data queries
- •Authentication chains
Interactive Example
export default async function BillingDashboard({ token }) { // Request 1: Must happen first const session = await fetchSession(token); // Request 2: Blocked until Request 1 finishes. Needs the ID! const billing = await fetchBilling(session.companyId); return <div>Billing amount: {billing.amount}</div>; }
Interview Questions
basic
- Why is sequential fetching generally discouraged unless absolutely necessary?
intermediate
- How can you mitigate the bad UX of a long sequential fetch waterfall?