Next.js Streaming with Suspense: Progressive Page Loading

What Is Streaming in Next.js?

Streaming allows Next.js to send HTML to the browser progressively as server components finish rendering, rather than waiting for all data to load before sending anything. With streaming, users see your page layout and fast content immediately, while slower data sections load in sequence. This dramatically improves Time to First Byte (TTFB) and Largest Contentful Paint (LCP) for data-heavy pages.

How Suspense Enables Streaming

React Suspense is the mechanism that enables streaming. Wrap any async server component in a Suspense boundary with a fallback. Next.js streams the fallback (skeleton UI) immediately while the server component fetches its data. When the data arrives, React streams the final HTML to replace the fallback. Multiple Suspense boundaries on the same page stream independently — fast sections appear while slow ones are still loading.

Practical Streaming Patterns

The most common pattern is wrapping each data-fetching section of a page in its own Suspense boundary. A page might have a fast-loading header, a medium-speed product list, and a slow recommendations section — each wrapped separately. The header appears immediately, the product list appears in 200ms, and recommendations arrive last at 800ms. The user can start reading and interacting long before the page is fully complete.

loading.tsx: Route-Level Streaming

The loading.tsx special file in Next.js App Router creates a Suspense boundary automatically at the route level. Any component that renders in your page.tsx is wrapped in Suspense with loading.tsx as the fallback. This means the navigation feels instant — Next.js shows the loading.tsx skeleton immediately while the page data loads. loading.tsx is perfect for simple skeleton screens that outline the page structure.

Skeleton Components for Streaming

Effective skeleton components mimic the layout of the real content — they have the same spacing, proportions, and structure but with animated placeholder blocks. Use Tailwind's animate-pulse class on gray div elements. Skeleton components should NOT use real data, so they never cause loading states themselves. The goal is to give users a spatial map of the page so they know where content is coming.

Streaming vs Parallel Data Fetching

Use Promise.all() to fetch multiple data sources in parallel within a single component when all data is needed before rendering. Use streaming (separate Suspense boundaries) when different parts of the page have independent data with different load times. The combination is powerful: within each Suspense-bounded component, use parallel fetches; across sections, use streaming to show each section as it completes.