Initial state as props passed by server component
Answered
Yacare Caiman posted this in #help-forum
Yacare CaimanOP
I have a server component that gets data from a database and passes it to the client component. My client component uses this prop as its initial state. Therefore, I could interact with the data by updating the state.
But the problem occurs when I update the state, move to another page, and return to the updated page. The state is not updated.
But the problem occurs when I update the state, move to another page, and return to the updated page. The state is not updated.
Answered by European sprat
30 Replies
Asian black bear
@Yacare Caiman Do you want for it to be kept on the client side? If so something like a context in a layout, local storage, or some kind of global state management library like redux or jotai would be useful.
If you want state derived from props on the client to magically persist back to your database... that isn't a thing.
Yacare CaimanOP
Is there anyway to make the server component fetch data (newest data)?
I found that the server component only call api once time although i go arround the site
Asian black bear
that is expected, the data is cached client side
Yacare CaimanOP
can I remove this
I have added
export const revalidate = 0; . But it not worksAsian black bear
maybe something like this: https://nextjs.org/docs/app/building-your-application/data-fetching/fetching#dynamic-data-fetching
I am not sure if it caches the RSC, or the fetch request
Yacare CaimanOP
I dont use fetch, so it might be RSC
European sprat
You'll need something to handle the client side fetching for when you return to the page
I use react query in the RSC which passes dehydrated data to the client and the client hydrates that data and keeps things updated
Asian black bear
@Yacare Caiman This seems related too: https://nextjs.org/docs/app/building-your-application/rendering/static-and-dynamic-rendering#dynamic-rendering
@Yacare Caiman I dont use fetch, so it might be RSC
Asian black bear
If a library uses fetch internally, I think stuff can get caught up in caching as well.
something I would check is if the route is marked as static or dynamic when you build the page
@European sprat I use react query in the RSC which passes dehydrated data to the client and the client hydrates that data and keeps things updated
Yacare CaimanOP
It would be nice if you give me an example or docs
@Asian black bear something I would check is if the route is marked as static or dynamic when you build the page
Yacare CaimanOP
I try using
dynamic='force-dynamic', it's not workingAnswer
@Yacare Caiman Is there anyway to make the server component fetch data (newest data)?
European sprat
You can make it fetch newest data by using router.refresh() but you'd need some way of triggering that, like in a useEffect in the client component which has a dependency for pathname
I burned a lot of time trying to fight with what you're experiencing and found the react query solution I linked to be the best
Siberian Flycatcher
My client component uses this prop as its initial state. Therefore, I could interact with the data by updating the state.
What type of interaction are you talking about? Can you describe the use case?
Spectacled bear
Why do always people get help but I dont 😄
@Spectacled bear Why do always people get help but I dont 😄
Nile Crocodile
Actually, it's the same case for me as well. 😂
@Nile Crocodile Actually, it's the same case for me as well. 😂
Spectacled bear
I mean whenever I post something I dont get any response then 10 min later somebody posts another thing and in ten minutes I see 100 messages and five people and this happened like 7 times in a row now 😄
May be they have 100 friends.
Spectacled bear
Yeah I'm sure they do 😄
Maybe we can help each other then, what's the issue for you?
Nile Crocodile
Nothing for now. I was just checking here randomly.
Spectacled bear
Ahh I see, you can check on my post it still has no response to it whatsoever 😄