Communication between compontents
Answered
Brown bear posted this in #help-forum
Brown bearOP
My Sidebar contains of a Header which has Chapter under them. And they belong in the end to a Book.
Each Header should be able to call or fetch from a database how many chapters a user has read.
Each Chapter should be able to fetch if a chapter is read or not by the user.
To make some UI stuff:
I've decided to mark my Header with a green background when it's selected and only one Header should be open at time.
I've also decided that a Chapter have a blue background so I can see which Chapter in a Header it's currently working on.
My initial thought was that the Header and the Chapter components could be server rendered to be able to fetch from the database and do some logic(read or not etc.), but I would need to have a state in my Sidebar component to track which Header / Chapter is selected and did not work since the children has "use server".
Am I overcomplicating everything here? Or is there a "standard" way of doing this.
Each Header should be able to call or fetch from a database how many chapters a user has read.
Each Chapter should be able to fetch if a chapter is read or not by the user.
To make some UI stuff:
I've decided to mark my Header with a green background when it's selected and only one Header should be open at time.
I've also decided that a Chapter have a blue background so I can see which Chapter in a Header it's currently working on.
My initial thought was that the Header and the Chapter components could be server rendered to be able to fetch from the database and do some logic(read or not etc.), but I would need to have a state in my Sidebar component to track which Header / Chapter is selected and did not work since the children has "use server".
Am I overcomplicating everything here? Or is there a "standard" way of doing this.
Answered by Laustin Spayce
If you're using a path it's very easy to highlight what's selected:
The individual components can be client components, have
It's best not to overthink and overcomplicate things, Server-Side-Rendering is an optimisation. It's completely fine to put your whole sidebar in a client component and do it the old fashioned way
url.co/book/{foo}/heading/{bar}/chapter/{qix}The individual components can be client components, have
useParams() and extract the Header and change the colour if it matches (or you can do it server side if you're so inclined)It's best not to overthink and overcomplicate things, Server-Side-Rendering is an optimisation. It's completely fine to put your whole sidebar in a client component and do it the old fashioned way
2 Replies
Brown bearOP
If you're using a path it's very easy to highlight what's selected:
The individual components can be client components, have
It's best not to overthink and overcomplicate things, Server-Side-Rendering is an optimisation. It's completely fine to put your whole sidebar in a client component and do it the old fashioned way
url.co/book/{foo}/heading/{bar}/chapter/{qix}The individual components can be client components, have
useParams() and extract the Header and change the colour if it matches (or you can do it server side if you're so inclined)It's best not to overthink and overcomplicate things, Server-Side-Rendering is an optimisation. It's completely fine to put your whole sidebar in a client component and do it the old fashioned way
Answer