navigation delayed for 60 seconds #55735

andrew-gropyus · 2023-09-21T12:56:36Z

Link to the code that reproduces this issue

https://github.com/andrew-gropyus/next-hydration-issue

To Reproduce

npm install && npm run build && npm run start
Visit localhost:3000/en/red in either edge or chrome
Reload the page and immediately (within a few ms) click on the link to blue
Notice that the request to fetch the blue page completes, however the hydration does not complete for 60 seconds.

Here is a video of the issue, note that I triggered navigation after reloading with ctrl+R:

reproduction-1.mp4

Current vs. Expected behavior

When clicking a link that navigates to a different nextjs page, I expect that data is fetched in the background and when fetching is complete hydration of the components will take place.

However, when triggering a navigation within a small time window of the page load, the data fetching completes but hydration is delayed for 60 seconds.

Verify canary release

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.6.0: Wed Jul  5 22:21:56 PDT 2023; root:xnu-8796.141.3~6/RELEASE_X86_64
    Binaries:
      Node: 16.14.0
      npm: 8.3.1
      Yarn: 1.22.19
      pnpm: 7.5.0
    Relevant Packages:
      next: 13.5.3-canary.0
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.1.3
    Next.js Config:
      output: standalone

Which area(s) are affected? (Select all that apply)

App Router, ~~Standalone mode (output: "standalone")~~

Additional context

The issue is present in our deployed application, which is a self hosted node runtime on docker on linux.
Edge and Chome reproduce the issue
Firefox does not reproduce the issue
This reproduction is very minimal, so the window to trigger the race condition is very small. In our production application the window is much larger and users often hit this issue during typical use.

Triggering a navigation during the 60 second pause causes navigation to work as expected

reproduction-2.mp4

Not shown in this reproduction is that if a prefetch link exists, hovering over it will cause the original hydration to take place.

I believe this user also reported the same issue, however they did not provide steps to reproduce it:
#53242 (comment)

The text was updated successfully, but these errors were encountered:

balazsorban44 · 2023-09-21T13:16:28Z

I'm unfortunately unable to reproduce this, but I can see an issue in your reproduction, in the root layout. You are missing html and body.

This can be related. Please refer to the docs: https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts#root-layout-required

andrew-gropyus · 2023-09-21T13:26:58Z

Thanks for attempting to reproduce it. Note that I believe this is a race condition and the timing has to be very precise. I am not able to reproduce it on every navigation.

The html and body being in the locale layout is a suggestion of next-intl which I suppose is important so that locale can be added as an attribute to the html tag.

In any case, it is not super relevant to the reproduction, so I have moved html and body in the root layout. I was still able to reproduce the issue.

andrew-gropyus · 2023-09-21T13:34:12Z

I was also able to successfully reproduce it on a second M2 macbook pro, this time using brave as a browser.

hipdev · 2023-09-21T14:20:07Z

I'm unable to reproduce too 🤔 , using M1 Chrome, Safari and Arc. Btw, I had a smooth experience using next-international, give it a try.
next-intl was breaking my production build, it was related to a bug with server components at that time, maybe now is solved.

balazsorban44 · 2023-09-21T14:20:14Z

The html and body being in the locale layout is a suggestion of next-intl which I suppose is important so that locale can be added as an attribute to the html tag.

That is an incorrect suggestion by next-intl, as not having html and body inside the root layout could cause issues (now more likely this one).

Could you verify if the issue still happens when correctly following the Next.js docs?

andrew-gropyus · 2023-09-21T14:22:19Z

I'm unable to reproduce too 🤔 , using M1 Chrome, Safari and Arc. Btw, I had a smooth experience using next-international, give it a try. next-intl was breaking my production build, it was related to a bug with server components at that time, maybe now is solved.

I have not been able to reproduce it in safari either. So far only edge, chrome, and brave. Arc is a blink browser so I will spend some time to see if I can reproduce that.

andrew-gropyus · 2023-09-21T14:24:01Z

