Getting headers inside of an SSR component

[undone basin]

import { useEffect, useState } from "react";

export function useShortcutKey() {
  const [shortcutKey, setShortcutKey] = useState("Ctrl");

  useEffect(() => {
    const isMacOs = !!navigator?.userAgent?.match(/Macintosh;/);
    setShortcutKey(isMacOs ? "⌘" : "Ctrl");
  }, []);

  return shortcutKey;
}```is there a way to support this as an ssr component?

[vapid herald]

You can get user agent from request header from the server

import { createIsomorphicFn } from '@tanstack/react-start';

const getUserAgent = createIsomorphicFn()
  .client(() => navigator.userAgent)
  .server(() => getRequestHeader("user-agent"))

export function useShortcutKey() {
  const [userAgent] = useState(getUserAgent);

  return !!userAgent?.match(/Macintosh;/) ? "⌘" : "Ctrl";
}

pardon me, I missed putting import { getRequestHeader } from '@tanstack/react-start/server' in my code