-
Notifications
You must be signed in to change notification settings - Fork 26.3k
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
Next/link is very slow sometimes it doesn't work #53624
Comments
We cannot recreate the issue with the provided information. Please add a reproduction in order for us to be able to investigate. Why was this issue marked with the
|
I think we're currently experiencing this outside of Vercel, in standalone mode where Next is deployed in a Docker container running on Cloud Run (in CPU always allocated configuration with minimum number of instances set to 1 so cold starts should be minimal). There's got to be something else that's causing this - either the number of dependencies or getInitialProps in the custom Document? Could that be the culprit. We are pulling some data but navigating between pages takes 2-4s when clicking a Next Link whereas reloading the page directly takes a lot less time (~1s). We tried the latest Canary release (13.4.20) to no avail. We use Pages Router, not the App Router. This app uses CSS-in-JS (via Emotion) and Mantine UI (+SSR). We use Next Auth for authentication. This is a fairly complex and robust app and I don't think I'd be able to provide a minimum reproducible example but I can provide a Trace from Chrome and a screenshot that shows |
mareksuscak, I have a similar issue where my page is mostly static, and the initial load takes 2-5 seconds. I can't reproduce it locally; it only occurs on the Vercel server. |
We just figured it out - we were using mobx v6 and mobx-react-lite v4 w/ Server-Side State Hydration on the client that's based on the official example. We determined a difference in behavior between v3 and v4 of mobx-react-lite where the latter causes this siginificant performance issue when hydrating the server-side state on the client. A workaround was to downgrade to v3. The mobx team doesn't seem to be aware of this issue so we'll be reporting this. My recommendation to you @monolithed would be to profile your app and check for things in the critical rendering path (custom document, custom app, pages) that might be causing a similar performance issue. That said, navigation still isn't instant but it's many times faster and the time it takes to navigate now more or less reflects the time it takes to pull the data on the server and hydrate on the client. |
I'm going to close this for now. Investigating slow cases is different from codebase to codebase, so we really need a reproduction to be able to effectively find the root cause. If you are having this issue, we ask you to open a new bug report with a provided code example, and any trace information you might have. Thanks! (Feel free to reach out to me with private examples/repros if that's a blocker) |
This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you. |
Verify canary release
Provide environment information
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 or a replay of the bug
--
To Reproduce
create a dashboard file inside app create layout.tsx in the dashboard add side nav component in it. now add the tab1,2,3,4,5 file inside dashboard and add page.tsx to each tab file.
Now add the react-apexcharts and react-table( install it).
create random table & charts inside the page.tsx of tabs (requires use client).
Now add the Link of all tabs in the side nav components:
Side nav:
Describe the Bug
react-apexcharts & react-table
make next/link navigation slow, when I removed all the codes of react-apexcharts & react-table form the pages and added simple div tag with a text, the next/link navigation worked very fast. also removed the "use client"I figured out it is showing 5-10 second delay sometimes it does not load the page, and when click back the URL is changing but the content are not re-rendering. and when I tried to remove the
react-apexcharts & react-table
code it worked as expected. I don't know, is this a bug of Next/link ?and I am sure I have implemented it properly because when I hover over the Link wrapped div I see the URL in the left-bottom. the reason might be chart and table making the code heavy and render takes time in client side.
My code:
Layout:
Sidebar Link tag:
Analytics page:
Expected Behavior
I was expecting smooth delay free navigation.
Which browser are you using? (if relevant)
Google Chrome Version 115.0.5790.110 (Official Build) (64-bit)
How are you deploying your application? (if relevant)
npm run dev
The text was updated successfully, but these errors were encountered: