How to handle components that require client's data in SSR? | Remix | Page 1

export default function Header() {
  const [isClient, setIsClient] = React.useState(false);

  useEffect(() => {
    setIsClient(true);
  }, []);

  if (!isClient) return <HeaderSkeleton />;

  return <GlobalHeader searchConfig={{}} />;
}```
I'm trying to load this Header on server, but, component GlobalHeader has a hook that uses window object. It would be easy if I could open GlobalHeader file and edit it's code, but it comes from a installed package, so I cant really go to node modules files and edit it...

I found above solution with useState, but it doesn't feel right... Is there something better?

Also, chatgpt gave me a solution that works I guess, but I have no clear idea whats going on and I couldn't find any resources so I can learn this. But basically, chatgpt changed defineConfig function vite.config.ts  to this:
```ts
export default defineConfig({
  plugins: [tailwindcss(), reactRouter(), tsconfigPaths()],
  resolve: {
    alias: {
      "@react-hook/resize-observer": path.resolve(
        __dirname,
        "app/shims/resize-observer.ts"
      ),
    },
  },
  ssr: {
    noExternal: [
      "",
      "",
    ],
  },
});```
"resize-observer.ts" is a hook from GlobalHeader but, it's SSR optimised
#How to handle components that require client's data in SSR?
