How would you make other hooks work with InstantSearchSSRProvider and Next.js?

[landermedia]

I've been really scratching my head over this as I couldn't make things other things such as other React context's. Here's a demo of InstantSearchSSRProvider with next-auth but I get an error such below

I also did tried to use a separate ChildComponent class as seen in index2.tsx but to no avail. Forgive my inexperience but you could point me in the right direction here if this isn't a bug? Thanks!

PS: I've got more other hooks that seems to not recognize the context anymore in the real project where I encountered this issue. If I remove the getServerSideProps, everything works well.

[Haroenv]

The component you're passing to getServerState needs to be standalone. If your application can't rely on making that context optional, by using a fallback for useSession for example, what you can do is take only the InstantSearch widgets that will be mounted, create a new component for it and render that:

function AppForSSR() {
  return <InstantSearchSSRProvider ...>
    <SearchBox />
    <RefinementList />
    ...


getServerState(<AppForSSR />)

[landermedia]

Thank you @Haroenv for your prompt response. I'll get back to you on this as soon as I can try your suggestion.