Using Link causes re-rendering whole page

[reza-ebrahimi]

Verify canary release

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

Provide environment information

❯ npx --no-install next info

    Operating System:
      Platform: linux
      Arch: x64
      Version: #64~20.04.1-Ubuntu SMP Fri Jan 6 16:42:31 UTC 2023
    Binaries:
      Node: 18.12.1
      npm: 8.19.2
      Yarn: 1.22.10
      pnpm: N/A
    Relevant packages:
      next: 13.1.1
      eslint-config-next: 12.3.4
      react: 18.2.0
      react-dom: 18.2.0

Which area(s) of Next.js are affected? (leave empty if unsure)

Routing (next/router, next/navigation, next/link)

Link to the code that reproduces this issue

https://codesandbox.io/s/affectionate-rubin-rqrypw?file=/pages/index.tsx

To Reproduce

Run this code to reproduce the problem, Or use the sandbox link:

import Link from "next/link";

const ComponentOne = () => {
  console.log("ComponentOne");
  return <div>ComponentOne</div>;
}
const ComponentTwo = () => {
  console.log("ComponentTwo");
  return <div>ComponentTwo</div>;
}

function Index() {
  return (<div>
    <Link href="/">
      Click on link to cause rerendering!
    </Link>
    <ComponentOne />
    <ComponentTwo />
  </div>);
}

export default Index;

Describe the Bug

Using Nextjs Link with current page path as href without any query params or changes causes re-rendering of the whole page.

Expected Behavior

Do not re-render the whole page when href is a path to the exact current page path.
Re-rendering could happen within following scenarios:

• A component used useRouter hook:

const ComponentOne = () => {
  const router = useRouter();
  
  console.log("ComponentOne");
  return <div>ComponentOne</div>;
}

• Link href has query params (With detecting changes in their values???) if it is used for current page (Assume the page path is /pages/SomeRoute.tsx):

function Index() {
  return (<div>
    <Link href={{
      pathname: "SomeRoute",
      query: {
        param1: "value1",
      }
    }}>
      Click on link to cause rerendering!
    </Link>
    <ComponentOne />
    <ComponentTwo />
  </div>);
}

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

[zhangwei900808]

same problem

[zhangwei900808]

my problem is re-render components on route change

[zhangwei900808]

router.push has same problem

[nextjs-bot]

This issue has been automatically marked as stale due to two years of inactivity. It will be closed in 7 days unless there’s further input. If you believe this issue is still relevant, please leave a comment or provide updated details. Thank you.