ClientOnly Component

The ClientOnly component is used to render a component only in the client, without breaking the server-side rendering due to hydration errors. It accepts a fallback prop that will be rendered if the JS is not yet loaded in the client.

The ClientOnly component accepts the following props:

The fallback component to render if the JS is not yet loaded in the client.

The component to render if the JS is loaded in the client.

• Returns the component's children if the JS is loaded in the client.
• Returns the fallback component if the JS is not yet loaded in the client.

// src/routes/dashboard.tsx
import { ClientOnly, createFileRoute } from '@tanstack/react-router'
import {
  Charts,
  FallbackCharts,
} from './charts-that-break-server-side-rendering'

export const Route = createFileRoute('/dashboard')({
  component: Dashboard,
  // ... other route options
})

function Dashboard() {
  return (
    <div>
      <p>Dashboard</p>
      <ClientOnly fallback={<FallbackCharts />}>
        <Charts />
      </ClientOnly>
    </div>
  )
}