The html and body being in the locale layout is a suggestion of next-intl which I suppose is important so that locale can be added as an attribute to the html tag.

That is an incorrect suggestion by next-intl, as not having html and body inside the root layout could cause issues (now more likely this one).

Could you verify if the issue still happens when correctly following the Next.js docs?

We will consider not following this advice from next-intl. I'll open an issue over on the next-intl repository to discuss that further.

I was able to reproduce the issue with the structure recommended from the nextjs docs. I have updated my reproduction repository to reflect this too.

balazsorban44 · 2023-09-21T14:33:01Z

I can see {/* It seems important to have some css here */} but then there is no CSS. Is there something missing from the reproduction still?

balazsorban44 · 2023-09-21T14:37:01Z

You also say that it cannot be reproduced without output: "standalone" (i.e: next build && next start without output: "standalone" in your next.config.js)

andrew-gropyus · 2023-09-21T14:38:11Z

I can see {/* It seems important to have some css here */} but then there is no CSS. Is there something missing from the reproduction still?

That comment got taken along with the suggestion to move html and body in the root layout. I updated the reproduction repository with the comment in the correct location.

andrew-gropyus · 2023-09-21T14:46:12Z

You also say that it cannot be reproduced without output: "standalone" (i.e: next build && next start without output: "standalone" in your next.config.js)

I wanted to double check if standalone mode was really necessary. I removed it and I was able to reproduce it! So I've update the repository to reflect that too.

hipdev · 2023-09-21T14:48:41Z

Can you try with yarn, pnpm or bun, maybe is npm 🙈

andrew-gropyus · 2023-09-21T14:53:32Z

Can you try with yarn, pnpm or bun, maybe is npm 🙈

Nice idea. I could still reproduce it using:

rm -rf .next node_modules
bun install
bun run next build
bun run next start

andrew-gropyus · 2023-09-21T15:07:22Z

Reproduction without using standalone mode, using bun, and using arc. This time I didn't trim out the navigations that worked properly.

reproduction-3.mp4

andrew-gropyus · 2023-09-22T09:41:24Z

To rule out the hosting side of things, here is a reproduction using a vercel hosted version. I deployed this using the standard options.

reproduction-4.mp4

amannn · 2023-09-25T12:26:24Z

The html and body being in the locale layout is a suggestion of next-intl which I suppose is important so that locale can be added as an attribute to the html tag.

That is an incorrect suggestion by next-intl, as not having html and body inside the root layout could cause issues (now more likely this one).

@balazsorban44 Can you provide more details on this? How would a user add a lang attribute to the html tag if not by moving the html tag within a [locale] segment?

This is btw. suggested in your official documentation:

For the i18n use case, it would be really important that providing the html tag in a nested layout continues to work—at least if there's no viable alternative.

DennieMello · 2023-09-26T23:18:53Z

The html and body being in the locale layout is a suggestion of next-intl which I suppose is important so that locale can be added as an attribute to the html tag.

That is an incorrect suggestion by next-intl, as not having html and body inside the root layout could cause issues (now more likely this one).

@balazsorban44 Can you provide more details on this? How would a user add a lang attribute to the html tag if not by moving the html tag within a [locale] segment?

This is btw. suggested in your official documentation:

app-dir-i18n-routing example

Internationalization docs

For the i18n use case, it would be really important that providing the html tag in a nested layout continues to work—at least if there's no viable alternative.

I would also like to add to your question - what to do with not-found.tsx and global-error.tsx, which should also be in the app folder, if they also need to be internalized?

andrew-gropyus · 2023-10-19T08:56:58Z

@balazsorban44 have you been able to reproduce this yet?

Can I do anything to help here?

MKraust · 2023-10-26T22:20:14Z

I'm facing exactly same issue from 13.5.1 to 14.0.0 (including). Both w/ standalone and w/o it. Also without i18n.

ghost · 2023-10-27T10:23:39Z

facing the same problems right now, all our links do not update route. we dont use i18n.
I think its related to prefetch, because when disabling it for our links, route change happens directly...

