diff --git a/src/routes/solid-start/reference/client/client-only.mdx b/src/routes/solid-start/reference/client/client-only.mdx
index e35088e58..1ec225264 100644
--- a/src/routes/solid-start/reference/client/client-only.mdx
+++ b/src/routes/solid-start/reference/client/client-only.mdx
@@ -2,36 +2,57 @@
title: clientOnly
---
-Wrapping components in `clientOnly` will cause them render _only_ in the client.
-This can useful for components that interact directly with the DOM, such as jQuery, since they can not render on the server.
-It works similar to [`lazy`](/reference/component-apis/lazy) but will only render _after hydration_ and will never load on the server.
+The `clientOnly` function allows components or pages to render exclusively on the client side, bypassing server-side rendering (_SSR_).
+This is useful for code that relies on the browser-specific APIs, such as `window` or `document`.
-To use `clientOnly`, isolate the desired component with DOM interactions in a file:
+## How to Use `clientOnly` in Components
-```tsx
-const location = window.document.location;
+1. **Isolate Client-Only Logic**: Create a separate file for the component that depends on browser-specific features, such as DOM or browser APIs.
-export default function ClientOnlyComponent() {
- return
{location.href}
;
-}
-```
+ ```tsx title="ClientOnlyComponent"
+ export default function ClientOnlyComponent() {
+ const location = document.location.href;
+ return Current URL: {location}
;
+ }
+ ```
+
+2. **Import with `clientOnly`**: Use `clientOnly` to dynamically import the isolated component in your parent component or page.
+
+ ```tsx title="IsomorphicComponent.tsx"
+ import { clientOnly } from "@solidjs/start";
+
+ const ClientOnlyComp = clientOnly(() => import("./ClientOnlyComponent"));
-Once isolated, it can then be imported dynamically using `clientOnly`:
+ export default function IsomorphicComponent() {
+ return ;
+ }
+ ```
-```tsx
+3. **Add a Fallback (Optional)**: Provide a `fallback` prop to display content while the client-only component is loading.
+
+ ```tsx
+ Loading...} />
+ ```
+
+## Disabling SSR for Entire Pages
+
+To disable SSR for an entire page, apply `clientOnly` at the page level. This ensures the page renders only on the client.
+
+```tsx title="routes/page.tsx"
import { clientOnly } from "@solidjs/start";
-const ClientOnlyComp = clientOnly(() => import("../ClientOnlyComp"));
+export default clientOnly(async () => ({ default: Page }), { lazy: true });
-function IsomorphicComp() {
- return ;
+function Page() {
+ // This code runs only on the client
+ return Client-only page content
;
}
```
-**Note:** The `` can take a fallback prop for when it is loading.
-
## Parameters
-| Argument | Type | Description |
-| -------- | --------------- | ------------------------------------ |
-| fn | `() => Promise` | Function to be run client-side only. |
+| Argument | Type | Description |
+| --------- | -------------------------------------------------- | -------------------------------------------------------------------------------------------------------- |
+| `fn` | `() => Promise<{ default: () => JSX.Element }>` | A function that dynamically imports a component to be rendered only on the client side. |
+| `options` | `{ lazy?: boolean }` | An optional object to configure loading behavior. Set `lazy: false` for eager loading |
+| `props` | `Record & { fallback?: JSX.Element }` | Props passed to the component, including an optional `fallback` for rendering while the component loads. |