Next.js 14服务端Suspense失效求助：页面整体等待而非组件加载

问题核心：在App Router中，直接导入异步服务器组件时，服务器默认会等待所有子组件的异步操作完成后再发送完整HTML，导致整个页面延迟。要实现父组件先渲染、子组件异步加载的效果，需要利用Next.js的流式渲染能力，拆分渲染任务。

方案一：使用next/dynamic异步导入组件（服务端渲染模式） #

通过next/dynamic异步导入ItemList，让Next.js将其作为独立的渲染块处理，先发送父页面内容，再流式加载子组件。

修改app/page.tsx：

import { Suspense } from "react";
import dynamic from "next/dynamic";

// 异步导入ItemList，开启服务端渲染
const ItemList = dynamic(() => import("./ItemList"), {
  ssr: true,
});

export default function Page() {
  return (
    <main>
      Hello Sample Page!
      <div>
        <Suspense fallback="Loading...">
          <ItemList />
        </Suspense>
      </div>
    </main>
  );
}

app/ItemList.tsx保持原代码不变即可。

方案二：用React use Hook处理异步数据（React 18+） #

将异步数据获取逻辑抽离为单独函数，通过React的use Hook在组件中处理，配合Suspense实现流式渲染。

修改app/ItemList.tsx：

import { use } from "react";

async function fetchItems() {
  await new Promise(resolve => setTimeout(resolve, 5000));
  return [
    { id: "test-1", name: "chocolate" },
    { id: "test-2", name: "rice ball" },
  ];
}

export default function ItemList() {
  const items = use(fetchItems());

  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

app/page.tsx修改为普通组件（无需async）：

import { Suspense } from "react";
import ItemList from "./ItemList";

export default function Page() {
  return (
    <main>
      Hello Sample Page!
      <div>
        <Suspense fallback="Loading...">
          <ItemList />
        </Suspense>
      </div>
    </main>
  );
}

两种方案均为服务端渲染方案，无需依赖客户端逻辑，部署后页面会先显示"Hello Sample Page!"和加载提示，5秒后再渲染出列表内容。

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