0

So I have a next.js

Page.js server component inside of which I'm using fetch API which has some params which i should be able to modify from the client component(on button click), however I'm not sure how to do that as Zustand documentation doesn't say anything about server components. I can't use their regular useStore hook(since hooks can't be used inside of server components).

const nonHookStore = useStore.getState().lang; so it tried this, but this state isn't reactive(doesn't change on update from the client)

any other way to do this? (doesn't have to be Zustand, just the task)

TheCrunchyPotato
  • 25
  • 2
  • 6
  • The strategy to go for here is using the query string as state keeper. Client component creates a new query and navigates to the same page, updating the query. Server component then fetches data based on query. – Fabio Nettis Aug 30 '23 at 14:47
  • I'm not sure what "query string as state keeper" means, so am I supposed to create "route.js"(I haven't used it yet) use it on the client so that that I send the same value i'm supposed too send via state but now via query? (or do you mean plain fetch, or route.js, also is that the correct way to do this kind of communication?) – TheCrunchyPotato Aug 30 '23 at 15:00
  • You can use [`useSearchParams`](https://nextjs.org/docs/app/api-reference/functions/use-search-params) hook for updating data, which you can fetch in server side component using a custom route, which you can see [here](https://stackoverflow.com/questions/75362636/how-can-i-get-the-url-pathname-on-a-server-component-next-js-13) – adityanithariya Aug 30 '23 at 15:22
  • One more thing, if you update data at server side component, it keeps at server store, you need to channelize it to a client side component using props, so that it gets reflected on client side also – adityanithariya Aug 30 '23 at 15:23

0 Answers0