#Server vs. Client components

11 messages · Page 1 of 1 (latest)

river pecan
#

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:

type TCharacter = {
  name: string;
  location: string;
  gold: number;
  inventory: { id: string, amount: number }[];
}```
raven arrowBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

      🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in <id:customize>

      ✅ You can mark a message as the answer for your post with `Right click -> Apps -> Mark Solution`
      (if you don't see the option, try refreshing Discord with Ctrl + R)
unkempt ferry
#

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

river pecan
unkempt ferry
#

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

river pecan
# unkempt ferry You can use router.refresh() which will nicely refresh the page, preserving loca...

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?

unkempt ferry
#

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

river pecan
#

Got it! Ok, it sounds like I need to do a bit of rewriting here. Thank you for your answers!

raven arrowBOT
#
✅ Success!

This question has been marked as answered! If you have any other questions, feel free to create another post

Jump to answer

[Click here](#1136111520162525185 message)