<Link/> sometime stop working with app router in production

[hiiamwin]

I am till learning nextjs.
I was hoping to get a bit of insight into a bug I'm experiencing with my nextjs application. Every once and a while all the links on my page seem to stop working.

If I hover over the links I can see the expected page in the bottom left of my browser but clicking doesn't navigate to the page and the url doesn't change too. After a refresh or wait a short period of time , the links usually start working again but it definitely a huge hit to usability for the average user.

Has anyone experienced a similar issue/ have any insight as to what might be causing this to occur?

Any help is greatly appreciated :)

[vignesh-gupta]

Hey @hiiamwin, Could please attach some video or a reproducing steps with the piece of code that would be helpful. Apart from that, if you are using next/link then potential reason could be that your navigated page is having a expensive (time taking) process like DB or API fetching.

To identify this-

1. Try adding a loading.tsx page along side your page.tsx
2. If not the page then try covering the component with Suspence Component to load it faster.

Here is a good news for you - Yesterday Next 14 has been launched with a game changing feature Partial Prerendering (Preview) that should help in this.

Hope it help. Happy Coding!

[hiiamwin]

thanks sir

[vignesh-gupta]

Hey @hiiamwin if the answer works for you, Please mark as answered so that if someone else tries to find similar they can refer to this.

[ako-v]

I am using Next v14.2.5, I had the same issue, that once in a while all the links would stop working! using prefetch false did not work, but this solution worked for me. Thanks.

[aziyatali]

It's due to the caching. You can check the this for details.

Or you can watch this video to understand it better

There are several work-arounds, so you can try them by searching for your needs.

What we have done was trying not to use Link as it is caching the request.
One way could be switching to a tag of html.
Others you can use router but it still sucks sometimes. So you better refresh it(router.refresh()) before pushing as refresh seem to refetch the data again by disabling caching.

[hiiamwin]

i try to set prefetch to false and it work

[prasad-pul]

This really helped (after almost 15 hours of head scratching / debugging!!).

I wish Nextjs team provide more clarity / documentation around this. Why did this work??

For anyone interested here is the workflow / navigation steps that I had which broke before setting the prefetch = {false}

1. Navigate to the home page
2. There a bunch of sub-links (through the Nextjs Link component)
3. Clicking on one of the link takes me to the unauthenticated version of that (sub) route
4. After I authenticate the above (authenticated version) route is rendered
5. Now if I navigate to a different link on the home page
6. And click the link from Step 3 , **NOTHING** happens for 30 seconds
7. After 30 seconds, clicking the link from Step 3 works fine

The issue noticed Step 6 was resolved by setting the prefetch = {false} on the links rendered on homepage. I don't know why??

[C-W-D-Harshit]

i have a very complex sidebar and the components change on particular routes, soo you know how complex it it and routing through link tag worked fine in dev mode {using Next: 14.1.3 app} but it dosent work in prod, idk why but setting the prefetch={false} just made it work somehow

[hilkiano]

This setting worked for me. prefetch={false} really fix my issue in production mode. FYI I am using Link component from next-intl v3.

[adrianszablowski]

In my case nothing helped, after clicking <Link href='/' prefetch={false} /> the same thing happens.... The URL does not change and I have a white page (photo below). The URL stays as it was on the previous page.

[JClackett]

Also running into this, except when I click the link, sometimes it just hangs, and now I get a load of rage clicks from users - super strange

[bugproof]

I have the same issue...

Here's my scenario:

<Link href="/dashboard">Dashboard</Link>

inside server component.

Dashboard calls server action, that server action calls fetch to fetch a list from my backend.

Sometimes after page refresh it randomly stops working, hangs... I'm investigating this issue... Perhaps server actions are bugged for initial data fetches?

export default async function DashboardPage() {
    const myPages = await getMyPages(); // server action which calls my  API using fetch

    return <>....</>
    ```