Server rendered empty search results in nextjs App router project using experimental server rendering package

[PaulWild]

Hi,

We are currently using the experimental nextjs package to do server side rendered search results. https://www.algolia.com/doc/guides/building-search-ui/going-further/server-side-rendering/react/#app-router-experimental. As part of out solution we have an empty results boundary as described in https://www.algolia.com/doc/guides/building-search-ui/going-further/conditional-display/react/#handling-empty-queries.

There is a slight issue where when server rendering, if there are no results it will render the empty hits component on the server and then when the client hydrates switches to showing our user defined fallback.

I assume that useInstantSearch is the thing at issue, with it not having the data on the server to know to render the fallback page.

My question is, is there another way of getting the fallback functionality to work on the server in this situation?

[Haroenv]

Do you have a reproduction? it's likely related to conditionally rendering widgets when there are no results, thus not in server side rendering either

[PaulWild]

Thanks for the reply, here is a minimal reproduction: https://github.com/PaulWild/NeResultsAlgoliaExample/tree/main

I haven't committed any index keys or names, but it should be reproducable against any index.

Expected:

• navigate to localhost:3000?term=notInIndex
• You just see the no results boundary ie: No results found

Actual

• navigate to localhost:3000?term=notInIndex
• Flash of results page (so you see in this example These are the results:
• Then you see the no results boundary

[jpedroschmitz]

I'm having the same issue, and I can't find a way to fix it.

This looks like an issue with the package. I followed the docs and ended up having it as well.

If you have any insights, @Haroenv, I'd love to hear them.