Server vs. Client components
Answered
Abyssinian posted this in #help-forum
AbyssinianOP
Hello! I'm trying to make sure I understand the difference and the use cases for both of these.
Let's say I'm making a game that has a character with a bunch of attributes and an inventory. All the changes to the character object happen on the server (so that there is no cheating). This means that I need to get the character from the database after every interaction (such as buying or selling an item) and also once a minute on a timer. The object is going to be small, so it makes sense to re-fetch the entire thing every time.
Now, would every component, that displays this constantly updated data, need to be a client component? Or is it find to have server components handle this?
My original thinking was that only static data (like the layout of the page) would need to be server components, while any component that displays any character data (name, inventory, inventory items) would be a client component, but now I am beginning to doubt that. Would it be bad to handle all of that on the server and just keep having the server push those via dynamic APIs?
As you can see, I'm getting pretty confused. Could someone please help me gain some clarity? 😖 Also, and not sure if this is at all relevant, but I'm using Mongo for this.
Thank you!
P.S. — Here's what a sample character looks like:
Let's say I'm making a game that has a character with a bunch of attributes and an inventory. All the changes to the character object happen on the server (so that there is no cheating). This means that I need to get the character from the database after every interaction (such as buying or selling an item) and also once a minute on a timer. The object is going to be small, so it makes sense to re-fetch the entire thing every time.
Now, would every component, that displays this constantly updated data, need to be a client component? Or is it find to have server components handle this?
My original thinking was that only static data (like the layout of the page) would need to be server components, while any component that displays any character data (name, inventory, inventory items) would be a client component, but now I am beginning to doubt that. Would it be bad to handle all of that on the server and just keep having the server push those via dynamic APIs?
As you can see, I'm getting pretty confused. Could someone please help me gain some clarity? 😖 Also, and not sure if this is at all relevant, but I'm using Mongo for this.
Thank you!
P.S. — Here's what a sample character looks like:
type TCharacter = {
name: string;
location: string;
gold: number;
inventory: { id: string, amount: number }[];
}Answered by European sprat
The only way to easily and reliably have the browser updated with the latest changes is to use client components and something like react-query
9 Replies
European sprat
The only way to easily and reliably have the browser updated with the latest changes is to use client components and something like react-query
Answer
@European sprat The only way to easily and reliably have the browser updated with the latest changes is to use client components and something like react-query
AbyssinianOP
So then for all intents and purposes, the server components are for the kind of stuff that will never change during the user's session? Is that correct?
European sprat
You can use router.refresh() which will nicely refresh the page, preserving local state while re rendering the server component and sending the updates, but you need some way to trigger that router.refresh() -- say in a useEffect or a button click
But things are a lot more simple and less weird edge cases when you just use client components for when you're wanting to often update the data
@European sprat You can use router.refresh() which will nicely refresh the page, preserving local state while re rendering the server component and sending the updates, but you need some way to trigger that router.refresh() -- say in a useEffect or a button click
AbyssinianOP
That's what I'm doing now. In a button component I am calling
refresh to re-call the API. But, ok, suppose I rewrite everything in such a way as to use client components for displaying dynamic data. Now, at which point would I make the initial API call? Would it be on the server component (to render the page with data on the first load) or would the page load empty and then make a call from the client component to make an API call from the client and populate everything once that fetch resolves?European sprat
The react query page I linked shows how to implement it. You'd have a server component get the data (external API fetch, DB query, etc) using react query client then the data gets passed as initial prop or using rq hydrate to the client component
AbyssinianOP
Got it! Ok, it sounds like I need to do a bit of rewriting here. Thank you for your answers!
European sprat
Good luck!