#refresh page server server side

57 messages · Page 1 of 1 (latest)

spiral lantern
#

I have the following situation:

// page.tsx
export default async function CartDeliveryPage() {
  const cart = await getCart()
  return (
    <>
      {cart.items.map((item, index) => (
        <ChooseDelivery item={item} />
      )}
    </>
  )
}

// ChooseDelivery.tsx
export default async function ChooseDelivery({item}) {
  await updateDeliveryMode({ shippingMethod: item.shippingMethod })
  return (
    ...
  )
}

Basically I fist get the cart, then for each item in my cart I update the delivery mode.
The problem is that after I update each delivery mode, I want to trigger a getCart() again to get the updated cart containing now the delivery modes.

What would be a clean way to handle this situation ?

molten belfryBOT
#
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)

spiral lantern
#

up

green pine
#

not enough info here but maybe router.refresh()

#

supposing what you want is a client-side update

#

this will download an up to date RSC payload

#

could be easier to use client-side state too

spiral lantern
#

Both my page and my component are server components so I would like to keep everything in server components if possible

plush fable
#

not sure about your use case but does updateDeliveryMode need to live in the ChooseDelivery component? also curious but can you combine the 2 actions?

if you want to keep them as server components and not do some hacky useState + useEffects, what I'd do is create a server action to call getCart, then updateDeliveryMode for each item in the retrieved items, then revalidate the tags/path for getCart

async function updateAllItemsInCart()
const items = await getCart()
for each item, updateDeliveryMode(item)
return updatedItems

OR if the above is not what you want and somehow want to call getCart again

async function updateAllItemsInCart()
const items = await getCart()
for each item, updateDeliveryMode(item)
revalidate tag/path for getCart()

server component:
await updateAllItemsInCart()
const items = await getCart()
green pine
#

btw what are you doing actually?

#

didn't notice that the update was a side effect of your RSC

#

is there a reason for that?

spiral lantern
#

The thing is that updateDeliveryMode() returns nothing.

So I need to getCart() again or as you suggested do a revalidatePath("/cart/delivery").
Of course the revalidatePath seems to be the cleaner option but unfortunately it doesn't trigger the getCart() after the updateDeliveryMode()

green pine
#

We don't get why you run updateDeliveryMode() while rendering your component

#

normally this is for side effects that do not have any effect on the render so no need for a refresh

#

eg increase a view count in a blog

#

anyway @plush fable answer sounds right given your code

#

just move the updateDeliveryMode side effet upper

spiral lantern
#

I run updateDeliveryMode() so my cart get the delivery modes inside of it and when my page is rendered I can display all the delivery modes but more importantly the default ones (thanks to the updateDeliveryMode())

plush fable
green pine
#

you shouldn't get data from them

#

sorry for recommending that too

#

I mean, maybe for the side effect

plush fable
#

i meant the getting within the server action Eric, not returning

green pine
plush fable
#

yeah I meant if he wanted to stick to his pattern of

  1. getCart
  2. update items within cart
  3. getCart

he can create a new server action to

  1. getCart, updateItems within cart, revalidate getCart (this is the server action, because there is mutation)
  2. call getCart again
green pine
#

yeah I was double checking Lee Rob blog and he uses an action for counting views

#

in a slightly similar fashion

#

I remember talking about this issue of fetching data requested by a child component when RSCs were released but sadly lost track of it... anyway moving the update items within cart in the parent component like you recommended is the way to go

spiral lantern
#

I don' t get why we use a server action. We are already in a server component

#

revalidatePath() only works in server actions ?

plush fable
#

Sorry pepew, it doesn't have to be a server action, but I like to denote my mutations as server actions too since they might eventually be used in client components

green pine
#

if it has a side effect then it's a server action indeed, if it just fetches data it doesn't

#

basically server actions = POST http verb

#

not a server action = GET

#

GET should not have side effects ideally

#

POST should not be used to get data ideally (POST cannot properly cache stuff at infra level)

#

though I might oversimplify

#

but do you use revalidatePath here?

spiral lantern
#

Ok I get it.

And last thing, does revalidatePath() rerender the server component like a router.refresh() would do it client side ?

spiral lantern
green pine
#

ok ok becasue that would have been weird to have revalidatePath

#

the code is still weird to be fair, having updateDeliveryMode called for each item this way sounds off unless I am missing something

spiral lantern
#

Ideally updateDeliveryMode should return the cart

plush fable
spiral lantern
#

And even better my backend should handle all of that

spiral lantern
#

But I agree that's weird.
I'll have a discussion with my backend team

green pine
#

in a backend for frontend paradigm you need to aggregate data before hand, so getCart should have the info

spiral lantern
#

Yep

green pine
#

if you need to fight the backend people ^^

spiral lantern
#

Anyway thank you guys

molten belfryBOT
#
✅ 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](#1204093449700376636 message)