Unnecessary client-side query with SSR

[sefai]

🐛 Current behavior

After the page is rendered server side, there is a duplicate client-side query. This is true for both doc and data requests.

🔍 Steps to reproduce

1. Go to the https://shopify-hydrogen-algolia-ff7a0d8a34696233bb09.o2.myshopify.dev/
2. Click on Men from the top navigation, the results are loaded with server side rendering and there is no client-side query.
3. Now click on Women, there is a data request(which handles SSR via the loader using getServerState) and there is also an unnecessary client side query.
4. Now refresh the browser, you will see an SSR'ed page but again another unnecessary client-side query.

Live reproduction

https://shopify-hydrogen-algolia-ff7a0d8a34696233bb09.o2.myshopify.dev/

💭 Expected behavior

There should be no client-side query at Step 3.
Also, there should be no client-side query for a page refresh at Step 4.

Package version

"instantsearch.js": "^4.56.1","react-instantsearch": "^7.5.2",

Operating system

No response

Browser

No response

Code of Conduct

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

[sefai]

I have confirmed that this is not related to Remix, Next.js versions also have the same behaviour.

[neehhaa06]

Check for Edge Runtime: Ensure you're not deploying to Edge Runtime; use Node.js runtime instead.

[aymeric-giraudet]

Hi @sefai, it should be fixed with this : #6275

About the 3rd point though, ideally the loader should not run (except if you do need to react to parameters change on the server), as it's better to hit Algolia endpoints directly from the browser when rendering client-side.

I don't know if there's a way to either tell Remix not to call them, or if it does get called then if it's not an initial request you could skip the call of getServerState.

You can open another issue if you're still running into trouble with this.

[sefai]

Thank you @aymeric-giraudet ,

How can I test the master branch, is there an npm package for that.

For the second part, for each HierarchicalMenu refinement I have a SEO path, so I need that path from the server with other path related data not present on algolia indexes.

By the way I switched to Next.js, because somehow the same Remix app's CPU usage is way higher than Next.js on cloudflare, I am not sure if it is related to InstantSearch but right now the page only has InstantSearch components.

[Haroenv]

is there an npm package for that

you can follow these instructions: https://ci.codesandbox.io/status/algolia/instantsearch/pr/6275/builds/521243

[sefai]

Hello @Haroenv,

I have tried with the following packages, but the results are the same. Did you tried this fix with a HierarchicalMenu having more than one levels?

"instantsearch.js": "https://pkg.csb.dev/algolia/instantsearch/commit/ca700da2/instantsearch.js",
"react-instantsearch": "https://pkg.csb.dev/algolia/instantsearch/commit/ca700da2/react-instantsearch",
"react-instantsearch-nextjs": "https://pkg.csb.dev/algolia/instantsearch/commit/ca700da2/react-instantsearch-nextjs",

[aymeric-giraudet]

Hi @sefai, there is indeed a problem when selecting a nested hierarchical menu attribute, due to an explicit facetFilters: undefined in one of the requests :/

I will publish another fix for that but can you try to do JSON.parse(JSON.stringify(serverState)) in your loader and see if it is indeed the issue ?

[sefai]

Hello @aymeric-giraudet

Unfortunately I switched to Next.js, I am using react-instantsearch-nextjs.

[sefai]

Hello @aymeric-giraudet

I still see the client-side query and a new hydration error. As you can see from the record below the root menu count changes 3 times. I am not sure if the additional fetch is caused by the hydration error.

Screen.Recording.2024-07-11.at.17.17.58.mov

If I set persistHierarchicalRootCount to false the counts stay the same for each hierarchical menu item, but the fetch and errors does not go away.

Uploading Screen Recording 2024-07-11 at 17.26.24.mov…

[aymeric-giraudet]

Hi @sefai, are you trying with this commit : #6283 ?
This time the fix is on the algoliasearch-helper package which is a dependency though, maybe you can try to patch it directly in your node_modules with the diffs from this commit and see.

[sefai]

Hello @aymeric-giraudet, sorry I missed that, by patching the algoliasearch-helper package, I can confirm the additional client-side query is fixed by #6283.