NextJS中Suspense与Key结合使用的异常行为问询

问题重现 #

代码示例：

import { Suspense } from "react";
import MyButton from "./my-button";

async function ContainerOne() {
  await new Promise((resolve) => setTimeout(resolve, 3000));
  return <div>Container 1</div>
}

async function ContainerTwo() {
  await new Promise((resolve) => setTimeout(resolve, 1000));
  return <div>Container 2</div>
}

export default function Home() {
  return (
    <div>
      <Suspense key={Math.random()} fallback={<div>loading 1 ...</div>}>
        <ContainerOne />
      </Suspense>
      <Suspense key={Math.random()} fallback={<div>loading 2 ...</div>}>
        <ContainerTwo />
      </Suspense>
      <MyButton />
    </div>
  );
}

异常现象：

• 两个Suspense都用随机key时，各自正常显示加载占位符。
• 将ContainerTwo的Suspense改为常量key后，ContainerOne会先等待1秒（ContainerTwo无加载状态），之后才进入3秒加载；预期是ContainerOne直接加载3秒，ContainerTwo无加载状态但1秒后显示内容。

原因解析 #

• 异步组件写法错误：React组件必须返回React元素（或null），但async函数返回的是Promise，这不符合组件规范。Suspense的设计是捕获组件抛出的Promise（如React.lazy加载时的Promise），直接用async组件无法正确触发Suspense的加载逻辑，导致React处理异步任务的流程混乱。
• Key的组件复用逻辑干扰：当Suspense使用稳定key时，React会判定为可复用的组件实例。由于上述写法错误，React会优先处理这个“复用”组件下的异步任务，阻塞了随机key对应的新Suspense实例的加载流程。

解决方法 #

• 修正异步组件写法：使用官方推荐的React.lazy配合动态import实现支持Suspense的异步组件，示例：

import { Suspense, lazy } from "react";
import MyButton from "./my-button";

const ContainerOne = lazy(() => 
  new Promise(resolve => {
    setTimeout(() => {
      resolve({ default: () => <div>Container 1</div> });
    }, 3000);
  })
);

const ContainerTwo = lazy(() => 
  new Promise(resolve => {
    setTimeout(() => {
      resolve({ default: () => <div>Container 2</div> });
    }, 1000);
  })
);

export default function Home() {
  return (
    <div>
      <Suspense fallback={<div>loading 1 ...</div>}>
        <ContainerOne />
      </Suspense>
      <Suspense fallback={<div>loading 2 ...</div>}>
        <ContainerTwo />
      </Suspense>
      <MyButton />
    </div>
  );
}

• 合理使用Key：避免用随机key导致Suspense频繁销毁重建，仅在需要强制组件重置时使用变化的key；若无重置需求，直接移除key即可。
• 使用数据获取库的Suspense模式：如果是异步数据场景，推荐用React Query、SWR等库的Suspense支持，它们能更规范地处理异步数据与Suspense的结合，避免手动Promise的问题。

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