server components에서 client-only code를 금지합니다

TanStack Start는 renderServerComponent() 및 createCompositeComponent() 같은 RSC helpers를 통해 React Server Component 경계를 정의합니다.

renderServerComponent(<Element />)은 element 주위의 서버 경계입니다.
createCompositeComponent((props) => <Element />)은 callback 주위의 서버 경계입니다.

이 경계 내부에서는(그리고 거기서 렌더링된 모든 것 역시 'use client' 경계를 넘지 않는 한) client-only code를 사용하면 안 됩니다.

이 규칙은 server components에서 흔한 client-only 패턴을 감지합니다:

React client hooks(예: useState, useEffect)
browser-only globals(예: window, document)
React event handlers(onClick 등)
function props(서버/클라이언트 경계를 넘어 직렬화할 수 없음)
class components

규칙 세부사항

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

/* eslint "@tanstack/start/no-client-code-in-server-component": "error" */

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

export const Server = createCompositeComponent(() => {
  const [count] = useState(0)
  return <div>{count}</div>
})

/* eslint "@tanstack/start/no-client-code-in-server-component": "error" */

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

export const Server = createCompositeComponent(() => {
  return <div>{window.location.href}</div>
})

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

/* eslint "@tanstack/start/no-client-code-in-server-component": "error" */

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

export const Server = renderServerComponent(
  (async () => {
    const msg = await Promise.resolve('ok')
    return <div>{msg}</div>
  })(),
)

속성

✅ 권장됨

규칙 세부사항​

속성​

규칙 세부사항

속성