The client entry point is optional out of the box. If not provided, TanStack Start will automatically handle the client entry point for you using the below as a default.
Getting our html to the client is only half the battle. Once there, we need to hydrate our client-side JavaScript once the route resolves to the client. We do this by hydrating the root of our application with the StartClient component:
// 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' hydrateRoot( document, <StrictMode> <StartClient /> </StrictMode>, ) This enables us to kick off client-side routing once the user's initial server request has fulfilled.
You can wrap your client entry point with error boundaries to handle client-side errors gracefully:
// 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' import { ErrorBoundary } from './components/ErrorBoundary' hydrateRoot( document, <StrictMode> <ErrorBoundary> <StartClient /> </ErrorBoundary> </StrictMode>, ) You may want different behavior in development vs production:
// 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, ) // 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, ) The client entry point gives you full control over how your application initializes on the client side while working seamlessly with TanStack Start's server-side rendering.
