Revalidate with Next.js | On-Demand Revalidation in Nextjs 13

⭐ Become a full-stack web dev with Zero To Mastery Courses:

👇 Follow Me On Social Media:

(00:00) Intro
(00:05) Welcome
(00:30) Starter Code & Lesson Plan
(01:38) Application Overview
(03:40) Two Types of Revalidation
(04:54) Route Segment Config Options
(05:45) dynamicParams config option
(06:03) revalidate config option
(06:36) Setting the route segment config option
(07:32) Build App & Try Revalidating
(10:50) How Background Revalidation & ISR works
(13:19) On-Demand Revalidation
(14:08) Create & Store a Secret Token
(16:24) Revalidate API Route
(17:55) Revalidate Request URL
(19:51) Revalidate Request Handler
(24:26) Trying out On-Demand Revalidation
(27:10) Blog Workflow & Wrap-up

📚 Tutorial References:

#nextjs #revalidate #revalidation

[dawid_dahl]

Finally someone who teaches caching with Next on a good way. Subscribed! 🙏🏻

[ichiroutakashima]

I really appreciate your contents. I've learned a lot from this channel since then. I really love that these lessons are divided into parts and sections.

It gives me the time to actually practice them at my own pace and not follow and simply watch a full 10-24-48 hour videos.

[mikeysauce]

I liked the revalidate.ts info and the explanation on including it from any new post from md or cms etc. 🔄 Thanks

[mogo]

Hi, thank you for the great content. I have a question.
If i get this correctly, In this way, it's revalidating only the given path. How can we revalidate multiple paths at the same time? For example, I have shown a few testimonials on the home page and all the other testimonials on another page. So, if I add a new testimonial, I need to revalidate both the '/' and '/testimonials' paths. How can I do that?

[aimnblbol]

Thanks for this great video. How can you update your blog post markdowns without rebuilding your site? Is this possible knowing that the site is in CDN? Thanks

[noiam]

Hi @DaveGrayTeachesCode I watched your videos and I am stuck at tags there's no video on tags in your playlist can you please make one I am trying to work with Shopify and creating the custom app I want to implement tags too so, please

[swapnildon]

Hi,

I have used on demand revalidation. It invalidates the cache. But the next day its showing me a very old version. Then we have to hit the revalidate URL again to clear the cache. Any workaround for the same.

[gastonavogadro]

Great content thanks! Do you recommend using next 13 for production or is it better to stick with 12 until stable app directory?

[blossomdoom]

Hey Dave thanks for this video! Would really appreciate a video on mutations and how to properly use the router.refresh function on statically generated page that has client components. Looking to implement a like button that immediately shows the incremented likes once the like button is pressed. Thanks!

[dharmeshborda]

Hey Dave you are awesome! I really appreciate your efforts and salute you, I try much content for authorization using next-auth but I couldn't, I believe in you that you can make perfect authentication system like we built in express, Thanks in advance and waiting for same

[dhavalmehta]

Hello Dave,

Can you please help me with one query ? After adding new blog post is it necessary to run the API manually from Postman / Thunder Client ? Or it would be handled by Next JS

Thank you !

[uzochukwuemeka]

Thank you so much we do appreciate your content. Please Dave can create an ecommerce project with a headless cms . that project will wrap most of next js features

[anton]

Great content! Is there a reason why after I build my project, the data from local database doesnt update the same as in "npm run dev"? Could this have to do with revalidation, where in dev its instantly pulling data from my database?

[nastyideas]

Thanks for an awesome content!
any ideas on how the api routes should change when we deploy to production?
App builds fine locally but on Vercel it fails with Failed to fetch etc. I have removed the localhost when NODE_ENV === "production" but still.

[grafikgraficzny]

Hi! My problem is I have a update button component which updates database. Then i use revalidation api to update static generated dynamic page (with getStaticProps, getStaticPaths) with updated data. After revalidation i use router.push() to go to detail pages (with new data expected) but I need to make manual refresh to see new results. Its seems to be a common problem but maybe you have solution about that?

[kenanmuhic]

I am currently working on NextJS application where I want to cache pages on cloudfront (don't ask me why). Anyway, I want to set Cache-Control's maxage to 300 seconds. I know I can do that by forcing pages to be dynamic and setting header in next.config.js but in my specific case I cannot do that. So my second option is forcing pages to be static, in this case maxage is set to 60 seconds (this is also true with using export const revalidate). Now my question is, by using second option, is there any way to set maxage to more than 60 seconds.

[tanmaypatra]

I have built a CRUD module. When I add a new record, I redirected to Listing page after successfully adding. But in the Listing page new record does not appear instantly, but it appears after 1 refresh. Can you guide me how can I see added records right after adding??
Process:- Add new record >> Save through API >> Calling on-Demand Revalidate >> router redirect to Listing page >> Old records ! >> Manual Refresh >> getting new records. !!
Please help

[haicoders]

so how about route handler, do we call manually in client side to revalidate the blog, pls answer dave 🙏

[endlessia]

Look like I found everything I need in this video :) Thank you !

Sadly the « const revalidate » is not working on my side 😭

[hnry_t]

when running "npm run build" can some one help explain what the difference between static and SSG? aren't they the same thing?

○ (Static) automatically rendered as static HTML (uses no initial props)
● (SSG) automatically generated as static HTML + JSON (uses getStaticProps)