클라이언트 진입점

[!NOTE] 클라이언트 진입점은 기본적으로 선택 사항입니다. 제공하지 않으면 TanStack Start가 아래 내용을 기본값으로 사용하여 클라이언트 진입점을 자동으로 처리합니다.

HTML을 클라이언트에 전달하는 것은 절반에 불과합니다. 전달된 후에는 라우트가 클라이언트에서 확인되면 클라이언트 측 JavaScript를 하이드레이션해야 합니다. 이를 위해 애플리케이션의 루트를 StartClient 컴포넌트로 하이드레이션합니다:

// src/client.tsx
import { StartClient } from '@tanstack/react-start/client'
import { StrictMode } from 'react'
import { hydrateRoot } from 'react-dom/client'

hydrateRoot(
  document,
  <StrictMode>
    <StartClient />
  </StrictMode>,
)

이를 통해 사용자의 초기 서버 요청이 완료되면 클라이언트 측 라우팅을 시작할 수 있습니다.

오류 처리

클라이언트 측 오류를 원활하게 처리하도록 클라이언트 진입점을 오류 경계로 감쌀 수 있습니다:

// src/client.tsx
import { StartClient } from '@tanstack/react-start/client'
import { StrictMode } from 'react'
import { hydrateRoot } from 'react-dom/client'
import { ErrorBoundary } from './components/ErrorBoundary'

hydrateRoot(
  document,
  <StrictMode>
    <ErrorBoundary>
      <StartClient />
    </ErrorBoundary>
  </StrictMode>,
)

개발 환경과 프로덕션 환경

개발 환경과 프로덕션 환경에서 서로 다르게 동작하도록 구성할 수 있습니다:

// src/client.tsx
import { StartClient } from '@tanstack/react-start/client'
import { StrictMode } from 'react'
import { hydrateRoot } from 'react-dom/client'

const App = (
  <>
    {import.meta.env.DEV && <div>Development Mode</div>}
    <StartClient />
  </>
)

hydrateRoot(
  document,
  import.meta.env.DEV ? <StrictMode>{App}</StrictMode> : App,
)

클라이언트 진입점을 사용하면 TanStack Start의 서버 측 렌더링과 원활하게 연동하면서 애플리케이션이 클라이언트 측에서 초기화되는 방식을 완전히 제어할 수 있습니다.