Remove react context and use cookies

Wouldn't that kill the user browser when it's a large ammount of data?

Like, okey I can use cookies for some auth tokens, or some small data, but I'm talking here about pretty big global state

Then you can use react context ig, and wrap only the client components with the provider and them import all the client components into page.tsx

there are also redux and zustand although I havent used them yet

I think the new pattern is to write a provider in the root layout that takes an UNWRAPPED promise of the server data you want. Then in every client component where you want the data you can wrap it in a provider and await the promise.

Children components can still be rendered on the server ('use client' at the root layout does not opt the entire app into client side rendering) and also none of the page or layouts blocks for the awaited data unless it needs it

From what I see in your project u dont really use much the provider anyway, like, overall you are using the provider once inside the main layout to get the current user, other than that you are just fetching data on server comps and client things on client comps, I was mostly asking, what if u have something like 100 posts for a social media app, and u want to fetch them on the first load, but you are going to carry that data along to other components as well, cause u wanna use it more inside your app. with React I would simply create a provider, in which I would fetch the data and then simply set a state inside the provider called "posts" and just access the posts state from everywhere inside the app, but I can't really do that, cause I cant keep a provider on SSR ( i guess ), so I would have to load the 100 posts on client ( which is not ideal cause I will lose the benefit of Next in this case ). also looking inside your code I don't really understand how could u put that userProvider inside your top level Layout.tsx without turning the layout.tsx into a client component?

also, fetching data inside provider isn't the best now because.. it would be client fetching, so we have to make the user to wait for the data, so tehnically if i have 100 posts, I should FETCH them in every "root" component that uses them? let's say I need the 100 posts once in /posts once in /sharePosts and once in another route idk..
should i fetch them at page.tsx on server side on every new route? or there is something like a global state that could render them on server at the very beginning and just access them later from anywhere??

You can use react query

It also has support for next.js server fetching with caching