In production nextjs searching is not working in mobile browser until manually refresh the browser?

[oblique fulcrum]

this is nextjs official documentation project code segmant and it working on laptop but mobile browser it's not working I have to manually refresh browser 1 time in mobile then it start to working how to fix please help

const handleSearch = useDebouncedCallback((term) => {
console.log(Searching... ${term});
const params = new URLSearchParams(searchParams);
params.set("page", "1");
if (term) {
params.set("query", term);
} else {
params.delete("query");
}
replace(${pathname}?${params.toString()});
}, 500);

[weary mango]

Hi @oblique fulcrum. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

Based on the knowledge sources provided, there seems to be a known issue in Next.js related to search params and mobile browsers. While the exact cause of your specific problem isn't directly addressed, there are a few relevant points and potential workarounds that might help:

1. Search params discrepancy: There's a reported issue where search params can become out of sync between the server and client components after navigation, especially when removing all search params. This could potentially explain why a refresh is needed on mobile. Github Issue: Discrepancy in searchParams between server and client after clicking Link

2. PPR (Partial Prerendering) impact: Some users have reported issues with search params not working correctly after reloading when PPR is enabled. This might be related to your mobile browser issue. Github Issue: (PPR) searchParams not work after reloading

3. Potential workaround: One user suggested a workaround that might help in your case. Instead of using params.delete("query"), try setting an empty string:

   if (term) {
     params.set("query", term);
   } else {
     params.set("query", ''); // Instead of params.delete("query")
   }
   

   Github Issue: Page won't rerender when initial searchparam is removed

4. Router refresh: If the issue persists, you might try adding a router.refresh() call after pushing the new URL:

   replace(`${pathname}?${params.toString()}`);
   router.refresh();
   

   This was mentioned as a potential workaround in one of the issues.

5. Check Next.js version: Ensure you're using the latest stable version of Next.js, as some search param-related bugs have been fixed in recent releases.

If these suggestions don't resolve the issue, you might want to create a minimal reproduction of the problem and report it on the Next.js GitHub repository, as it could be a new or unresolved bug specific to mobile browsers.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: