如何在QWIK中创建非序列化函数以避免自动序列化并优化性能

要在Qwik中阻止特定函数被序列化，同时保证功能和性能，核心是利用Qwik提供的序列化控制选项，让不需要在服务器端序列化的函数仅在客户端初始化，避免不必要的代码下载。针对你的场景，有两种高效的实现方式：

1. 给$()添加ssr: false选项 #

Qwik的$()包装器默认会将函数序列化到服务器输出的HTML中，用于客户端恢复。如果你的函数仅处理客户端交互（比如搜索按钮的点击事件），可以通过{ ssr: false }选项告诉Qwik不要序列化这个函数：

修改你的handleSearch函数：

const handleSearch = $(async () => {
  if (product.value.length !== 0) await nav(`/?page=1&categoryType=NEW&filter=${product.value}`);
}, { ssr: false });

为什么有效： #

• 这个函数不会被序列化到服务器的HTML payload中，直接减少了下载体积，避免延迟。
• 函数只会在客户端组件挂载时被创建，完全不影响客户端的交互功能——因为点击事件本来就只会在客户端触发。
• 保留了Qwik的自动跟踪能力，函数内部依赖的product.value和nav依然能被Qwik正确追踪，不会影响响应式功能。

2. 使用useVisibleTask$定义仅客户端执行的函数 #

如果你的函数完全不需要和服务器端有任何关联，也可以用useVisibleTask$在客户端组件可见时定义函数，再绑定到事件上：

export const ProductFinder = component$(() => {
  const product = useSignal<string>("")
  const nav = useNavigate();
  useStylesScoped$(styles);

  // 用ref存储函数，避免每次渲染重新创建
  const handleSearch = useRef<() => Promise<void>>();

  useVisibleTask$(() => {
    // 仅在客户端创建函数
    handleSearch.current = async () => {
      if (product.value.length !== 0) await nav(`/?page=1&categoryType=NEW&filter=${product.value}`);
    };
  });

  return (
    <div class="form">
      <input type="text" class="input" placeholder="Buscar productos" value={product.value} onInput$={(event) => (product.value = (event.target as HTMLInputElement).value)} />
      <button class="button" onClick$={() => handleSearch.current?.()} aria-label='Search'>
        <SearchNormalIcon size='100%' />
      </button>
    </div>
  )
});

适用场景： #

• 函数依赖客户端特有的API（比如window、document），完全不需要在服务器端执行。
• 希望更明确地隔离客户端逻辑，避免服务器端不必要的函数处理。

注意事项 #

• 不要给需要在服务器端执行的函数添加ssr: false（比如useServerAction$相关的函数），否则会导致服务器端逻辑失效。
• 两种方式都不会影响Qwik的响应式跟踪：函数内部的product.value依然会被正确监听，状态变化时能正常触发逻辑。

内容的提问来源于stack exchange，提问作者David Pino