How to pass state between and client and server components?
Unanswered
Japanese Bobtail posted this in #help-forum
Japanese BobtailOP
I am building a music player for learning. I need help with state management in Next.js 14 attached component tree.
Question: The
When a track is played, I want to add a border to this item and remove the border from the previously playing track. Since the entire list is generated on the server, I'm not sure how to remove borders from other items. Maybe I can achieve this if the app state is accessible in
I am new to web development and reading about Zustand. Any suggestions on what store I need? Should I wrap the whole app in some type of context provider?
Question: The
play-button.tsx is a client component inside the track-item.tsx server component. I cannot pass the handleClick function to play-button from Page.tsx, which is a server component. How can I achieve this?When a track is played, I want to add a border to this item and remove the border from the previously playing track. Since the entire list is generated on the server, I'm not sure how to remove borders from other items. Maybe I can achieve this if the app state is accessible in
track-item.tsx.I am new to web development and reading about Zustand. Any suggestions on what store I need? Should I wrap the whole app in some type of context provider?
7 Replies
Just make the entire thing a client component 😂
When it starts pushing back, just let it go.
That would be my professional suggestion.
React Query will set you free
Japanese BobtailOP
yep, I made the page component client and using tanstack query for making api calls. Used zustand to pull currentTrack, IsPlaying and other states in to child components. So far its working. I may refactor it later since I need mini player client component on all pages. Also,I don't want to make root layout client. problem for another day. Thanks for the suggestion,
Here is something else to explore : I can store currently playing track and isplaying in url state as well.
You absolutely can use url to store the track though I’d recommend doing something more unique than the name of the song assuming there is some kind of id for the track behind the scenes.