Initial state as props passed by server component

[acoustic onyx]

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.

[untold willow]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

      🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in <id:customize>

      ✅ You can mark a message as the answer for your post with `Right click -> Apps -> Mark Solution`
      (if you don't see the option, try refreshing Discord with Ctrl + R)

[urban wind]

@acoustic onyx 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.

[acoustic onyx]

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

[urban wind]

that is expected, the data is cached client side

[acoustic onyx]

can I remove this

I have added export const revalidate = 0; . But it not works

[urban wind]

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

[acoustic onyx]

I dont use fetch, so it might be RSC

[rose berry]

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

[urban wind]

@acoustic onyx This seems related too: https://nextjs.org/docs/app/building-your-application/rendering/static-and-dynamic-rendering#dynamic-rendering

[urban wind]

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

[acoustic onyx]

It would be nice if you give me an example or docs

[acoustic onyx]

I try using dynamic='force-dynamic', it's not working

[rose berry]

https://tanstack.com/query/v4/docs/react/guides/ssr#using-the-app-directory-in-nextjs-13

[rose berry]

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

[brazen needle]

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?

[dawn current]

Why do always people get help but I dont 😄

[lament path]

Actually, it's the same case for me as well. 😂

[dawn current]

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 😄

[lament path]

Yeah. That's same. 😅

May be they have 100 friends.

[dawn current]

Yeah I'm sure they do 😄

Maybe we can help each other then, what's the issue for you?

[lament path]

Nothing for now. I was just checking here randomly.

[dawn current]

Ahh I see, you can check on my post it still has no response to it whatsoever 😄