TanStack Start 中文文档
渲染

客户端入口点(Client Entry Point)

注意

客户端入口点默认是可选的。如果未提供,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 的服务端渲染无缝协作。

On this page