Question regarding "hydrating" server components
Answered
Satin Angora posted this in #help-forum
Satin AngoraOP
I'm not sure if hydrating was the right word, but basically what I'm trying to achieve is this:
I want to generate a small CSS grid with some values, and ideally that would be a server component to leverage caching. After the initial load, I would then like to render some buttons below that CSS grid that would for example be "+1" buttons, which would increase all the values in that CSS grid by 1 (just a stripped down example).
Is there a way to have the top one be written as a server component and then kind of adding that level of interactivity post load? Or do I just have to make both of those a client component?
Bit new to this new way of thinking, so would appreciate some guidelines on how I should be destructuring and thinking about such a problem
I want to generate a small CSS grid with some values, and ideally that would be a server component to leverage caching. After the initial load, I would then like to render some buttons below that CSS grid that would for example be "+1" buttons, which would increase all the values in that CSS grid by 1 (just a stripped down example).
Is there a way to have the top one be written as a server component and then kind of adding that level of interactivity post load? Or do I just have to make both of those a client component?
Bit new to this new way of thinking, so would appreciate some guidelines on how I should be destructuring and thinking about such a problem
Answered by Blue orchard bee
I, myself, would just make the grid client-side, unless SEO is relevant. If it's interactive then it's interactive.
Performance wise depends on a lot of factors, is the app going to be used over a stable decently fast connection? Spare a few ms more and have all of your interactivitiy loaded. (plus it's way easier to handle code wise)
Performance wise depends on a lot of factors, is the app going to be used over a stable decently fast connection? Spare a few ms more and have all of your interactivitiy loaded. (plus it's way easier to handle code wise)
3 Replies
..just do it? @Satin Angora just have a parent server component, fetch data in it and render your grid in it, and call a client component inside it with the +1 button
@Arinji ..just do it? <@351451657545973762> just have a parent server component, fetch data in it and render your grid in it, and call a client component inside it with the +1 button
Satin AngoraOP
Yes but how does that client component then tell the server component to update its values? The server component is what contains the grid with lets say like
<div>1</div>. The client component has a <button>Increment</button>, on click i want that 1 in the server component to become a 2Blue orchard bee
I, myself, would just make the grid client-side, unless SEO is relevant. If it's interactive then it's interactive.
Performance wise depends on a lot of factors, is the app going to be used over a stable decently fast connection? Spare a few ms more and have all of your interactivitiy loaded. (plus it's way easier to handle code wise)
Performance wise depends on a lot of factors, is the app going to be used over a stable decently fast connection? Spare a few ms more and have all of your interactivitiy loaded. (plus it's way easier to handle code wise)
Answer