클라이언트 진입점

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

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

// src/client.tsx
import { hydrate } from 'solid-js/web'
import { StartClient, hydrateStart } from '@tanstack/solid-start/client'

hydrateStart().then((router) => {
  hydrate(() => <StartClient router={router} />, document)
})

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

오류 처리

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

// src/client.tsx
import { StartClient } from '@tanstack/solid-start/client'
import { hydrate } from 'solid-js/web'
import { ErrorBoundary } from './components/ErrorBoundary'

hydrate(
  () => (
    <ErrorBoundary>
      <StartClient />
    </ErrorBoundary>
  ),
  document.body,
)

개발 환경과 프로덕션 환경

개발 환경과 프로덕션 환경에서 서로 다른 동작을 원할 수 있습니다:

// src/client.tsx
import { StartClient } from '@tanstack/solid-start/client'
import { hydrate } from 'solid-js/web'

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

hydrate(() => <App />, document.body)

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