{
  "id": "171471127719bfb211fa8d96",
  "source": "solid:signals",
  "type": "github-document",
  "title": "client-only",
  "content": "---\ntitle: clientOnly\nuse_cases: \u003e-\n  browser apis, window access, document manipulation, third-party widgets, maps,\n  charts, avoiding ssr issues\ntags:\n  - client-only\n  - browser\n  - ssr\n  - rendering\n  - components\nversion: '1.0'\ndescription: \u003e-\n  Render components exclusively on the client side in SolidStart. Handle browser\n  APIs and bypass SSR for specific components.\n---\n\nThe `clientOnly` function allows components or pages to render exclusively on the client side, bypassing server-side rendering (_SSR_).\nThis is useful for code that relies on the browser-specific APIs, such as `window` or `document`.\n\n## How to Use `clientOnly` in Components\n\n1. **Isolate Client-Only Logic**: Create a separate file for the component that depends on browser-specific features, such as DOM or browser APIs.\n\n   ```tsx title=\"ClientOnlyComponent\"\n   export default function ClientOnlyComponent() {\n     const location = document.location.href;\n     return \u003cdiv\u003eCurrent URL: {location}\u003c/div\u003e;\n   }\n   ```\n\n2. **Import with `clientOnly`**: Use `clientOnly` to dynamically import the isolated component in your parent component or page.\n\n   ```tsx title=\"IsomorphicComponent.tsx\"\n   import { clientOnly } from \"@solidjs/start\";\n\n   const ClientOnlyComp = clientOnly(() =\u003e import(\"./ClientOnlyComponent\"));\n\n   export default function IsomorphicComponent() {\n     return \u003cClientOnlyComp /\u003e;\n   }\n   ```\n\n3. **Add a Fallback (Optional)**: Provide a `fallback` prop to display content while the client-only component is loading.\n\n   ```tsx\n   \u003cClientOnlyComp fallback={\u003cdiv\u003eLoading...\u003c/div\u003e} /\u003e\n   ```\n\n## Disabling SSR for Entire Pages\n\nTo disable SSR for an entire page, apply `clientOnly` at the page level. This ensures the page renders only on the client.\n\n```tsx title=\"routes/page.tsx\"\nimport { clientOnly } from \"@solidjs/start\";\n\nexport default clientOnly(async () =\u003e ({ default: Page }), { lazy: true });\n\nfunction Page() {\n  // This code runs only on the client\n  return \u003cdiv\u003eClient-only page content\u003c/div\u003e;\n}\n```\n\n## Parameters\n\n| Argument  | Type                                               | Description                                                                                              |\n| --------- | -------------------------------------------------- | -------------------------------------------------------------------------------------------------------- |\n| `fn`      | `() =\u003e Promise\u003c{ default: () =\u003e JSX.Element }\u003e`    | A function that dynamically imports a component to be rendered only on the client side.                  |\n| `options` | `{ lazy?: boolean }`                               | An optional object to configure loading behavior. Set `lazy: false` for eager loading                    |\n| `props`   | `Record\u003cstring, any\u003e \u0026 { fallback?: JSX.Element }` | Props passed to the component, including an optional `fallback` for rendering while the component loads. |",
  "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-start/reference/client/client-only.mdx",
  "metadata": {
    "path": "src/routes/solid-start/reference/client/client-only.mdx",
    "repo": "solidjs/solid-docs",
    "repo_url": "https://github.com/solidjs/solid-docs.git",
    "size": 2903,
    "source_type": "github"
  },
  "hash": "55bb15880caf8c11110183970e1f15f8730beceb03d1f52eca3d9b0619ab0915",
  "timestamp": "2026-02-23T11:43:00.194461017+01:00"
}