Thank you so much for this amazing video! I was struggling with a similar issue, and your explanation of revalidatePath with API Route Handlers in Next.js 13 was incredibly helpful. My problem is now solved, and I have a better understanding of how to handle data fetching in my Next.js projects. Keep up the great work!
You have 2 types of cache. Client Caching and Server caching. revalidates in "use client" component reset cache on your browser. revalidates in server components will reset server's cache. This not a bug neither a feature. You just need to think that in the end you develop 2 different things a backend server and a react-app bundle file (browser)
Edit: in app router revalidatePath is used when you want to regenerate a chached server component may be because you added a row in database or something To make api route dynamic, you use ```export const dynamic = 'force-dynamic'```
thank you , But what if I want only to revalidatePath only after 5 min or 5 hours ? is that possible in the official docs I can't find somthing like this?
Is server action with revalidation the only way to see live update on pages after some CRUD operation without having to refresh the browser? When using server components.
After following this video, I am still unable to make my homepage update automatically after adding, updating, or deleting data. While everything functions correctly on my local machine, the homepage data does not update when I deploy it to Vercel.
All I want is to revalidate the GET on my homepage when I add a collection from my data base. I tried to add revalidatePath and revalidateTags into both the GET and the PUT route handlers nothing seems to happen. In addition, i event set { cache: 'no-store' } on the get on my homepage still doesnt update my homepage when I make a PUT request then programatically go to homepage with router.push("/")
Yeah this is a huge issue I've run into and has resulted in just using client components everywhere with react-query to keep the data in sync. That being said, I've just discovered that using revalidatePath in a server action and setting the path to the "homepage" (in your example) results in the page refreshing when navigating back to it. Edit: I spoke too soon. It does work when you navigate using router.push and Link but using the browser back button does not refresh it.
This doesn't work so well for server actions. If you have a list of products, and the server action adds one product, and then you execute revalidatePath within the action, the page will be updated with the new data, but there's no way to know when the page is updated, therefore there's no way to show a loading message or spinner during the time the new data is being streamed to the client. The documentation recommends wrapping the action call with mutations using the useTransition hook, but this does absolutely nothing, and could be omitted. The isPending from the transition isn't useful either to determine when the data was loaded and when it's being streamed. EDIT: Actually startTransition does wait for it, I odn't know anymore lol
I sometimes get an error like this about having no revalidate tag in development and have to refresh the page or restart the server over and over again until it works. But then in production it works without an issue. I hope that helps
Thank you so much for this amazing video! I was struggling with a similar issue, and your explanation of revalidatePath with API Route Handlers in Next.js 13 was incredibly helpful. My problem is now solved, and I have a better understanding of how to handle data fetching in my Next.js projects. Keep up the great work!
I totally agree - awesome.
You have 2 types of cache. Client Caching and Server caching. revalidates in "use client" component reset cache on your browser. revalidates in server components will reset server's cache. This not a bug neither a feature. You just need to think that in the end you develop 2 different things a backend server and a react-app bundle file (browser)
Edit: in app router
revalidatePath is used when you want to regenerate a chached server component may be because you added a row in database or something
To make api route dynamic, you use
```export const dynamic = 'force-dynamic'```
thank you , But what if I want only to revalidatePath only after 5 min or 5 hours ? is that possible in the official docs I can't find somthing like this?
You can export a revalidate constant and set it to a certain time (in seconds) in your page.tsx
Is server action with revalidation the only way to see live update on pages after some CRUD operation without having to refresh the browser? When using server components.
Yes
Does this work across multiple browser tabs? I mean if the revalidated response busts the cache for all tabs.
I guess it's because you're using a client component.
I believe cacheing only works in fetch requests done inside of server components.
But this makes the cache Miss. You lose caching totally because the revalidate value gets ignored 😢
After following this video, I am still unable to make my homepage update automatically after adding, updating, or deleting data. While everything functions correctly on my local machine, the homepage data does not update when I deploy it to Vercel.
Try putting "export const revalidate = 0;" at the bottom of your home page file to see if that fixes it
All I want is to revalidate the GET on my homepage when I add a collection from my data base. I tried to add revalidatePath and revalidateTags into both the GET and the PUT route handlers nothing seems to happen. In addition, i event set { cache: 'no-store' } on the get on my homepage still doesnt update my homepage when I make a PUT request then programatically go to homepage with router.push("/")
Yeah this is a huge issue I've run into and has resulted in just using client components everywhere with react-query to keep the data in sync.
That being said, I've just discovered that using revalidatePath in a server action and setting the path to the "homepage" (in your example) results in the page refreshing when navigating back to it.
Edit: I spoke too soon. It does work when you navigate using router.push and Link but using the browser back button does not refresh it.
Its a bit late to ask but did you get a solution to this problem?
This doesn't work so well for server actions. If you have a list of products, and the server action adds one product, and then you execute revalidatePath within the action, the page will be updated with the new data, but there's no way to know when the page is updated, therefore there's no way to show a loading message or spinner during the time the new data is being streamed to the client.
The documentation recommends wrapping the action call with mutations using the useTransition hook, but this does absolutely nothing, and could be omitted. The isPending from the transition isn't useful either to determine when the data was loaded and when it's being streamed.
EDIT: Actually startTransition does wait for it, I odn't know anymore lol
isPending stays true until the revalidation has finished. Sometimes it doesn't seem to work tho (maybe because server actions are still in alpha)
getting this log in prod: Failed to revalidate tag Error: Request failed with status 400.
I sometimes get an error like this about having no revalidate tag in development and have to refresh the page or restart the server over and over again until it works. But then in production it works without an issue.
I hope that helps
I did all this,yet my homepage doesn't revalidate.
You could try this one: ua-cam.com/video/ztswJg7MYCs/v-deo.html
Wait… I thought this was the standard
Nextchay at the beginning it's free but after you have to pay to use it or you will can't access it forever.
Euh marketing 😂