Instant search not showing results in Next.js dev mode but works in prod mode.

[mjolnir91]

As stated in the title I get results back after making a next.js build and then doing next.js start. However, if I just run next.js dev I get no results back from algolia and I have no idea why I don't see any errors in the console.

[FilipMasar]

I am experiencing the same issue. Setting reactStrictMode: false in next.config.js solved this. But I don't understand it. Can anyone explain?

[aymeric-giraudet]

Hi @mjolnir91 and @FilipMasar,

Thank you for raising the issue. However I need some more information so we can properly investigate it.

Which versions of react-instantsearch are you using ? Could you provide a link to a reproduction, either a GitHub repo or a codesandbox ?

You can use this template to properly fill these out if you use hooks, or this one if you don't

[mjolnir91]

@FilipMasar I did exactly what you said and it fixed the issue. @aymeric-giraudet I can't link my code its protected "react-instantsearch-dom": "^6.28.0", "@types/react-instantsearch-dom": "^6.12.3", "react": "latest", "next": "latest",

package.txt

So the behavior in dev mode was I saw zero results on page load. When I load the same page in prod mode a bunch of results populated. When I walked through the debugger in dev mode it looked like it was maybe trying to pre-compile the page before the website launched so when I navigated to the page none of the hooks or queries actually ever ran it just show maybe what is a a pre computed result. So maybe it's accidentally treating it as a static page or something. I know Next.js does all sorts of black magic behind the scenes so I'm not really sure tbh. But hooks that should have fired or had values were all just null when the debugger got to the page which was odd.

[mizozobu]

Downgrading react and react-dom to 17.0.2 solved the issue for me. Maybe it's not nextjs but react 18 that is causing this? Can anyone else confirm?

I'm using

"algoliasearch": "4.14.2",
"next": "12.3.1",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-instantsearch-dom": "6.33.0",

[aymeric-giraudet]

Makes sense @mizozobu as strict mode in React 18 mounts components twice in development environment.

We took that into account for react-instantsearch-hooks-web but we haven't for react-instantsearch-dom. Note that new projects should use react-instantsearch-hooks-web as it will eventually replace react-instantsearch-dom.

I will check with the team if we plan to add support to React 18 strict mode for react-instantsearch-dom and will get back to you all !

[aymeric-giraudet]

I was able to reproduce the bug but only when not using getServerSideProps, it works fine when following this example. Were you using findResultsState in getServerSideProps ? If not I would recommend you to, it will be nicer for users and SEO.

I can also confirm that we do not plan to fix this as react-instantsearch-hooks is our main focus.

If you want to check out how to use it with Next.js, here's a guide, you'll see that it's much more straightforward than with react-instantsearch-dom !