what exactly are you trying to do?

Hi, I am trying to avoid Router Cache when loading data for a Server Component and without using invalidateTag or invalidatePath, forcing the router.refresh.

sorry, i still kinda dont get whats going on? you want every page link to load and then refetch for latest data?

Data retrieved with getPazienteFull can be modified from API calls in other points of the application. So I want to be sure that when I land on PazientePage, fresh data are loaded and not cached.

I would use client side rendering with react-query/swr if I want to avoid the router cache.
if seo is important, you could fetch the initial data on the server and pass it to react-query/swr

😭 so annoying I need to switch from server side rendering to client side rendering only because of a so aggressive caching strategy...

no don't switch client side, are you using fetch ?*

if you want to disable cache and you are using fetch just :

const res= await fetch("https://yourapi.com/whatever",{ cache: 'no-store' });

see more here :
https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#opting-out-of-data-caching

No, i am not using fetch, function getPazienteFull directly read from the database.

Maybe you are lookin for unstable_cache

yeah, terrible approach and syntax btw.

In addition:

Warning: This API is unstable and may change in the future. We will provide 
migration documentation and codemods, if needed, as this API stabilizes.

Anyway, it does not work. Cache keeps to be not revalidated.

revalidate: The number of seconds after which the cache should be revalidated. Omit or pass false to cache indefinitely or until matching revalidateTag() or revalidatePath() methods are called.

Even unstable_noStore does not work. PazientePage continues to be cached.

https://nextjs.org/docs/app/api-reference/functions/unstable_noStore

which version of nexT.js are u using ?

currently, the only way to bypass the router cache is use client side rendering or create a component like the one you did in the question to invalidate it on navigation

  const router = useRouter()
  const pathname = usePathname()

  useEffect(() => {
    router.refresh()
  }, [pathname])

this disable the data cache only but not router cache

mmm your version is interesting 😀 Each time the pathname changes, then router.refresh is triggered. is it right?

yes

and render it in layout.tsx

Great, it is working, thank you.

the downside is that SSR (database access) is triggered multiple times. Perhaps not the best in terms of performance.

that is the reason they create router cache

I don't completely agree. I expect to render fresh data from database (without caching) every time I land on the page.

the best way, I would say is to render a piece of data which is highly dynamic on client, you don't need to render the full page on client

or use page router for that page until there is a way to config the router cache

yes, infact noStore on top of the Server Component should do the trick, but in my case it is not working.

noStore do nothing to router cache

it just tell next not to static generate

I think I am going to switch to client side rendering, it's a nightmare 😭

why is it a nightmare?

maybe you could try out trpc with create-t3-app

it bootstrap a project which can do server rendering and client rendering

I was about to ask an offtopic question: a good typesafe api's mechanism.

yeah the setup in create-t3-app is very good with trpc

I would highly recommend you create a project and play with it

with create-t3-app

ok, thank you all for the great help, I really appreciated

you're welcome

mmh ok thought you were talking about data cache per route, my bad