Problem of calling a page twice when navigating a page using nextLink

[holicreact]

Verify canary release

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

Provide environment information

Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 21.6.0: Mon Aug 22 20:20:05 PDT 2022; root:xnu-8020.140.49~2/RELEASE_ARM64_T8101
    Binaries:
      Node: 18.13.0
      npm: 8.19.3
      Yarn: N/A
      pnpm: 8.2.0
    Relevant packages:
      next: 13.4.2-canary.4
      eslint-config-next: 13.1.0
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 4.9.4

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

App directory (appDir: true), Internationalization (i18n), Routing (next/router, next/navigation, next/link)

Link to the code that reproduces this issue

https://github.com/holicreact/app-directory-v2.git

To Reproduce

https://app-directory-v2.vercel.app/context

From the client context page, open the Developer Tools Network tab
Click on the sub-links

For example, when you have a [categorySlug][subCategorySlug] path, if you browse the categorySlug page, you request the page only once, but when you browse the subCategorySlug path, you request the page twice

Describe the Bug

What is the improvement or update you wish to see?
Problem of calling a page twice when navigating a page using nextLink

Is there any context that might help us understand?
If you apply the prefetch={false} option to nextLink, the page is called twice when navigating the page of a sub-dynamic segment of the dynamic segment path.

I am sending additional unnecessary API requests because I make API requests inside the page.

For example, when you have a [categorySlug][subCategorySlug] path, if you browse the categorySlug page, you request the page only once, but when you browse the subCategorySlug path, you request the page twice

If this is a bug, please fix it If it's not a bug, please let me know how to prevent page duplicate calls Thank you.

Expected Behavior

Send a lot of API requests and send meaningless requests to the server

It's hard to check the log
Waste server resources
It interferes with collecting API request data.

Which browser are you using? (if relevant)

113.0.5672.126 (arm64)

How are you deploying your application? (if relevant)

vercel

[holicreact]

@smo043 @jakepeyser
I changed the type to a bug and uploaded a new issue.

[smo043]

@holicreact - Amazing thank you

[smo043]

Reference #49844

[johnson-jesse]

Are you calling pre fetch a defect? I don't see the problem here after cloning your code. Can you provide more details of the duplication?

I'd close this issue as invalid. I see nothing wrong here.

[holicreact]

Are you calling pre fetch a defect? I don't see the problem here after cloning your code. Can you provide more details of the duplication?

I'd close this issue as invalid. I see nothing wrong here.

@johnson-jesse I am used opton prefetch = {false}
I said I don't use pre-fetch, and I'm not doing pre-fetch
When I click on the link, I am sending the request to the RSC twice only under certain conditions mentioned in the text This is an obvious waste of server resources.

[ivanhueso]

Hi, I'm having the same issue on my localhost . For some reason it call twice getDomainStories().

import StoriesTable from "./components/storiesTable"
import { getDomainStories } from "utils/getDomainStories"
export default async function Page() {
const stories = await getDomainStories()
return <StoriesTable stories={stories.data} />
}

See My log:

- event compiled successfully in 498 ms (1689 modules)
getDomainStories()
getDomainStories() **[ISSUE HERE]**

Im runnign latest version "next": "^13.4.3" "react": "^18.2.0",

Best
Ivan

[holicreact]

Hi, I'm having the same issue on my localhost . For some reason it call twice getDomainStories().

import StoriesTable from "./components/storiesTable" import { getDomainStories } from "utils/getDomainStories" export default async function Page() { const stories = await getDomainStories() return <StoriesTable stories={stories.data} /> }

See My log:

- event compiled successfully in 498 ms (1689 modules) getDomainStories() getDomainStories() **[ISSUE HERE]**

Im runnign latest version "next": "^13.4.3" "react": "^18.2.0",

Best Ivan

@ivanhueso Tell me under what conditions you're called twice

[ivanhueso]

Hi, I'm having the same issue on my localhost . For some reason it call twice getDomainStories().
import StoriesTable from "./components/storiesTable" import { getDomainStories } from "utils/getDomainStories" export default async function Page() { const stories = await getDomainStories() return <StoriesTable stories={stories.data} /> }
See My log:
- event compiled successfully in 498 ms (1689 modules) getDomainStories() getDomainStories() **[ISSUE HERE]**
Im runnign latest version "next": "^13.4.3" "react": "^18.2.0",
Best Ivan

@ivanhueso Tell me under what conditions you're called twice

Hi,

• I'm using <Link> tried both prefetch =(true & false)
• Each /page.js is using server rendering
• All pages are using the same /layout.js that calls 2 functions: getAuthUser() and getNewNotifications() loaded via a Promise
• Each get function is using React cache(): i.e export const getDomainStories = cache(async () => {})
• I'm using authenticated JWT cookie that is validated via a session inside each get function.
• I'm using latest TailwindCSS version (standard setup)
• I'm using experimental serverComponentsExternalPackages: ["mongoose"] & serverActions: true

This double call happens intermittent. Hope this give you enough context.
Thank you

[holicreact]

@ivanhueso It's a little different from my case, but I think a double call occurs when the dynamic path is charged.
Call the header() function to access the session? Then it becomes a dynamic path.

[Enngage]

We are also seeing "double" requests upon clicking on <Link> element... not sure about the exact circumstances, but I believe it started happening quite recently as I don't remember seeing it before. (We are updating next.js to latest version whenever it is available)

[ivanhueso]

@ivanhueso It's a little different from my case, but I think a double call occurs when the dynamic path is charged. Call the header() function to access the session? Then it becomes a dynamic path.

Yes, I'm using the header() function in the root layout and some pages too. However this wasn't happening before in older version. I see this happen only in my localhost
I'm using Tailwind (not sure if it has something to do)

[levipadre]

Same issue for me too.

[holicreact]

@levipadre @ivanhueso @Enngage
If the dynamic paths overlap, a double call occurs. Please tell us about these issues Please help me, super developers

[levipadre]

In my case, I have dynamic route app/[[...slug]]/page and the links coming from json data. All link's prefetch values are false.
The links are in a header client component.
The first link I click has only one call, all the others are duplicated.

[holicreact]

@levipadre I hope the next team sees this article

[huozhi]

Closes by #51292

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.