Next.js App Router中服务端组件嵌套客户端组件出现警告求助

问题原因 #

你标记了'use client'的Client组件被定义为async function，但该组件没有实际异步操作，Next.js中普通客户端组件不需要（也不应该）用async声明，这是触发警告的核心原因。

解决步骤 #

移除Client组件中的async关键字即可解决问题，修改后的代码如下：

'use client'

export default function Client() {
    return (
        <div className="mt-8 flex justify-center">
            <button
                onClick={() => console.log("hello")}
                className="bg-blue-700 py-2 px-4 font-semibold rounded-md hover:bg-blue-900"
            >
                I am clients
            </button>
        </div>
    );
}

补充说明 #

• 只有当客户端组件内部存在异步数据获取（比如调用fetch并使用await）时，才需要将组件声明为async，同时要配合Suspense组件使用。你的组件仅负责渲染交互按钮，无异步逻辑，完全不需要async声明。
• 当前问题无需额外查阅官方文档即可解决，若后续涉及更复杂的客户端组件异步场景，可以参考Next.js官方文档中相关内容。

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