How do you handle streaming and suspense in App Router?

The App Router has built-in support for streaming and React Suspense, allowing you to progressively render and stream UI to the client.

// app/page.js
import { Suspense } from "react";

async function UserProfile({ userId }) {
  const user = await getUserData(userId); // This can be slow
  return <div>Welcome, {user.name}!</div>;
}

async function UserPosts({ userId }) {
  const posts = await getUserPosts(userId); // This can also be slow
  return (
    <div>
      {posts.map((post) => (
        <div key={post.id}>{post.title}</div>
      ))}
    </div>
  );
}

export default function Page({ params }) {
  return (
    <div>
      <h1>User Dashboard</h1>
      <Suspense fallback={<div>Loading profile...</div>}>
        <UserProfile userId={params.id} />
      </Suspense>
      <Suspense fallback={<div>Loading posts...</div>}>
        <UserPosts userId={params.id} />
      </Suspense>
    </div>
  );
}

Benefits of streaming:

• Faster initial page load
• Better perceived performance
• Progressive enhancement
• SEO-friendly as search engines can index content as it streams