clientOnly

clientOnly wraps an async component import and renders a fallback on the server.

Import

import { clientOnly } from "@solidjs/start";

Type

function clientOnly<T extends Component<any>>(
  fn: () => Promise<{ default: T }>,
  options?: { lazy?: boolean }
): (props: ComponentProps<T> & { fallback?: JSX.Element }) => any;

Parameters

fn

• Type: () => Promise<{ default: T }>
• Required: Yes

Function that imports the client component.

options

• Type: { lazy?: boolean }
• Required: No

Loading options. A truthy lazy defers the import to the returned component.

Return value

• Type: (props: ComponentProps<T> & { fallback?: JSX.Element }) => any

Returns a component for the imported default export.

Behavior

• On the server, the component renders props.fallback.
• The client loads fn immediately unless lazy is set.
• fallback is split from the remaining props before the loaded component renders.

Examples

Basic usage

import { clientOnly } from "@solidjs/start";

const Map = clientOnly(() => import("./Map"), { lazy: true });

export default function Page() {
  return <Map fallback={<p>Loading map...</p>} />;
}

Related

• Routing