RSC suspense

out.txt

delay 2004
delay 1003
delay2 1002
delay 1001

page.tsx

import Link from "next/link";
import { Suspense } from "react";

export default function Home() {
  return (
    <main className="p-24">
      <Link href="/test">Test</Link>
      <Suspense fallback={<div>Loading...</div>}>
        <Suspense fallback={<div>Loading...</div>}>
          <Test delay={2004} />
        </Suspense>
        <Test delay={1003} />
        Test2:
        <Test2 delay={1002} delay2={1001} />
      </Suspense>
    </main>
  );
}

async function Test({ delay }: { delay: number }) {
  console.log("delay", delay);
  await new Promise((resolve) => setTimeout(resolve, delay));
  return <div>Hello</div>;
}

async function Test2({ delay, delay2 }: { delay: number; delay2: number }) {
  console.log("delay2", delay);
  await new Promise((resolve) => setTimeout(resolve, delay));
  return (
    <div>
      Hello
      <Suspense fallback={<div>Loading...</div>}>
        <Test delay={delay2} />
      </Suspense>
    </div>
  );
}