渲染
客户端入口点(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 的服务端渲染无缝协作。