NextJs APP router instantsearch hooks rendering problem

[Wesley Janse]

🐛 Current behavior

Using the experimental InstantSearchNext, I sometimes seem to get weird behaviour during rendering. In which not all of the content is directly rendered from the server, you will always see a flash of no content, followed by the hits rendering and then the refinements rendering, which gives a lot of CLS.

There is a codesandbox setup below, which reproduces the issue.

Video as proof of result:
https://github.com/algolia/instantsearch/assets/38532331/31dfcc65-1040-4c7a-ad32-e3408f55947d

🔍 Steps to reproduce

1. Go to the live codesandbox example
2. Press a brand page
3. Go back
4. Press another brand page
5. Notice that the layout is jumping around and not everyting is rendered correctly at the same time.

Live reproduction

https://codesandbox.io/p/sandbox/dank-hooks-t4w5d8

💭 Expected behavior

All content is SSR'd correctly.

Package version

"react-instantsearch": "^7.2.0",   "react-instantsearch-nextjs": "^0.1.2", 

Operating system

No response

Browser

No response

Code of Conduct

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

[Alexandre Phiev]

I can confirm a similar behavior when refining the results. For me, it almost always jumps back to default unrefined results. Is that the same for you? My searchClient is properly defined outside the component.

Using the react-instantsearch-router-nextjs like so:

<InstantSearch
      searchClient={searchClient}
      indexName={index}
      insights={false}
      future={{
        preserveSharedStateOnUnmount: true,
      }}
      routing={{
        router: createInstantSearchRouterNext({ singletonRouter }),
      }}
    >
      <SearchView />
</InstantSearch>

[Matheus Verissimo]

I'm facing the same problem, using hooks and components that depend on the context, eg: auto-complete-core, useSearchBox, useDynamicWidgets etc.

[Wesley Janse]

I have solved the initial loading issues/flickering, using "VirtualWidgets", for the dynamicWidgets. But I don't know if this has any downsides looking at requests, since I'm instantiating a virtual widget and a real widget for the refinementlits and dynamicwidgets.

[Matheus Verissimo]

@wesleyjanse this approach doesn't have any downside(I think), do you have a sandbox with your solution?

[Wesley Janse]

I need to free up some time for it, pretty stacked for now on work..

But i just created some virtual widgets, that use the hooks and return null.

And then imported those in the HOC. Seems to solve these issues for me.

[Aymeric Giraudet]

Hi @wesleyjanse,

When you are navigating, the rendering is done client-side, you can check in the network tab it does not request documents and no HTML is received from the server.
This is normal for CSR to flicker as queries are being made, React InstantSearch's default example does it

We would need to see with Next.js if it's possible to force server-side rendering on navigation, or perhaps for a way to transition only when requests are done

[Matheus Verissimo]

Hi @aymeric-giraudet you're right, this is expected behavior in CSR environment, but not in SSR(is my case), right?