Next.js 13：如何在服务器组件中使用自定义Hook？

需求背景 #

我需要从服务器组件获取数据，再通过自定义Hook将数据存入localStorage。编写了useSettings自定义Hook，想在服务器组件Pages调用setSettings拿到数据后，用这个Hook把数据存进localStorage。

现有代码与报错 #

Pages服务器组件代码 #

export default async function Pages({
  searchParams,
}: {
  searchParams: { [key: string]: string | string[] | undefined };
}) {
  const headersList = headers();
  const settings = await setSettings({ host: headersList.get('host') });

  const clientSettings = useSettings()

  return <div className="text-lg font-bold">HELLO WORLD</div>;
}

运行时错误 #

_shared_hooks_useSettings__WEBPACK_IMPORTED_MODULE_3___default(...) is not a function

useSettings客户端代码（当前是组件，不是标准Hook） #

'use client';

export default function useSettings() {
    console.log(window.location)
    console.log("HELLO")

    return <div className=""></div>
}

我清楚错误原因：Page是服务器组件，会把useSettings()识别为服务器函数，但它实际是客户端组件，导致调用失败。

临时解决方案（不够优雅） #

export default async function Pages({
  searchParams,
}: {
  searchParams: { [key: string]: string | string[] | undefined };
}) {
  const headersList = headers();
  const settings = await setSettings({ host: headersList.get('host') });

  return (
    <div className="text-lg font-bold">
      HELLO WORLD
      <div className="hidden">
        <UseSettings settings={settings} />
      </div>
    </div>
  );
}

请问有没有更优雅的方法在服务器组件中嵌入可正常工作的客户端自定义Hook？

正确解决方案 #

1. 将useSettings改为标准自定义Hook #

你的useSettings当前是客户端组件，不符合Hook的定义。修改为专注逻辑处理的纯Hook：

'use client';

import { useEffect } from 'react';

// 接收服务器传递的settings，存入localStorage
export default function useSettings(settings: Record<string, any>) {
  useEffect(() => {
    if (settings) {
      localStorage.setItem('app-settings', JSON.stringify(settings));
    }
  }, [settings]);
}

2. 创建客户端组件作为Hook载体 #

服务器组件无法直接调用客户端Hook，需要通过客户端组件作为中间层：

'use client';

import useSettings from './useSettings';

interface SettingsPersisterProps {
  settings: Record<string, any>;
}

export default function SettingsPersister({ settings }: SettingsPersisterProps) {
  // 在客户端组件内部调用Hook
  useSettings(settings);
  
  // 无需渲染UI，直接返回null
  return null;
}

3. 在服务器组件中引入客户端组件 #

现在可以直接在服务器组件中引入这个客户端组件，传入获取到的settings：

export default async function Pages({
  searchParams,
}: {
  searchParams: { [key: string]: string | string[] | undefined };
}) {
  const headersList = headers();
  const settings = await setSettings({ host: headersList.get('host') });

  return (
    <div className="text-lg font-bold">
      HELLO WORLD
      {/* 直接引入，无需隐藏元素 */}
      <SettingsPersister settings={settings} />
    </div>
  );
}

方案说明 #

• 符合Next.js架构设计：服务器组件负责数据获取，客户端组件处理客户端专属逻辑（如操作localStorage）。
• 标准Hook专注逻辑，客户端组件作为载体，职责清晰，代码更简洁优雅。

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