← Back to rules

nextjs/no-async-client-component 正确性

它的作用

禁止在 Next.js 应用中为客户端组件使用异步函数。 此规则会检查是否存在以下情况的异步函数：

• 标记了 "use client" 指令
• 名称以大写字母开头（表示这是一个组件）
• 以默认导出形式导出，或赋值给一个变量

为什么这是不好的？

在客户端组件中使用异步函数可能导致服务器与客户端之间的渲染挂载不匹配， 破坏组件的渲染生命周期，并可能在 React 的并发特性下引发意外行为。

示例

此规则的 错误 示例：

"use client"

// 带有默认导出的异步组件
export default async function MyComponent() {
  return <></>
}

// 带有命名导出的异步组件
async function MyComponent() {
  return <></>
}
export default MyComponent

// 异步箭头函数组件
const MyComponent = async () => {
  return <></>
}
export default MyComponent

此规则的 正确 示例：

"use client"

// 普通的同步组件
export default function MyComponent() {
  return <></>
}

// 在副作用中处理异步操作
export default function MyComponent() {
  useEffect(() => {
    async function fetchData() {
      // 这里执行异步操作
    }
    fetchData();
  }, []);
  return <></>
}

// 事件处理器中的异步操作
export default function MyComponent() {
  const handleClick = async () => {
    // 这里执行异步操作
  }
  return <button onClick={handleClick}>点击我</button>
}

如何使用

要通过配置文件或 CLI 启用此规则，可以使用：

配置文件 (.oxlintrc.json)

{
  "plugins": ["nextjs"],
  "rules": {
    "nextjs/no-async-client-component": "error"
  }
}

CLI

oxlint --deny nextjs/no-async-client-component --nextjs-plugin

参考资料

• 规则源码