[react-instantsearch-nextjs] Duplicate server state script tag in initial DOM

[fmacherey]

🐛 Current behavior

We are using react-instantsearch-nextjs in our project.

We having two instances of <InstantSearchNext /> accros our projects (for the result page items and the search box itself). This lead to two script tags with the server state. As the correct one comes afterwards, the value is correctly applied.

🔍 Steps to reproduce

Having two instances of <InstantSearchNext /> in the project

Live reproduction

example.com

💭 Expected behavior

• only one server state script tag

Package version

"react-instantsearch": "7.24.0", "react-instantsearch-nextjs": "1.0.15",

Operating system

macOS

Browser

Chrome

Code of Conduct

• I agree to follow this project's Code of Conduct

[Haroenv]

I recommend you only use one InstantSearchNext instance for both the search box and the results. You can do this by hoisting the InstantSearchNext higher in your app or using portals for rendering the search box.

[fmacherey]

Hey @Haroenv - i gave it a try but seems to not work for my usecases.

[Haroenv]

You'll have to create a minimal reproducible example for us to help you

[aymeric-giraudet]

@fmacherey

Did you try the instance option ? You can check out its usage here https://www.algolia.com/doc/api-reference/widgets/instantsearch-next/react#param-instance

[fmacherey]

@aymeric-giraudet yes, i used this already.