View event duplicating when using Nextjs SSR and custom routing + Hits component rerendering after upgrading from 7.5.0 > 7.8.0

[Ali-hd]

Hi all, hope you're doing well

I need some help with this matter, I have been trying to find a solution to this since last week with no luck.

Basically I have a use case where the user can navigate to the search category from a different page (not search page). Once you navigate from outside to the search page the insights view event gets triggered many times.

I found that this only happens when I am using a custom routing.
Or I can keep the custom routing but remove the "Stats" component and the "NoResultsBoundary" component. But that's not a solution for me.

Steps to reproduce
1- Go to the base/home page "/"
2- Keep the console open and Click on one of the categories
3- Observe the console log for the duplicated view event

I am also facing another issue after updating from version 7.5.0 > 7.8.0
The product cards are rerendering which is causing my Images to flicker a lot.

Steps to reproduce
1-Open the search page "/search"
2- Navigate between pages using the below pagination or navigate through categories and subcategories
3- Observer how the product card images are flickering because the Image onLoad method is being triggered many times

Live reproduction:
https://codesandbox.io/p/github/Ali-hd/Demo-bug/main?import=true

I would really appreciate the help 🙏, let me know If something isn't clear

[aymeric-giraudet]

Hey @Ali-hd,

Thanks a lot for the detailed reproduction, this made us identify the issue easily 🙏

I've opened a PR which should fix your 2nd issue : #6191

You may test it beforehand to see if it works for you ! (still looking at the first issue)

[aymeric-giraudet]

Got an answer for the 1st issue @Ali-hd :

Part of it is due to URL parsing, when doing client-side rendering, for example when going on the Audio category, it sends a request ending with Audio.json, and the category is parsed as is, making a request for Audio.json which of course won't yield any hits.

I found that if you add .replace('.json', '') inside getCategoryName in routing.ts L52, we now see the event gets usually sent once only (except for the Camera route though, but I'm sure you can figure it now). Basically you have to make sure the *.json request does contain the hits it should have.

Now the only problem left is that it sometimes does send it twice, which I believe is due to some racing issues on our end, I'll keep you updated !

[Ali-hd]

Hey @aymeric-giraudet, I'm glad I can be of help.

The PR #6191 does indeed fix my 2nd issue ✅

As for the 1st issue, after adding what you suggested. The duplicated view events are greatly reduced thanks. Also after removing the component that uses the "useHits()" hook. There are no more duplicated view events. So I am guessing it is something at your end, please keep me updated 🙏

I would like to confirm whether it is Okay that I am receiving some hits within the *.json request, and then seeing another request for queries that contains the same hits I received from .json request. I'm concerned that this is an unnecessary second request. Could you please clarify if this is the intended behavior or if there is a way to optimize the process and avoid redundant requests?
(This is when navigating from home to search after clicking on a home category)

[Ali-hd]

I will close this for now and create another question just for regarding duplicated events/queries