Next.js 14 App Router中Suspense阻塞整页问题求助

我在测试Next.js 14.0.4的App Router Streaming特性时遇到问题：整页被阻塞，必须等Suspense包裹的异步组件完成请求后才会显示内容，而不是先展示静态文本和加载占位符。

我的初始代码如下：

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;

我期望页面先显示"Some static text"和加载提示，10秒后再展示"Fetched data"，但实际整页会卡住10秒才一起显示。

我试过在MyComponent中调用unstable_noStore()，也给页面添加了export const dynamic = 'force-dynamic'，但问题依旧。

解决方案 #

问题核心是App Router默认的静态预渲染会提前渲染所有组件，包括异步组件，导致流式渲染不触发。要实现预期效果，需满足以下条件：

1. 确保异步组件是服务端组件
   不要在异步组件文件中导入任何客户端专属API（比如useState、useEffect），否则组件会被强制转为客户端组件，Suspense无法触发服务端流式渲染。

2. 正确配置动态渲染
   将export const dynamic = "force-dynamic"添加到**页面组件（Home）**所在文件，而不是仅在异步组件中设置。这个配置会禁用静态预渲染，强制页面每次请求都动态生成，从而触发Streaming。

3. 优化代码结构（可选但推荐）
   将异步组件拆分到单独文件，更清晰地分离服务端逻辑：

   创建app/MyComponent.js：

   export default async function MyComponent() {
     function wait(ms, data) {
       return new Promise((resolve) => setTimeout(() => resolve(data), ms));
     }
     const data = await wait(10000, "Fetched data");
     return <p>{data}</p>;
   }
   

   修改app/page.js：

   import { Suspense } from "react";
   import MyComponent from "./MyComponent";
   
   // 关键配置：开启动态渲染
   export const dynamic = "force-dynamic";
   
   export default function Home() {
     return (
       <div>
         <h1>Some static text</h1>
         <Suspense fallback="We are loading the data...">
           <MyComponent />
         </Suspense>
       </div>
     );
   }
   

4. 开发模式注意事项
   开发环境下React Fast Refresh可能有缓存，修改配置后建议重启开发服务器再测试。

内容的提问来源于stack exchange，提问作者Houria Yaseen