react-instantsearch-nextjs: <SearchBox /> outside <InstantSearchNext />

[pepew-le-boss]

I'm implementing react-instantsearch-nextjs in my NextJS14 app (with app router).

Starting from the official NextJS Algolia example and little by little matching the code inside with the one of my app.

Overall everything is working fine expect one thing: When trying to put the <SearchBox /> inside my header thus outside the original <InstantSearchNext />, I need to wrap the <SearchBox /> inside another <InstantSearchNext /> causing an hydration error.

What I don't want to do is wrap my whole app layout inside a single <InstantSearchNext /> because it will cause all of my components to be client components.

So I'm about to create a <CustomSearchBox /> that has nothing to do with algolia and get the query from url and set the query not using a refine() but a router.push(). This way of dealing with the problem should be working but feels hacky.

Is there a better way of handling that ?

[Haroenv]

I'm not sure if that's compatible with RSC or your app, but have you considered React Portals? In the past this solution has worked well for putting components in the header.

One thing we don't have is instantiating the InstantSearch once and then passing that to multiple providers. This is possible in theory, but I'm not sure how it could be done practically with a nice API. You could probably imagine creating the InstantSearch instance (inside the InstantSearch component, useInstantSearchAPI private hook return value), then passing that to the private InstantSearch providers etc. If you're interested in exploring that, that would be interesting

[pepew-le-boss]

I've been searching the instantsearch repository and more precisely these 2 files, trying to understand how to use the useInstantSearchApi():

• InstantSearchNext.tsx
• InstantSearch.tsx

Even though I kind of understand how everything is working, the implementation itself is too complex for me to create a custom instantiable <InstantSearch /> component.

Anyway thank you for your help but i think I'll wait for an update that will let us do that rather than me doing some dodgy things

[Haroenv]

Just to put your expectations in the right place, we haven't had many requests for this, and thus haven't spent a lot of effort finding the right approach for "split" InstantSearch applications.

I understand that you don't want to continue investigating further of course.

An easier (temporary) solution is having the header state in a common component and digging the state up and down to both your header and a SearchBox or Configure component in the InstantSearch section.

[pepew-le-boss]

Ok it's sad to hear that you had not many requests for such a feature.
I guess people don't care having their whole app wrapped in a client component or maybe they don't even realise it.

I was about to implement a solution like this but getting the query from url and setting the query with a router.push() in my <CustomSearchBox /> in working well so I'll stick to that for now.