← Back to rules

nextjs/no-async-client-component 정확성

작동 방식

Next.js 애플리케이션에서 클라이언트 컴포넌트에 비동기 함수 사용을 방지합니다.
이 규칙은 다음 조건을 모두 만족하는 모든 비동기 함수를 확인합니다:

• "use client" 지시문으로 표시됨
• 대문자로 시작하는 이름을 가짐 (컴포넌트임을 나타냄)
• 기본 내보내기 또는 변수에 할당됨

왜 문제인가요?

클라이언트 컴포넌트에 비동기 함수를 사용하면 서버와 클라이언트 간의 하이드레이션 일치 문제가 발생할 수 있으며,
컴포넌트 렌더링 라이프사이클이 깨질 수 있고, 리액트의 동시 기능과 함께 예기치 않은 동작을 유발할 수 있습니다.

예시

이 규칙에 부적절한 코드 예시:

"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>
}

사용 방법

이 규칙을 설정 파일이나 명령줄 인터페이스를 통해 활성화하려면 다음과 같이 사용할 수 있습니다:

설정 파일 (.oxlintrc.json)

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

CLI

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

참고 정보

• 규칙 소스