React: What are React Server Components streaming?

1// Server Component (automatically streamed)
2async function Page() {
3  return (
4    <div>
5      <Header />
6      {/* This suspends and streams separately */}
7      <Suspense fallback={<Skeleton />}>
8        <SlowDataComponent />
9      </Suspense>
10      <Footer />
11    </div>
12  );
13}
14
15async function SlowDataComponent() {
16  // This takes 3 seconds
17  const data = await fetchSlowData();
18  return <div>{data.content}</div>;
19}

1// app/dashboard/loading.tsx
2export default function Loading() {
3  return <div>Loading dashboard...</div>;
4}
5
6// app/dashboard/page.tsx
7export default async function Dashboard() {
8  const data = await fetchData();
9  return <DashboardContent data={data} />;
10}

1// app/dashboard/error.tsx
2"use client";
3
4export default function Error({ error, reset }) {
5  return (
6    <div>
7      <p>Something went wrong</p>
8      <button onClick={reset}>Try again</button>
9    </div>
10  );
11}