mirror of
https://github.com/Dvorinka/Devour.git
synced 2026-06-03 20:13:03 +00:00
Tomas Dvorak
17 lines
3.7 KiB
JSON
17 lines
3.7 KiB
JSON
{
|
|
"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"
|
|
} |