Explain how Next.js handles data fetching waterfall problems in SSR and how you'd mitigate them.

Question

Accepted Answer

Data fetching waterfalls are a critical performance issue in Server-Side Rendering (SSR). They occur when components fetch data sequentially—one request must complete before the next begins—delaying page rendering and increasing Time to First Byte (TTFB). In Pages Router with getServerSideProps, waterfalls often happen when multiple API calls are made sequentially or when nested components fetch data after the parent completes. In App Router, Server Components can create waterfalls when imports or data fetching are chained. Next.js provides several mitigation strategies: parallel data fetching, Suspense boundaries with streaming, and integration with data-fetching libraries that support concurrent requests. Request waterfalls: Sequential API calls where the second depends on data from the first (e.g., fetch user, then fetch their orders). Component waterfalls: Parent component completes before child component starts fetching its data. Import waterfalls: Dynamically imported components load only after parent renders, delaying their data fetching. Render-as-you-fetch waterfalls: Without Suspense, the server blocks rendering until all data is available. // pages/dashboard.tsx // ❌ This creates a waterfall - sequential API calls export async function getServerSideProps() { // First API call (1 second) const userRes = await fetch('https://api.example.com/user'); const user = await userRes.json(); // Second API call depends on first - must wait (1 more second) const ordersRes = await fetch(`https://api.example.com/orders?userId=${user.id}`); const orders = await ordersRes.json(); // Third API call depends on orders (1 more second) const productsRes = await fetch(`https://api.example.com/products?ids=${orders.map(o => o.productId).join(',')}`); const products = await productsRes.json(); // Total: 3 seconds blocking render return { props: { user, orders, products } }; } // Result: Server does nothing for 3 seconds, then renders // User waits 3 seconds for ANY content // pages/dashboard.tsx // ✅ Fix with Promise.all - parallel execution export async function getServerSideProps() { // Start both independent fetches immediately const userPromise = fetch('https://api.example.com/user').then(r => r.json()); const recentOrdersPromise = fetch('https://api.example.com/recent-orders').then(r => r.json()); const popularProductsPromise = fetch('https://api.example.com/popular-products').then(r => r.json()); // Wait for all to complete in parallel const [user, recentOrders, popularProducts] = await Promise.all([ userPromise, recentOrdersPromise, popularProductsPromise ]); // Now handle dependent data if needed let userOrders = []; if (recentOrders.length) { // This still creates a small waterfall but can't be avoided const orderIds = recentOrders.map(o => o.id).join(','); userOrders = await fetch(`https://api.example.com/orders/details?ids=${orderIds}`) .then(r => r.json()); } // Total: ~1 second (max of parallel promises) + 1 second for dependent = 2 seconds // Still better than 3 seconds sequential return { props: { user, recentOrders, popularProducts, userOrders } }; } // Alternative: Prefetch all data in one API call // Create a BFF (Backend-for-Frontend) endpoint that returns everything needed // /api/dashboard-data returns { user, orders, products } in one round trip export async function getServerSideProps() { // Single API call to your BFF const dashboardData = await fetch('https://api.example.com/dashboard-data') .then(r => r.json()); return { props: dashboardData }; } // Total: 1 second - optimal! The App Router introduces a fundamental solution to waterfalls through Suspense and streaming SSR. Instead of blocking the entire page on all data, you can wrap each data-dependent component in Suspense. The server sends the static shell immediately, then streams each component as its data resolves. This eliminates the perception of waterfalls because users see content progressively, even if data fetching happens sequentially on the server. For example, a dashboard could show the user info first, then orders when ready, then recommendations—all without blocking the initial paint. // app/dashboard/page.tsx // ✅ No waterfall perception - content streams progressively import { Suspense } from 'react'; import UserProfile from './UserProfile'; import OrdersList from './OrdersList'; import Recommendations from './Recommendations'; export default function DashboardPage() { return (

Dashboard

{/* These stream independently - no blocking */} Loading profile...

}> {/* UserProfile fetches its own data internally */} Loading orders...}> Loading recommendations...}>

Explain how Next.js handles data fetching waterfall problems in SSR and how you'd mitigate them.

Next.js SSR waterfalls occur when nested components fetch data sequentially; mitigate using parallel data fetching, React Suspense, streaming SSR, and data loading libraries like SWR or TanStack Query

Scenario Questions

Follow-up Questions