Unable to render hooks nested inside InstantSearchSSRProvider 🙏

[Jezfx]

Any help with this would be HUGELY appreciated. I've been super blocked by this 🙏 thank you!

I'm trying to get SSR to work with next. I've been able to follow the official next example and everything works ok until I add a hook into the mix.

For our app we—effectively—need make a call to react-query inside the product card. However, what seems to happen is when InstantSearchSSRProvider is rendering it on the server it's unable to wrap that hook with QueryClientProvider in _app.js.

This is the error I'm getting:

To replicate

1. just uncomment the call to useQuery on line 33 in pages/index/tsx

Codesandbox

This is a the cloned next example. I've just added a QueryClientProvider in _app and also a call to useQuery inside of the Hit component.

Please would anyone be able to help, thank you so much!

[Haroenv]

For the render done by getServerState, you only need to know what InstantSearch widgets are rendered. Any conditionals used by other parts of the apps, hooks, requests etc. that don't change which widgets mount are not needed.

Two workarounds are possible:

1. make a stripped down version of your InstantSearch app, and pass only that to getServerState
2. make the useQuery conditional based on serverUrl or another prop that you know is only passed in getServerState

[Jezfx]

@Haroenv thank you for your reply!

From what your saying, I understand that we should ideally only be wrapping Algolia widgets inside of the InstantSearch Component.

What we were hoping to do is wrap the whole _app InstantSearch and the InstantSearchSSRProvider search so that separate components (shop and the sidebar) can both use hooks to pick up things like active refinements (for active filters) and hits for the products etc...

┌───────────────────────────────────────────────────────────────┐
│                         InstantSearch                         │
├───────────────────────────────────────────────────────────────┤
│  ┌──────────────────────────┐ ┌──────────────────────────┐    │
│  │     Filters Sidebar      │ │           Shop           │    │
│  ├──────────────────────────┤ ├──────────────────────────┤    │
│  │                          │ │                          │    │
│  │ useCurrentRefinements()  │ │        useHits()         │    │
│  │                          │ │                          │    │
│  │                          │ │                          │    │
│  └──────────────────────────┘ └──────────────────────────┘    │
└───────────────────────────────────────────────────────────────┘

Is that not possible with SSR?
thanks again! 🙏

[Haroenv]

Yes, that is possible, but you'd have to make sure your entire app is renderable when you pass it to getServerState, and thus has no calls to useQuery for example.

What you could do, to still ensure everything working with both the global setup and app to find the server state, is to split up into two different components:

// InstantSearch-implementation.tsx

// implement and export all InstantSearch widgets here, so they are colocated
// use this also in your real application

function MockApp() {
  return (
  <InstantSearch>
  {/* render all components using InstantSearch */}
  </InstantSearch>
  )
}

// use <MockApp /> in getServerState

[Jezfx]

@Haroenv thank you! I understand what you mean. I've updated the Codesandbox with the changes that you suggested and its working now! I'll leave the link below incase it helps anyone else. Many thanks!

Codesandbox link