Can I ask why you picked this way of doing it?

In order to access the data now your component needs to be a client component, since you access the data via a hook.

Do you want that purposefully?

it is indeed a client component , i am doing data fetching in template because when the app runs the template.tsx runs first , i want to fetch data and initalize a socket connection that relies on the data fetched , i honestly didn't find another place where i can put my data fetching logic other than template.tsx given that i want the data to be fetched as early as possible if there are better ways i am all ears , to answer your question yes i did that purposefully is there a problem with turning my template.tsx into a client component .

There's technically not a problem, but since the default in Next.js is working with Server Components you're giving up optimizations that come out of the box just by following the best patterns.

@LuisLl the problem is zustand runs on the client as i understand and i don't know where else to init the socket , access the data with both at the same place .