window.history.pushState does not work with transitions

[arackaf]

Link to the code that reproduces this issue

https://github.com/arackaf/react-query-rsc-blog-post/blob/special/push-state-with-transition/src/app/components/BookSearchForm.tsx#L23

To Reproduce

Run app Browse to http://localhost:3000/react-query Type "the" in the search box and hit enter

Current vs. Expected behavior

The transition is not respect, and the component suspends to the nearest Suspense boundary

Provide environment information

Operating System:
  Platform: darwin
  Arch: x64
  Version: Darwin Kernel Version 23.4.0: Fri Mar 15 00:11:05 PDT 2024; root:xnu-10063.101.17~1/RELEASE_X86_64
  Available memory (MB): 16384
  Available CPU cores: 16
Binaries:
  Node: 20.10.0
  npm: 10.2.3
  Yarn: N/A
  pnpm: 8.14.0
Relevant Packages:
  next: 14.2.3 // Latest available version is detected (14.2.3).
  eslint-config-next: N/A
  react: 19.0.0-beta-04b058868c-20240508
  react-dom: 18.3.1
  typescript: 5.4.5
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Navigation

Which stage(s) are affected? (Select all that apply)

next dev (local), next build (local), next start (local), Vercel (Deployed)

Additional context

This is a crucial feature for shallow routing. I hope it sees its way in, soon! 🙏

[SouthLink]

the inserted history object must meet the internal requirements of next.js (next.js internally determines whether the history is "valid" or not by using the N field) [N](https://github.com/vercel/next.js/blob/6b6590592eb95990cae768c099002d2b45359dbb/packages/next/src/shared/lib/router/router.ts#L929)

You can bypass the restrictions inside next.js by adding __N: true to the history state object, but I don't recommend it. You should use next/router to control the routing

[marko-hologram]

the inserted history object must meet the internal requirements of next.js (next.js internally determines whether the history is "valid" or not by using the N field) [N](https://github.com/vercel/next.js/blob/6b6590592eb95990cae768c099002d2b45359dbb/packages/next/src/shared/lib/router/router.ts#L929)

You can bypass the restrictions inside next.js by adding __N: true to the history state object, but I don't recommend it. You should use next/router to control the routing

14.1 release blog post mentions window.history.pushState and window.history.replaceState being supported by App Router https://nextjs.org/blog/next-14-1#windowhistorypushstate-and-windowhistoryreplacestate

One would expect this to work then, right? Judging by that blog post.