Handeling multiple dependent states effectively server site and client site
I have been looking everywhere for a solution but cannot find help or a solution anywhere. I hope someone will be able to help me with my problem.
I have the following setup:
So I see two problems:
1. Two server components need the same state to load another state. But
2. I use a state to validate something on the server as well as the client so they need to be in sync. I'm confused as the docs say you should not do that. But isn't it better to redirect a user on the server side if he is not authenticated? So I want to use
My goal is to fetch things only once and keep states in sync between the server and the client
I have the following setup:
Navbar.tsx
- has a dependent queryuserDatauserpage.tsx
- has also a dependent queryprofileuseruserprofile<Componoent>.tsx
- needs theprofileSo I see two problems:
1. Two server components need the same state to load another state. But
const user = await queryClient.fetchQuery({children2. I use a state to validate something on the server as well as the client so they need to be in sync. I'm confused as the docs say you should not do that. But isn't it better to redirect a user on the server side if he is not authenticated? So I want to use
await queryClient.prefetchQuery({const user = await queryClient.fetchQuery({My goal is to fetch things only once and keep states in sync between the server and the client
