clientOnly

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, such as Web3 interactions (like window.ethereum for Ethereum-based dApps) or IndexedDB for client-side storage.

How to Use clientOnly in Components

1. Isolate Client-Only Logic: Create a separate file for the component that depends on browser-specific features, such as DOM or browser APIs.

   // ClientOnlyComponent.tsx
   export default function ClientOnlyComponent() {
     const location = document.location.href;
     return <div>Current URL: {location}</div>;
   }

2. Import with clientOnly: Use clientOnly to dynamically import the isolated component in your parent component or page.

   // IsomorphicComponent.tsx
   import { clientOnly } from "@solidjs/start";
   
   const ClientOnlyComp = clientOnly(() => import("./ClientOnlyComponent"));
   
   export default function IsomorphicComponent() {
     return <ClientOnlyComp />;
   }

3. Add a Fallback (Optional): Provide a fallback prop to display content while the client-only component is loading.

   <ClientOnlyComp fallback={<div>Loading...</div>} />

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.

// for example routes/page.tsx
import { clientOnly } from "@solidjs/start";

export default clientOnly(async () => ({ default: Page }), { lazy: true });

function Page() {
  // This code runs only on the client
  return <div>Client-only page content</div>;
}

Parameters