Next 13: Server components: back button breaks when url changes only querystring

[arackaf]

Verify canary release

• [X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: darwin
  Arch: x64
  Version: Darwin Kernel Version 21.6.0: Mon Aug 22 20:17:10 PDT 2022; root:xnu-8020.140.49~2/RELEASE_X86_64
Binaries:
  Node: 16.18.0
  npm: 8.18.0
  Yarn: 1.22.17
  pnpm: N/A
Relevant packages:
  next: 13.0.1-canary.4
  eslint-config-next: 13.0.0
  react: 18.2.0
  react-dom: 18.2.0

What browser are you using? (if relevant)

Chrome

How are you deploying your application? (if relevant)

n/a

Describe the Bug

I have an RSC which looks like this

async function getTodos(filter: string) {
  const urlBase = process.env.VERCEL_URL ? `https://${process.env.VERCEL_URL}` : "http://localhost:3000";

  const result = await fetch(`${urlBase}/api/todos?filter=${filter}`, { cache: "no-store" });
  return result.json();
}

export default async function Page({ params, searchParams }: RSCProps) {
  const todosPromise = getTodos(searchParams?.filter ?? "");

  return (
    <main>
      <h1>TODOs Page</h1>
      <Suspense fallback={<span>Loading ...</span>}>
        <TodosList todosPromise={todosPromise} />
      </Suspense>
    </main>
  );
}

I interact with a client component in that tree, which uses the useRouter() hook, and router.push to change the url, and re-render the page.

const setFilter = (val: string) => {
  _setFilter(val);
  startTransition(() => {
    router.push("/" + (val ? `?filter=${val}` : ""));
  });
};

This works perfectly. The RSC re-fetches the data.

But, when I use the browser's back button to go back, the data do not re-load from the server. Surprisingly, even when I do router.back, it still does not work.

Expected Behavior

Back button should work

Link to reproduction

https://github.com/arackaf/next-13-data-fetching-blog-post/blob/main/app/page.tsx

To Reproduce

I have a repro here: https://github.com/arackaf/next-13-data-fetching-blog-post/blob/main/app/page.tsx

[arackaf]

Edit - I duplicated this code to use a [slug] instead of a querystring parameter, and everything worked perfectly.

It would seem router.push with just a querystring change, followed by a back button press is where this breaks.

[rijk]

Duplicate of #42035