dominickiprotich · 2024-09-23T09:26:09Z

Experiencing same delay on my side when a user navigates to another page

"next": "14.0.4",
"react": "^18",
"react-dom": "^18",

andrew-gropyus added the bug Issue was opened via the bug report template. label Sep 21, 2023

github-actions bot added the Output (export/standalone) Related to the the output option in `next.config.js`. label Sep 21, 2023

balazsorban44 changed the title ~~Hydration delayed for 60 seconds~~ navigation delayed for 60 seconds Sep 21, 2023

balazsorban44 removed the Output (export/standalone) Related to the the output option in `next.config.js`. label Sep 21, 2023

amannn mentioned this issue Nov 9, 2023

👋 Who is using next-intl? amannn/next-intl#138

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

navigation delayed for 60 seconds #55735

navigation delayed for 60 seconds #55735

andrew-gropyus commented Sep 21, 2023 •

edited

Loading

balazsorban44 commented Sep 21, 2023

andrew-gropyus commented Sep 21, 2023 •

edited

Loading

andrew-gropyus commented Sep 21, 2023

hipdev commented Sep 21, 2023

balazsorban44 commented Sep 21, 2023 •

edited

Loading

andrew-gropyus commented Sep 21, 2023 •

edited

Loading

andrew-gropyus commented Sep 21, 2023 •

edited

Loading

balazsorban44 commented Sep 21, 2023

balazsorban44 commented Sep 21, 2023

andrew-gropyus commented Sep 21, 2023

andrew-gropyus commented Sep 21, 2023

hipdev commented Sep 21, 2023

andrew-gropyus commented Sep 21, 2023

andrew-gropyus commented Sep 21, 2023

andrew-gropyus commented Sep 22, 2023

amannn commented Sep 25, 2023

DennieMello commented Sep 26, 2023

andrew-gropyus commented Oct 19, 2023

MKraust commented Oct 26, 2023 •

edited

Loading

ghost commented Oct 27, 2023

dominickiprotich commented Sep 23, 2024 •

edited

Loading

navigation delayed for 60 seconds #55735

navigation delayed for 60 seconds #55735

Comments

andrew-gropyus commented Sep 21, 2023 • edited Loading

Link to the code that reproduces this issue

To Reproduce

Current vs. Expected behavior

Verify canary release

Provide environment information

Which area(s) are affected? (Select all that apply)

Additional context

balazsorban44 commented Sep 21, 2023

andrew-gropyus commented Sep 21, 2023 • edited Loading

andrew-gropyus commented Sep 21, 2023

hipdev commented Sep 21, 2023

balazsorban44 commented Sep 21, 2023 • edited Loading

andrew-gropyus commented Sep 21, 2023 • edited Loading

andrew-gropyus commented Sep 21, 2023 • edited Loading

balazsorban44 commented Sep 21, 2023

balazsorban44 commented Sep 21, 2023

andrew-gropyus commented Sep 21, 2023

andrew-gropyus commented Sep 21, 2023

hipdev commented Sep 21, 2023

andrew-gropyus commented Sep 21, 2023

andrew-gropyus commented Sep 21, 2023

andrew-gropyus commented Sep 22, 2023

amannn commented Sep 25, 2023

DennieMello commented Sep 26, 2023

andrew-gropyus commented Oct 19, 2023

MKraust commented Oct 26, 2023 • edited Loading

ghost commented Oct 27, 2023

dominickiprotich commented Sep 23, 2024 • edited Loading

andrew-gropyus commented Sep 21, 2023 •

edited

Loading

andrew-gropyus commented Sep 21, 2023 •

edited

Loading

balazsorban44 commented Sep 21, 2023 •

edited

Loading

andrew-gropyus commented Sep 21, 2023 •

edited

Loading

andrew-gropyus commented Sep 21, 2023 •

edited

Loading

MKraust commented Oct 26, 2023 •

edited

Loading

dominickiprotich commented Sep 23, 2024 •

edited

Loading