Stream with SuspenseStream with Suspense

Three boundary layouts

Press Load, or drag the time scrubber.

// app/dashboard/page.tsx
import { Suspense } from 'react'

export default function Dashboard() {
  return (
    <main>
      <Suspense fallback={<UserSkeleton />}>
        <UserSection />
      </Suspense>
      <Suspense fallback={<PostsSkeleton />}>
        <PostsSection />
      </Suspense>
    </main>
  )
}

async function UserSection() {
  const user = await getUser()
  return <UserCard user={user} />
}

Place the boundaries

Click a gap to split or merge, then press Stream.

Size the fallback

Press Stream posts and watch the Reply box.

function PostsSkeleton({ rows = PAGE_SIZE }) {
  // same row height and count as <PostList>
  return (
    <ul aria-hidden className="posts">
      {Array.from({ length: rows }, (_, i) => <li key={i} className="post skeleton" />)}
    </ul>
  )
}

<Suspense fallback={<PostsSkeleton />}>
  <PostsSection />
</Suspense>

Why it matters, pros and cons