Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Using Link causes re-rendering whole page #44892

Open
1 task done
reza-ebrahimi opened this issue Jan 15, 2023 · 0 comments
Open
1 task done

Using Link causes re-rendering whole page #44892

reza-ebrahimi opened this issue Jan 15, 2023 · 0 comments
Labels
template: bug A user has filled out the bug report template. Issue needs triaging

Comments

@reza-ebrahimi
Copy link

reza-ebrahimi commented Jan 15, 2023

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:

Click on link to cause rerendering! </Link> <ComponentOne /> <ComponentTwo /> </div>); } export default Index;">
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

@reza-ebrahimi reza-ebrahimi added the template: bug A user has filled out the bug report template. Issue needs triaging label Jan 15, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
template: bug A user has filled out the bug report template. Issue needs triaging
Projects
None yet
Development

No branches or pull requests

1 participant