Lesson 2.4

Streaming with Suspense boundaries

Without streaming, the response waits for every await on the page.

26mIntermediate13k students

Overview

Do not let the slowest query set the pace

Without streaming, the response waits for every await on the page. One slow recommendation service and the entire document is held back, including the header the user could have seen instantly.

A Suspense boundary breaks that coupling. Everything outside it is flushed to the browser immediately with the fallback in place, and the real content is streamed in when it resolves.

A loading file is exactly this: an implicit Suspense boundary around the route segment. Nesting boundaries more tightly gives you finer control over what appears when.

Streaming does not make your data faster. It stops one slow query from holding the whole page hostage.

In this lesson you will:

  • Send the fast part of a page first
  • Place a boundary around the slow subtree
  • Improve perceived load without faster data

Resources

Previous Lesson
Next Lesson
Streaming with Suspense boundaries — Next.js for Production — Vertex