Next.js Discord

Discord Forum

Caching help on navigating

Unanswered
Scale parasitoid posted this in #help-forum
Open in Discord
Scale parasitoidOP
I have two pages.
1) Home page : Add items to the cart
2) Cart page: Show the cart items

Both the pages are server component pages.

After adding the items in home page and navigating to cart page , I am not getting the updated cart items.

I have used cache:no-store and next :{revalidate:0}, both doesnt give me updated cart on direct navigation, but it gives me updated items on page refresh.

Is there a way in which I can fetch the data from server whenever I navigate to '/cart' route?

55 Replies

Atlantic salmon
Where are you saving the cart Items in?
Scale parasitoidOP
server
for now its inmemory
KINXZ
you can call revalidatePath() function after mutating
@KINXZ you can call revalidatePath() function after mutating
Scale parasitoidOP
on button click from client component?
KINXZ
on server side
in client component you can do router.refresh()
Scale parasitoidOP
where on server side?
KINXZ
after you add the items
in the same function
Scale parasitoidOP
Will check this out
 const path = request.nextUrl.searchParams.get('path')


The path should be sent from frontend?

I have a post method to add cart items , where I want to revalidate the path but the path here is always null
KINXZ
in your case you could just do revalidatePath('/cart')
Scale parasitoidOP
I have this 
export async function POST(request: NextRequest) {  
  const data = await request.json();
  const addedProduct = cartHandler.addCartProduct(data);
  revalidatePath('/cart')
  return Response.json({ data: addedProduct }, { status: 200 });
}

Which is not helping me
KINXZ
i see
how are you calling the endpoint?
Scale parasitoidOP
export async function getCartProducts(): Promise<ProductType[]> {
    const result = await fetch(
        baseURL + "/cart", { cache: 'no-store' }
    ).then(res => res.json())
    return result.data
}

const Cart = async () => {
  const products = await getCartProducts();
  return ...
}
KINXZ
oh i thought cart is a page
Scale parasitoidOP
cart is a page
as well as api
route handler
ie /api/cart
KINXZ
the fetch goes to /cart thats why I am confused
Scale parasitoidOP
I have a cart page and /api/cart api
KINXZ
alright
Scale parasitoidOP
Cart page hits /api/cart API
KINXZ
try on cartt page
Scale parasitoidOP
to get all cart items
KINXZ
export const dynamic = 'force-dynamic'
Scale parasitoidOP
Doesnt work
riský
are you fetching your own api in server component?
Scale parasitoidOP
Yes I am
riský
read: https://nextjs-faq.com/fetch-api-in-rsc (and see that it isn't a good idea)
also the cache issue was because server side caches fetch requests too (just thought that you might want to know that... even though your usecase is not intended)
KINXZ
completely missed that somehow
riský
tbh when i see async function and fetch, i have 90% chance that they are doing it
KINXZ
when its in the FAQ , it has to happen often :p
Scale parasitoidOP
Would the same work if I change the base URL to ngrok url?
riský
instead of fetching your own api, you should just do the code there...
they both would be run in the server, and this way, you have better speed and acsess to more things (as the faq mentioned)
Scale parasitoidOP
You mean I should create a different server and then just do all the parsing/modifications in api folder?
KINXZ
no
just call the db query in the page (any server component) directly
no need for an api endpoint
Scale parasitoidOP
Little weird tbh.
Why wont they allow to do as I was doing? Like @riský mentioned I will just read through the faq again
KINXZ
because a server component runs on the server already
Scale parasitoidOP
From the above example, I replaced the API call with direct call to in-memory data;
Eg:
const cartProducts = []
const cartHandler ={
  getCartProducts: function () {
        return cartProducts;
    }
}
const Cart = async () => {
  const products = cartHandler.getCarProducts();
  return ...
}

It still doesnt update?
@KINXZ just call the db query in the page (any server component) directly
Japanese anchovy
and he should make sure he has a return statement from that component
Scale parasitoidOP
When I navigate to /cart , the /cart page will be built and then sent right?
During build , the server cannot be accessed (from faq) becaue it wont be running and hence I wont be able to fetch
Is my understandinfg correct here?
My brain just works so nicely when using "use client", cannot comprehend server components
riský
use client is basicly what nextjs was before app dir
Scale parasitoidOP
yuss