noNextAsyncClientComponent
¥Summary
-
规则生效日期：
v2.2.0¥Rule available since:
v2.2.0 -
诊断类别：
lint/nursery/noNextAsyncClientComponent¥Diagnostic Category:
lint/nursery/noNextAsyncClientComponent -
此规则没有修复方案。
¥This rule doesn’t have a fix.
-
此规则的默认严重级别为 warning。
¥The default severity of this rule is warning.
-
此规则属于以下域：
¥This rule belongs to the following domains:
-
来源：
¥Sources:
¥How to configure
{ "linter": { "rules": { "nursery": { "noNextAsyncClientComponent": "error" } } }}¥Description
防止客户端组件是异步函数。
¥Prevent client components from being async functions.
此规则禁止在 Next.js 应用中的客户端组件中使用异步函数。标记为 “使用客户端” 指令的客户端组件不应是异步的，因为这可能会导致水合不匹配、破坏组件渲染生命周期，并导致 React 并发特性出现意外行为。
¥This rule prevents the use of async functions for client components in Next.js applications. Client components marked with “use client” directive should not be async as this can cause hydration mismatches, break component rendering lifecycle, and lead to unexpected behavior with React’s concurrent features.
¥Examples
¥Invalid
"use client";
export default async function MyComponent() { return <div>Hello</div>;}code-block.jsx:3:16 lint/nursery/noNextAsyncClientComponent ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
⚠ The component MyComponent is an async client component, which is not allowed.
1 │ “use client”;
2 │
> 3 │ export default async function MyComponent() {
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
> 4 │ return <div>Hello</div>;
> 5 │ }
│ ^
6 │
ℹ Client components with “use client” directive should not be async functions as this can cause hydration mismatches and break React’s rendering lifecycle.
ℹ Consider using useEffect for async operations inside the component, or remove the “use client” directive if this should be a server component.
¥Valid
"use client";
export default function MyComponent() { return <div>Hello</div>;}// No "use client" directive - server component can be asyncexport default async function ServerComponent() { const data = await fetch('/api/data'); return <div>{data}</div>;}¥Related links
Biome v2.1 中文网 - 粤ICP备13048890号