Disable Soft navigation and Prefetching Globally (prefetch={false} doesn't seem to work)

[hbatalhaStch]

Summary

I am trying to adopt the new app dir but I am facing some behavior (that should be intuitive) changes that is looking to be a deal breaker.
In my app every url change should be met with a new render and fresh data but it is not being the case due to soft navigation. I understand the performance boost but this breaks UX in my app and it is very annoying tbh.

For example I go to /users where I am presented with table of users and in each table row there's a column for action buttons (view, edit, delete). I view user 1 which goes to users/1, while in users/1 page I also I have the option to edit the user and I if do it and come back /users the change will not be visible as it just shows the pre-rendered page.

How do I solve this?

Additional information

No response

Example

No response

[pedroPike]

Im having the same problem, the props in my client side component become stale, even though the server side is sending them correctly.

Did you solve it?

[Arjun-M]

Hey @hbatalhaStch @pedroPike 👋

This thread's from '23 but yeah, stale data on nav is still a gotcha in App Router – especially with client props not updating. (Hit it last month on an admin dashboard.)

Quick fix for your UX: Skip disabling soft nav entirely (it's the whole point of client routing). Just force fresh fetches post-mutation.

For fresh /users data after edit:

In your edit action (server or client):

// Server action example
import { revalidatePath } from 'next/cache'

async function editUser(formData) {
  'use server'
  // ... update logic
  revalidatePath('/users')  // Boom, next nav to /users re-fetches
}

Or client-side (in your edit component):

'use client'
import { useRouter } from 'next/navigation'

function EditForm() {
  const router = useRouter()
  
  const handleSubmit = async () => {
    // ... mutation
    router.refresh()  // Re-runs server components, merges new data, keeps client state
  }
  
  // ...
}

This keeps soft nav speed but nukes staleness. router.refresh() is magic for that – no full reload, just server re-render.

If prefetch is biting you too:

No global config yet (even in 15.x), but override it once:

// In root layout.tsx or a client wrapper
'use client'
import { useRouter } from 'next/navigation'
import { useEffect } from 'react'

export default function NoPrefetchWrapper({ children }) {
  const router = useRouter()
  
  useEffect(() => {
    router.prefetch = async () => {}  // Disable all auto-prefetch
  }, [router])
  
  return children
}

Wrap your app with it. Prefetch={false} on individual s works too, but this is global.

Your table rows sound perfect for anyway – no need to preload every user page.

Hit me if that doesn't click for your setup! 🚀

[hbatalhaStch]

@Arjun-M I ended up going back to using the pages folder

Thanks though, I hope this helps someone

[Arjun-M]

@hbatalhaStch haha feel you, did the same on a couple projects back then 😂

zero shame, pages dir is still the sane choice for heavy CRUD stuff.

app router got a lot better with refresh/revalidate in 15 but yeah if it’s fighting you, pages just works.

enjoy the peace ✌️

[hbatalhaStch]

@Arjun-M that project is still stuck on v13
Moved on to other projects and still haven't found the time to upgrade it

But I will be sticking to pages dir when I do it