Client

clientOnly

将组件包装在 clientOnly 中会使其仅在客户端渲染。这对于直接与 DOM 交互的组件（如 jQuery）非常有用，因为这些组件无法在服务器端渲染。它的工作方式类似于 lazy，但只会在水合完成后渲染，且永远不会在服务器端加载。

要使用 clientOnly，请将需要进行 DOM 交互的组件隔离到一个文件中：

const location = window.document.location;

export default function ClientOnlyComponent() {
  return <div>{location.href}</div>;
}

隔离后，可以使用 clientOnly 动态导入该组件：

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

const ClientOnlyComp = clientOnly(() => import("../ClientOnlyComp"));

function IsomorphicComp() {
  return <ClientOnlyComp />;
}

注意： <ClientOnlyComp /> 可以接受一个 fallback 属性，用于加载时显示。

参数

参数	类型	描述
fn	`() => Promise`	仅在客户端执行的函数。

报告此页面问题