Repository: next.js
Issue: diffrent behaviors for browsers when page is restored from bfcache
Labels: examples

### 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 22.1.0: Sun Oct  9 20:14:54 PDT 2022; root:xnu-8792.41.9~2/RELEASE_X86_64
    Binaries:
      Node: 16.19.0
      npm: 8.19.3
      Yarn: 1.22.18
      pnpm: N/A
    Relevant packages:
      next: 13.0.0
      eslint-config-next: 13.0.0
      react: 18.2.0
      react-dom: 18.2.0

### Which example does this report relate to?

using-router

### What browser are you using? (if relevant)

desktop safari 16.1(18614.2.9.1.12), desktop chrome 108.0.5359.124(x86_64)

### How are you deploying your application? (if relevant)

_No response_

### Describe the Bug

## Before describe...

I test it on next.js 12, 13, canary.

All version has same issue.

You can simply reproduce issue here. (https://why-router-is-updated.vercel.app/)

## Summary of used code

Original code(used) is [here](https://github.com/NamGungGeon/why-router-is-updated)

```js

```js
// page/index.js
function Home() {
  const router = useRouter();

  // alert if router is updated or init
  useEffect(() => {
    alert("router is updated(or init)");
    console.log("router is updated(or init)", router);
  }, [router]);

  // alert if e.persisted is true (page is restored from bfcache)
  useEffect(() => {
    const checkBfcache = (e) => {
      console.log("This page is restored from bfcache?", e.persisted);
      if (e.persisted) {
        alert("This page is served from bfcache");
      }
    };
    window.addEventListener("pageshow", checkBfcache);
  }, []);

  return (
    <>
      <Head>
        <title>Create Next App</title>
      </Head>
      <div>
        <h1>Currennt path: {router.asPath}</h1>
        <div>
          <h3>Inner links</h3>
          <ul>
            <li>
              <button onClick={() => router.replace("/?a=b")}>/?a=b</button>
            </li>
            <li>
              <button onClick={() => router.replace("/?a=b&c=d")}>
                /?a=b&c=d
              </button>
            </li>
            <li>
              <button onClick={() => router.replace("/")}>/</button>
            </li>
          </ul>
          <h3>Outer links</h3>
          <ul>
            <li>
              <Link as="a" href="https://www.google.com" passHref={true}>
                <button>https://www.google.com</button>
              </Link>
            </li>
          </ul>
        </div>
      </div>
    </>
  );
}

// prevent '/' be static page (running as dynamic page)
Home.getInitialProps = async ({ req, res }) => {
  res?.setHeader("Cache-Control", "private, no-cache, must-revalidate");
  return {};
};

export default Home;
```

## How to invoke bug

1. enter page. (/)
2. click `/?a=b` button.
3. click `/?a=b&c=d` button.
4. click `www.google.com(Outer link)` button.
5. click back button.
6. bfcache is used. (page is restored without reload page)
7. but router is updated, and `useEffect(()=> {...}, [router])` is triggered.
   - page is restored from bfcache, thus router must be not updated. but router is updated, and effect is executed.
   - This bug is only generated from <b>desktop/mobile safari, mobile chrome.</b> (not generated from <b>desktop chrome</b>)

### desktop chrome

<img src="https://raw.githubusercontent.com/NamGungGeon/why-router-is-updated/main/docs/bug-desktop-chrome-bfcache-router-not-updated.gif">
      
- when page is restored from bfcache, router is not updated. (not showed router update message alert)

### desktop safari

<img src="https://raw.githubusercontent.com/NamGungGeon/why-router-is-updated/main/docs/bug-desktop-safari-bfcache-router-updated.gif">
- when page is restored from bfcache, router is updated. ( showed router update message alert)

- same as mobile safari, mobile chrome.
- but diffrent from desktop chrome...

## What is problem?

Phase 7 is unexpected behavior.
(desktop/mobile safari and mobile chrome behavior is different from desktop chrome)

And also, in below situation, router is not updated on all browsers.

1. enter page. (/)
2. click `www.google.com(Outer link)` button.
3. click back button.
4. bfcache is used (page is restored without reload page)
5. <b>(important)</b> router is not updated on all browser.
   - so `useEffect(()=> {...}, [router])` is not triggered.

### desktop chrome

<img src="https://raw.githubusercontent.com/NamGungGeon/why-router-is-updated/main/docs/desktop-chrome-bfcache-router-not-updated.gif">
      
- when page is restored from bfcache, router is not updated. (not showed router update message alert)

### desktop safari

<img src="https://raw.githubusercontent.com/NamGungGeon/why-router-is-updated/main/docs/desktop-safari-bfcache-router-not-updated.gif">
- when page is restored from bfcache, router is not updated. (not showed router update message alert)
- same as desktop chrome (also same as mobile chrome/safari)


### Expected Behavior

When back button clicked from outer page(ex: google.com) and returned nextjs project pages, router must be updated or not updated on all browser. (do same behavior)

### To Reproduce

Please see 'How to invoke bug' and 'What is problem' sections of `Describe the Bug`.

If you cannot understanding my descriptions, please add comment.

Thanks for your efforts!