What is the best way to fetch data that should be displayed in many places in the app?

[razb-viola]

I have a sidebar, where I want to show only links to pages that the user is authorized to.
I also have an header, where I want to display the user brief (name, role, etc).
Also, I want that a page won't even load if the user has no permissions and authorized to see that page (he should be redirected).
I am using next.js with server components.

One way is to fetch the data in the layout, since user info is required probably in all of the app app pages.
Then, somehow drill down this information to the components below (header, sidebar, etc).

I read in the docs of using the queryClient with initial data per key, and then actually fetch the data from the components - but because they already fetched on server level these queries should be cached, or at least deduped. However, I am not sure how this works behind the scene - to emphasize - I want to fetch this data only for a given user instead of fetch and cache for all of the users of course.

Another way is to first render those components with some dummy data or a skeleton, use a useEffect and fetch this data and update the state - maybe using redux/jotai/zustand/etc.

So my questions are:

1. What is the proper way of fetching data on load time, privately (not to be shared to other users), and make it usable in components state.
2. As it seems for me now, React Query is a major change in strategy from global state managers such as redux in many places - since I don't need to save the user information in the global state anymore - I can just "query" it every time I need (React Query will handle deduplications and cache so it will be faster and automatically in sync).

What do you think guys?