Streaming and Suspense in Depth

Traditional SSR:
Request → Fetch All → Render All → Send HTML → Hydrate

Streaming:
Request → Send Shell → Stream Components → Progressive Hydrate

import { Suspense } from 'react';

export default function Page() {
  return (
    <div>
      <Header /> {/* Sent immediately */}

      <Suspense fallback={<PostsSkeleton />}>
        <Posts /> {/* Streamed when ready */}
      </Suspense>

      <Suspense fallback={<CommentsSkeleton />}>
        <Comments /> {/* Streamed independently */}
      </Suspense>
    </div>
  );
}

async function Posts() {
  const posts = await fetchPosts(); // 2s delay
  return <PostList posts={posts} />;
}

async function Comments() {
  const comments = await fetchComments(); // 3s delay
  return <CommentList comments={comments} />;
}

<Suspense fallback={<PageSkeleton />}>
  <Page>
    <Suspense fallback={<SidebarSkeleton />}>
      <Sidebar />
    </Suspense>
    <Suspense fallback={<ContentSkeleton />}>
      <Content>
        <Suspense fallback={<CommentsSkeleton />}>
          <Comments />
        </Suspense>
      </Content>
    </Suspense>
  </Page>
</Suspense>

// loading.tsx - Automatic Suspense boundary
export default function Loading() {
  return <Skeleton />;
}

// Use loading.tsx for route-level loading
// Use Suspense for component-level loading