Streaming and Suspense

Do not make the whole page wait for its slowest section

A page heading, navigation, and core product information may be ready immediately while recommendations take another second. Without a boundary, the slow region can delay everything around it.

Streaming lets the stable shell arrive first and fills slower regions as they resolve.

loading.tsx gives a route an instant fallback

A loading.tsx file creates a Suspense boundary around the route segment. It is a good default for navigation where the next page may need server work before its content is ready.

Keep the fallback structurally close to the final layout so the page does not jump around when content appears.

Use Suspense when only part of the page is slow

import { Suspense } from 'react'

export default function Page() {
  return (
    <>
      <ProductSummary />
      <Suspense fallback={<ReviewsSkeleton />}>
        <Reviews />
      </Suspense>
    </>
  )
}

A boundary is a UX decision

Do not wrap every component in Suspense just because you can. Group content that should appear together and split content that can meaningfully arrive later.

The right boundary usually follows how a person reads the page, not how the files happen to be organised.