Hi everyone!

I'm struggling a lot with understanding how the caching works. For simplicity, here's my app structure:

/app
└── /[user_profile_id]/
├── layout.tsx
├── page.tsx
└── /onboarding
└── page.tsx
/supabase
└── getItem.ts

As you can see, I have the getItem function which pings my Supabase Database and returns value for the Item.
This getItem() function is used in all three server components: layout, page and onboardin/page.

the getItem.ts looks like this:

export const revalidate = 3600

export const getItem = cache(async (itemId: string) => {
(...)
const {data} = supabase.select(*)...

}


So, as you can see, the revalidation is set to 3600 and the whole function is wrapped in the cache()
However, even though it's set like this, accordingly to the official documentation: https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating, the function getItem runs two times (for layout and for page) - and then third time for /onboarding as well.

What I need to do, is to make sure that the this Item will be fetched from the server only once, to make user's experience much faster and reduce the number of redundant database calls.

How do I do that? What am I missing here?