Suspense blocks the whole page when used in server component for Streaming

Question

I'm trying out the NextJS Streaming feature (with App Router), but it's not working as expected. The whole page is blocked until the suspended component finishes the asynchronous work.

This is my code:

import React, { Suspense } from "react";

function wait(ms, data) {
  return new Promise((resolve) => {
    setTimeout(() => resolve(data), ms);
  });
}

const MyComponent = async () => {
  const data = await wait(10000, "Fetched data");
  return <p>{data}</p>;
};

const Home = () => {
  return (
    <div>
      <h1>Some static text</h1>
      <Suspense fallback={"We are loading the data..."}>
        <MyComponent />
      </Suspense>
    </div>
  );
};

export default Home;

I used setTimeout with a delay of 10sec to simulate a fetch request. With this code, the entire page was blocked while I expected to see "Some static text" with the fallback text first, then 10 seconds later the "Fetched data" text.

---

I have seen this video 10 common mistakes with the Next.js App Router from Vercel's YouTube Chanel (Chapter 5 - Using Suspense with Server Components), and knew that I have to call unstable_noStore() inside MyComponent to get it work, so I imported it and used:

import { unstable_noStore } from "next/cache";
// ...
const MyComponent = async () => {
  unstable_noStore();
  // ....
};

Also, I tried adding export const dynamic = 'force-dynamic'.

And the whole page is still getting blocked. What should I do to make it work?

Next version: 14.0.4