In Next.js, the more times the route is used, the slower the page becomes.
Unanswered
Brown bear posted this in #help-forum
Brown bearOP
We have a search result page and there are some filters. When the user clicks on any filter, it will change the search params accordingly. But after a few clicks, nextjs won't show any reaction to the user clicks.
It will only change the url in the address bar and nothing else happens.
Notes:
The user can try to open the URL in a new window and it will work.
The user can wait for a few seconds (usually more than 30sec) and then click again and it will work.
There are no activities on any developer console tabs while this issue happens (Network, Console, ....)
Profiler shows inactivity during the freezing phase.
I've tried several approaches which didn't resolve the issue:
Using Window.history.pushState instead of router.push
Watching for URL changes with useEffect(() => { console.info(searchParams); }, [searchParams]); This won't log any changes. It looks like that there is not any route change happening at all.
Toggling 'force-dynamic' or other dynamic features.
Toggling usage of <Suspense/>
Finally, I've utilized window.location.href as a workaround to address the issue for that page which ruin the whole point of SPA and nextjs
It will only change the url in the address bar and nothing else happens.
Notes:
The user can try to open the URL in a new window and it will work.
The user can wait for a few seconds (usually more than 30sec) and then click again and it will work.
There are no activities on any developer console tabs while this issue happens (Network, Console, ....)
Profiler shows inactivity during the freezing phase.
I've tried several approaches which didn't resolve the issue:
Using Window.history.pushState instead of router.push
Watching for URL changes with useEffect(() => { console.info(searchParams); }, [searchParams]); This won't log any changes. It looks like that there is not any route change happening at all.
Toggling 'force-dynamic' or other dynamic features.
Toggling usage of <Suspense/>
Finally, I've utilized window.location.href as a workaround to address the issue for that page which ruin the whole point of SPA and nextjs