Next.js中使用<Suspense>组件导致按钮失去交互的原因

你遇到的按钮点击无响应问题，核心是混淆了Next.js客户端组件（Client Component）和服务端组件（Server Component）的异步渲染规则：

• 你的页面顶部加了'use client'，说明这是个客户端组件，但你却在里面写了async函数组件AsyncComponent——这种async/await定义组件的写法是服务端组件的专属特性，客户端组件里这么写会打乱React的渲染生命周期，导致Suspense包裹内的组件渲染完成后，事件绑定没有被正确初始化，所以里面的按钮点了没反应。
• Suspense外部的NormalComponent是正常的同步客户端组件，所以事件绑定完全没问题。

分两种情况处理：

情况1：只是想在客户端异步获取数据 #

如果AsyncComponent只是用来异步拿数据，不用改成服务端组件，把数据请求放到useEffect里就行：

'use client'
import React, { Suspense, useState, useEffect } from "react";

const AsyncDataComponent = () => {
  const [data, setData] = useState(null);
  
  useEffect(() => {
    // 异步请求数据
    const getDetail = async () => {
      const res = await new Promise(r => setTimeout(() => r('Detail'), 3000));
      setData(res);
    };
    getDetail();
  }, []);

  if (!data) return null;
  return <div>{data}</div>;
};

function NormalComponent() {
  const handleClick = () => {
    console.log('click!!');
  };
  return (
    <div style={{border: '1px red solid', margin: '5px 0'}}>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
}

export default function Page() {
  return (
    <div>
      <Suspense fallback={<h2>Loading...</h2>}>
        <AsyncDataComponent />
        <NormalComponent />
      </Suspense>
      <NormalComponent />
    </div>
  );
}

情况2：确实要用到服务端组件的异步特性 #

把AsyncComponent拆成单独的服务端组件（不要加'use client'）：

// AsyncComponent.js
export default async function AsyncComponent() {
  const data = await new Promise((r) => {
    setTimeout(() => r('Detail'), 3000);
  }) as string;
  return <div>{data}</div>;
}

然后在你的客户端组件页面里引入它：

'use client'
import React, { Suspense } from "react";
import AsyncComponent from './AsyncComponent';

function NormalComponent() {
  const handleClick = () => {
    console.log('click!!');
  };
  return (
    <div style={{border: '1px red solid', margin: '5px 0'}}>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
}

export default function Page() {
  return (
    <div>
      <Suspense fallback={<h2>Loading...</h2>}>
        <AsyncComponent />
        <NormalComponent />
      </Suspense>
      <NormalComponent />
    </div>
  );
}

这样Suspense里的按钮点击就能正常触发日志了，因为服务端组件的异步渲染不会影响客户端组件的事件绑定逻辑。

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