Losing states between route changes

[18601673727]

Link to the code that reproduces this issue

https://codesandbox.io/p/devbox/naughty-sid-dz4xtn

To Reproduce

1. Open https://codesandbox.io/p/devbox/naughty-sid-dz4xtn
2. Scroll down to the page bottom, click Load more
3. Then click "Go to 10", the url should be at /blog/10
4. Finally click Back button, you'll see the previous homepage states are all gone

Current vs. Expected behavior

Current: Inconsistent states/Unexpected Rerendering Expected: Back Button behaves like usual websites do(bfcache)

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP PREEMPT_DYNAMIC Sun Aug  6 20:05:33 UTC 2023
  Available memory (MB): 4102
  Available CPU cores: 2
Binaries:
  Node: 20.9.0
  npm: 9.8.1
  Yarn: 1.22.19
  pnpm: 8.10.2
Relevant Packages:
  next: 14.3.0-canary.38 // Latest available version is detected (14.3.0-canary.38).
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.1.3
Next.js Config:
  output: N/A

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

Navigation, App Router, Cache

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

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

[18601673727]

Might be helpful to share my current workaround

// ...other imports
import { useEventListener, useSessionStorage } from "usehooks-ts";

export const DataView = (props: { initialData: ServerDataType[] }) => {
  const [value, setValue, removeValue] = useSessionStorage(
    "server-data",
    props.initialData
  );

  useEventListener("beforeunload", removeValue);

  async function loadMore() {
  // ...same rest
}