Streaming Pitfalls: Layout Shift and Waterfalls

Streaming with React Suspense and Next.js 15 is powerful, but it introduces two categories of problems that silently degrade user experience:

• Layout Shift — the page visually jumps when streamed content arrives and replaces a skeleton or placeholder, causing elements to reposition.
• Data Waterfalls — components fetch data sequentially rather than in parallel, so the total load time is the sum of all fetch durations instead of the maximum.

These problems are distinct but often appear together. A waterfall delays when content arrives, and when it finally does arrive, a poorly designed skeleton causes a layout shift. This lesson teaches you to diagnose both and apply targeted fixes.

A waterfall happens when one async Server Component awaits its data before rendering children that also need to fetch data. Because the parent suspends first, children never start fetching until the parent resolves.

Consider this structure:

• DashboardPage awaits getUser() (200 ms)
• Then renders <RecentOrders userId={user.id} /> which awaits getOrders(userId) (300 ms)
• Then renders <Recommendations userId={user.id} /> which awaits getRecommendations(userId) (400 ms)

Total wait: 200 + 300 + 400 = 900 ms. With parallel fetches it could be max(200, 300, 400) = 400 ms. The cascade is the waterfall.