next.js: Problem of calling a page twice when navigating a page using nextLink

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.

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

About this issue

Original URL
State: closed
Created a year ago
Reactions: 1
Comments: 17 (2 by maintainers)

Most upvoted comments

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.

levipadre on Jun 8, 2023

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

ivanhueso on May 24, 2023

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

holicreact on May 18, 2023