Closed kachkaev closed 3 months ago
Looks like I have found a workaround. It might be good enough for most people before the issue is fixed in Next.js itself:
https://github.com/kachkaev/next-js-search-params-mismatch-mwe/pull/1
https://github.com/vercel/next.js/assets/608862/5bf13cfb-6176-4b8f-aaee-c23954fa2423
Experiencing this issue as well.
The search params are in sync up until you navigate to the page without any search params.
Discovered this issue too, and made a clickable minimal reproduction here: https://nextjs-queryparams.vercel.app/
Source: https://github.com/samburgers/nextjs-queryparams/blob/main/app/page.tsx
Ahh, we've also hit this one after a major leap from 14.1.x to 14.2.x territory.
Same issue reported here: https://github.com/vercel/next.js/issues/65030
@balazsorban44 - sorry for pinging you, but do you think you could drop some thoughts on this issue?
Another update, it might just be a coincidence, but changing staleTime dynamic to zero, seems to do the trick...
Perhaps the introduction of staleTimes, causes this issue?
@ztanner Hi, sorry for pinging you on this one, ~in all honesty I haven't tested this issue in the canaries released this past week~, but would you mind investigating what's going on here? Is it expected behavior, or has a bug indeed been introduced?
Next.js 14.3.0-canary.70 still reproduceable
I think the links here, https://github.com/vercel/next.js/issues/64170#issuecomment-2078197117, are pretty much all you need to see the issue.
@kachkaev @icyJoseph Just tested next@14.3.0-canary.73
, and it seems to be fixed! Please note that next@canary
currently requires the react@canary
as well :)
This is brilliant, many thanks @devjiwonchoi 👏
Fantastic! Also verified this on a couple of project now. Awaiting a new release now.
This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.
Link to the code that reproduces this issue
https://github.com/kachkaev/next-js-search-params-mismatch-mwe
To Reproduce
Clone reproduction repo, run
pnpm install
andpnpm dev
(orpnpm build; pnpm start
).Navigate to http://localhost:3000/?a=1&b=3 in a new tab. Observe this page (no issues so far):
Click on
<Link />
components at the bottom of the page, observe changes in displayed values fora
andb
. All good still.https://github.com/vercel/next.js/assets/608862/996ad1dc-442b-48d4-b08d-01251bac21b3
Navigate to a link that takes you to
/
, i.e. that unsets botha
andb
.Current vs. Expected behavior
Observed state
❌
searchParams
inpage.tsx
is equal to the original value (the one we saw on initial page load). ✅useSearhParams()
returns correct values fora
andb
.Expected state
Both sources of
searchParams
should be in sync (which can be observed after full page reload):Provide environment information
Which area(s) are affected? (Select all that apply)
App Router
Which stage(s) are affected? (Select all that apply)
next dev (local), next start (local)
Additional context
If all initial page query params are unset, the bug does not manifest itself. So it’s important to start with something like http://localhost:3000/?a=1&b=3 and not just http://localhost:3000.
This bug has implications on pages like e-commerce catalogs which can be filtered. Imagine someone sends you a link to
https://example.com/products?category=shoes&color=red
You’ll see filter controls in the UI and start clicking: ↓ https://example.com/products?category=shoes&color=green ↓ https://example.com/products?category=tshirts&color=green ↓ https://example.com/products?category=tshirts ↓ https://example.com/products?category=tshirts&color=red ↓ ...
As long as there is at least one query param in the URL, all works well. But as soon as you navigate to no filters, the catalog will look broken. The URL will be https://example.com/products but the content will be for
?category=shoes&color=red
(the initial state of the app router). The only way to see the whole catalog will be to refresh the page.