NextJS13 — Как я могу использовать пользовательский хук в серверном компоненте?

Question

Моя цель - получить некоторые данные из серверного компонента, а затем использовать хук для сохранения этих данных в локальном хранилище. Я сделал специальный хук, который сохраняет данные в локальном хранилище после серверного компонента.Pagesполучает данные отsetSettingsфункция.

      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

Вот как выглядит мой компонент хука:

      'use client';

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


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

Я так понимаю, эта ошибка возникает из-за того, что серверный компонент читаетuseSettings()как серверная функция, но посколькуuseSettingsявляется клиентским компонентом, нет возможностиPageКомпонент найдет его.

Есть ли способ встроить работающий настраиваемый компонент клиентского хука внутрь серверного компонента?

РЕДАКТИРОВАТЬ: это рабочий обходной путь. Поскольку все, что находится внутри оператора return, в конечном итоге выдает его на стороне клиента, это работает. Но это некрасиво, и я уверен, что есть лучший способ

      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>
  );
}