Next.js 13 revalidatePath with API Route Handlers

Learn how to update data on a screen with the revalidatePath function in API Route Handlers.

Other Videos:

#nextjs13 #revalidation

[mahmudulmr]

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!

[gopallohar]

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'```

[tmoumimahmoud]

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?

[liu-river]

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.

[zhacks_admin]

I guess it's because you're using a client component.

I believe cacheing only works in fetch requests done inside of server components.

[loverman]

Does this work across multiple browser tabs? I mean if the revalidated response busts the cache for all tabs.

[phenom]

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.

[omarkraidie]

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("/")

[kingsleykelechionwuchekwa]

But this makes the cache Miss. You lose caching totally because the revalidate value gets ignored 😢

[rarloscoman]

getting this log in prod: Failed to revalidate tag Error: Request failed with status 400.

[furo.v]

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

[oviemenaokpowodu]

I did all this, yet my homepage doesn't revalidate.

[peroforrr]

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 😂