클라이언트 컨텍스트에서 async component를 금지합니다

Async React component는 React Server Components 내부에서만 유효합니다.

TanStack Start에서는 async component를 server-component 컨텍스트에서만 사용할 수 있으며, 예를 들면 다음과 같습니다:

• renderServerComponent(<AsyncComp />)에 의해 렌더링됨
• createCompositeComponent((props) => <AsyncComp />) 콜백 내부에서 렌더링됨

이 규칙은 직접적이든 전이적이든 "client"가 된 async component를 잡아내는 데 도움이 되며, 그렇지 않으면 런타임에 충돌이 발생할 수 있습니다.

규칙 세부사항

이 규칙에 대한 잘못된 코드 예시:

/* eslint "@tanstack/start/no-async-client-component": "error" */

import { createFileRoute } from '@tanstack/react-router'

export async function Page() {
  return <div />
}

export const Route = createFileRoute(undefined)({
  component: Page,
})

이 규칙에 대한 올바른 코드 예시:

/* eslint "@tanstack/start/no-async-client-component": "error" */

import { createFileRoute } from '@tanstack/react-router'

export function Page() {
  return <div />
}

export const Route = createFileRoute(undefined)({
  component: Page,
})

/* eslint "@tanstack/start/no-async-client-component": "error" */

import { createCompositeComponent } from '@tanstack/react-start/rsc'

export const ServerPage = createCompositeComponent(async () => {
  const message = await Promise.resolve('hello')
  return <div>{message}</div>
})

보고 위치

이 규칙은 두 가지 방식으로 보고할 수 있습니다:

• 사용 위치: component가 route options로 참조되어 client가 되면, 오류는 route option 사용 위치에서 보고되어야 합니다.
• 정의 위치: component가 'use client' 또는 client component에 의해 렌더링되어 client가 되면, 오류는 component 정의 위치에서 보고됩니다.

속성

• ✅ 권장됨