Tanstack/Start: options to handle client side code in a SSR world

[TheSisb]

I've been working with the new Start framework for a few days now while I love it, a painful aspect is dealing with client-side code.

In some cases, I can wrap a component (like plotly.js) with a useEffect hook like this:

  const [mounted, setMounted] = React.useState(false);
  React.useEffect(() => {
    setMounted(true);
  }, []);
   
 if (!mounted) return null;
 return <Plotly ... />

In other cases, merely importing a library causes the app to crash because that library depends on something like web workers which don't exist in Node. I'm exploring code like this to work around it:

const useClientSide = (path: string, ssrValue: any) => {
  const [module, setModule] = useState(ssrValue);

  useEffect(() => {
    import(path).then((mod) => {
      setModule(mod.default || mod);
    });
  }, []);

  return module;
};

I love the SSR and don't want to stop using it, however I feel like we can maybe make client-side less painful as well. Some ideas I had:

• Allow some setting in ssr.tsx to force client-side a component via path like: clientOnly: ['./app/components/blah.tsx', '@deck.gl/core']. This can cause layout shift, but that might be fine.
• Tap into the router to set routes that are SPA and others that are SSR. This is kinda cool with nested routes, you can get really close to the component level.
• Something like use client;? https://react.dev/reference/rsc/use-client
• (probably a bad idea) The framework can automatically shim browser features on Node to make things "just work".

Any advice or thoughts on how to deal with these issues on a per case or framework level is appreciated!