How to handle user session information with SSR? How to get session details in component when doing SSR?

[AndrewRayCode]

I have a header component in my app:

import { useSession } from 'next-auth/react';

const Header = () => {
   const session = useSession();
   return (<div>{session.user.name}</div>);
}

I'm using SSR, standard modern practice for fast applications. However useSession() returns null for the server render of this component, so the page first renders without the user's name in the header, then the client re-renders, causing a flash to show the name. It's jarring.

We can't call hooks conditionally, otherwise I could do something like

const session = typeof window === 'undefined' ? useServerSession() : useSession();

And you can't call both because the server one barfs in the client

  const { data } = useSession();
  const maybeServerSession = getServerSession();

Error: Invariant: Method expects to have requestAsyncStorage, none available

I have a bad hack workaround solution to wrap every getServerSideProps with a higher order function that reads the session user, injects it into the SSR props, and then I wrap every client component with a HOC that provides this session user prop to a context provider, so components like the Header can read it from context, injected into SSR props. But all I'm trying to do is read the session in a way that supports SSR, so this is a really heavyweight hoop to jump through.

I assume this issue is dependent on getting cookies in the component at SSR render time in React, which I'm not sure if it's possible?

[musjj]

Did you manage to solve this? I considered using https://github.com/moshest/next-client-cookies, but I'm not sure how to make it work with Auth.js.

[AndrewRayCode]

I never found a first class solution. I instead created a helper function to wrap every getServersSideProps call to inject it into context. I tried writing that up https://gist.github.com/AndrewRayCode/1f530e6f3e4f6d47535227b343853568

No idea if there's a better way, this works for me for now. If you're not using getServersSideProps then obviously this specific gist won't work.