Page not revalidating
Unanswered
Spot-billed Duck posted this in #help-forum
Spot-billed DuckOP
The page is not being revalidated on every request.
The content only updates when I refresh.
The content only updates when I refresh.
import prisma from "@/lib/prisma";
export const dynamic = 'force-dynamic'
export const revalidate = 1
export default async function ProfilePage({ params }: { params: { userId: string } }) {
const userId = parseInt(params.userId);
console.log('reval')
const user = await prisma.user.findUnique({
where: {
id: userId
},
})
return <main>
...
</main>
}41 Replies
Can you elaborate on "The page is not being revalidated on every request."?
If the content only updates after refreshing the page, This is due to the router cache, Next.js caches your page on client-side in order to reduce unnecessary requests
If the content only updates after refreshing the page, This is due to the router cache, Next.js caches your page on client-side in order to reduce unnecessary requests
To purge the cache, use
router.refresh or consider client-side revalidation with libraries like React Query/SWRI have the same problem here, revalidation on the client side is out of the question..
revalidation can happen on both client-side and server-side, while server-side revalidation (provided by Next.js) won't be instantly updated on client side due to caching
You can't update the page without a
You can't update the page without a
router.refresh for now. As an alternative, people may suggest on-demand revalidation in Server Actions but it is currently an experimental feature. I won't recommend that for youI understand
but I work in an ecommerce, if I update my cart only after the user accesses my page, this will greatly reduce my conversion number, this is unviable
the nextjs team shouldn't have released a feature like this without first releasing a server-side invalidation method
Server Action will be the solution, you can check it out for now (it's unstable)
But yeah... I hope Next.js has a better method for this, otherwise, I currently recommend client-side data fetching for complex applications
(you can use server components to pre-fetch data)
But yeah... I hope Next.js has a better method for this, otherwise, I currently recommend client-side data fetching for complex applications
(you can use server components to pre-fetch data)
one more point you can help me i think
I'm already using a server action in a function of mine that redirects to a route, and before redirecting it clears the cache, and it's working normally
but when I put my ravalidatePath at the top of my page it doesn't work clearing the cache, do you know why?
example:
export const fetchCache = 'force-no-store';
export const dynamic = 'force-dynamic';
export const revalidate = 0;
export const metadata: Metadata = {
title: 'ShopCart| Grão de Gente',
};
export default async function ShopCart() {
revalidatePath('/sacola');
(...)
return (
<>
...
</>
);
}Oh that's a mistake, you can read this: https://nextjs.org/docs/app/building-your-application/data-fetching/forms-and-mutations#revalidating-cached-data
This is called Server Action Mutations, it must be invoked inside of a server action
This is called Server Action Mutations, it must be invoked inside of a server action
Hence it doesn't work when you're calling the function in page
Is there a way I can make it revalidate whenever it enters my route?
hmmm, may I ask what your intent is?
Normally, if you want the user can always see the latest data, just use dynamic rendering which won't cache anything
Normally, if you want the user can always see the latest data, just use dynamic rendering which won't cache anything
yes, I always want him to see the dynamic data
Oh, then actually you're looking for dynamic rendering, which can be configured via route segment config
I'm using
but it's not working
export const fetchCache = 'force-no-store';
export const dynamic = 'force-dynamic';
export const revalidate = 0;but it's not working
Your configuration should be working, it is showing the stale data?
I have an example of this application in a vercel url, would you like to see it?
sure
this is an ecommerce, and this specific page is the cart part
add items to the cart and you will see that it does not update
i added a server action in the add to cart function, so it will work perfectly
however, add two products to the cart, click on the trash can icon, after that click on the top left logo to go home and then click on the bag icon at the top right to return to the cart
you will see that the products are still cached
example
Hmmm can I ask some details about the page?
1. Is it shown as a dynamic route that rendered at request time? (in build logs)
2. How do you show that "Your bag is empty!" message after deleting item? Are you using a state to manage this?
1. Is it shown as a dynamic route that rendered at request time? (in build logs)
2. How do you show that "Your bag is empty!" message after deleting item? Are you using a state to manage this?
Also, it is expected if you're not using Server Actions to update items, because Next.js won't update client-side cache despite for server action mutations
Yes I use a state to compare this, really, I didn't use a server action to control the cache when deleting the item from the bag.
the initial file of this page is this
@fuma Also, it is expected if you're not using Server Actions to update items, because Next.js won't update client-side cache despite for server action mutations
As above said, you may need to use a server action
Otherwise the page will be cached by client