On-demand revalidation in NextJs 14
Vložit
- čas přidán 2. 08. 2024
- In this video, we'll look at on-demand revalidation in NextJs 14 using `revalidateTag` and `revalidatePath` functions.
👉🏼 The Ultimate NextJs 14 Course
→ www.hamedbahram.io/courses
👉🏼 Project source code (Github)
→ github.com/HamedBahram/next-r...
👉🏼 Work with me
→ www.hamedbahram.io/hire
Chapters
0:00 Intro
1:30 Cache revalidation
4:10 revalidatePath
6:45 revalidateTag
7:55 unstable_cache
9:00 Project code
15:30 Recap - Věda a technologie
Actually it looks like you are the Bob Ross of programming videos.
Every thing seems to be so easy and sometimes I fall asleep while listening in my bed 😂😂😂
The Bob Ross is a compliment for sure, but I'm not sure about the falling sleep part 😅
@@hamedbahram IT was definitely meant as a compliment.
@@LehmannMr I know😅appreciate that man!
Exactly what I was looking for - directly in my feed.
There you have it 🙌🏼
Simple, informative, to the point 🎉
Thank you! I appreciate that 🙌🏼
Whenever i recieve your channel's notification, I click on it and i always learned something new. Thanks Bahram.🙏
Glad to hear that! My name is Hamed 😅
@@hamedbahramThanks Hamed. 🤠
It was handy, and also easy to understand. Thanks for sharing 👍
Glad it was helpful!
Your videos are amazing! Thanks
Thank you! Glad to hear that.
A great clear video. Looking forward to the next one as I'm struggling with next caching when using rsc and revalidation - trying to work out which cache is sticking - is it the data cache or the router cache. Getting very inconsistent behaviour. Probably something I'm missing!
Absolutely!
Great video. I learnt a couple of things
Glad it was helpful!
Syukran Katsiran
You're welcome!
Thank you man!
Happy to help!
looking forward to caching video .. please keep as in-depth as possible .. cover server side caching as well ..
Sure 👍
Thanks
You're welcome!
Great video.
Could you make a video with Clerk where signup in credentials, and add a role to the user by default? :) Or maybe choose like two different roles when signup, like consult, and busniess? :)
Thanks! I have one coming up soon on the channel.
great! :)
Thank you! Cheers!
Awesome. Can you make an example using the suspense component to simulate a skeleton loading and revalidate the cache? I have a bug, it seems that suspense does not work when i revalidate a tag or path, it only work on initial loading!
Suspense only runs the fallback the first time. you can either use a `template.tsx` file or give a `key` prop to the component that is wrapped.
thank you for the detailed and awesome video as always. I have some query, so in case we have separate backend (node js) for API's , do we need to call server action for all necessary revalidation (paths/tags) which is not required if we do not opt for revalidation as we have already separate API's in node/express.js ?and what if we have mobile application for the same web portal but they don't hit our server actions, as they will be only communication with through API, so in that case, how to revalidate?
You'd be using an HTTP cache in that case that sits between your origin server and client app be the web app or mobile.
great video, thank you very much!
I have a question, how could you revalidate the cache (tag) when the content of a headless cms changes?
Using a webhook to hit an ‘/api/revalidate’ in your app where you can call the revalidate functions.
@@hamedbahram makes sense, thanks u again!
Hey Hamed sorry for off-topic question man, but is it a good idea to learn React & node/express at the same time ? I know I wanna go full stack but some say I should first learn react to a decent level then begin learning backend, not sure what's the right call.
If you have the bandwidth to learn both at the same time, you can! There is no right or wrong answer here. Getting React to a decent level before diving into backend stuff might be easier, but I actually learned node/express first before learning React. So do what works for you :)
so revalidatePath will revalidate all data tags that are somehow referenced by the page on that path/route? Does it work if we have deeply nested calls to fetch or conditional fetching, as in, there are layers between the page and data layer calling fetch?
Good question! I assume so :)
Does the cache still cache a fetch with the same params but with a different header, let's say if the bearer token has change but I want to still keep the last data no matter the header changed in the fetch, the tags would help with that?
Good question! I'm not sure 🤔 maybe test it and see. let me know your findings
Here you used a revalidate button to get updates from the CMS, what if we wanna revalidate on CMS updates but without the button?
You would do that inside a route handler (api endpoint) that received a webhook from your CMS.
Hi Hamed, is it possible for you to extend this video example with Suspense and Loading state on revalidation? If you can point to any github repo / video / documentation, it would be great. Thanks
Hmm 🤔 sure thing, I don't have a repo to reference but I'll have it mind for future videos.
hi mr hamed, im curious with the revalidateTag() function. does this function will be automatically executed by vercel since it is server actions? or do i need to call it through certain button or integrate it with browser's reload button? my use case is to revalidate data from api on one page
To revalidate data at a timed interval, you can use the `next.revalidate` option of fetch to set the cache lifetime of a resource (in seconds). If the revalidation is on-demand or in response to an event you can use the `revalidateTag` function in your server action.
At my workside we still use the "Pages" directory, and does this only apply to NEXTJS 14 or "App" directory
yes this only applies to the `app` router.
Hi! If i use this for example, im a manager and i have users that only me can read, if i put a tag on this like "user", any user that went to the same page gonna see my users cuz i fetched first? So the tags should be like "my-id-123-users"?
Good question, you should not put user specific content in the global cache, unless you're authorizing the user in a middleware before responding to the request.
I noticed that on demand revalidation is currently used based on an event. When just doing simple fetches etc, do you recommend setting up time based revalidation?
It depends how often your data changes and whether or not you want the most recent data in your app.
I have a question. I am using Django Rest Framework on backend and Next.js on frontend. When i hit the login api then after successful login, I receive accessToken and refresh token in json like this {"access": "xyz", "refresh": "xyz"}. I need to send the access token on every request to the backend server in Authorization header (headers: {Authorization: "Bearer token"}) . Where should I store the token in local storage or cookies. I am confused when I store in cookies I cannot send the request fom client components and when i store in local storage i cannot send the token with server components.
The session data is usually stored in signed and encrypted cookies which are decoded by your server code in a stateless fashion. On the client side the check is typically done via a fetch call using a data-fetching library like SWR. You can use libraries like next-auth or iron-session to handle all this for you.
@@hamedbahram I got the answer. I should store access token in cookies (not http only) and refresh tokens in http only cookies so I can access the access token anywhere (server components and client components) and then I can also refresh tokens stored in http only 🍪
So you have to redirect() to the current path or the changes won't be displayed? What if you want to revalidate and refresh a layout?
There is a second parameter you can pass to the `revalidatePath` function as I explained in the video.
What would have been the results if you did not include the redirect('/') in the server actions?
Can't revalidatePath() and revalidateTag() refetch the content and refresh the page with the new content, revalidating the cache on the page without having to redirect the user to the page '/' where the cache is being revalidated?
Idk if i'm being clear, just want to know if that redirect('/') line is necessary if you're not redirecting the user to a different page or url path
Just checked myself, I cloned your repo and tested it out. I do not understand why if i remove the redirect('/'), and by only doing that, when i click on revalidate users or revalidate todos, the whole page gets revalidated. Behaves as if i clicked the revalidatePath button.
Doesn't make sense to me, isn't revaidateTag('TAG') only meant to revalidate a certain piece of cache? If i remove the redirect it revalidates the whole page, I hope you can help me out with it :c
It just doesn't make sense to me why it's NECESSARY to redirect to the same page in order to avoid revalidateTag('') from revalidating the whole page instead of only revalidating the specific data.
I don't have an answer for that! I guess this happens because both resources are on the same page. You can raise this question in Github issues or discussions on NextJs's repo and see if you can seek more clarity, you can include my video/code as an example.
I'll probablky do that! It gets fixed if i refresh the browser after revalidating one of the tags.
Before the manual browser refresh both datas are re-fetched and revalidated (which should not happen) and after the manual broser refresh the old data returns (non revalidated) and only the especific revalidated tag is fresh data
I guess that is what redirect('/') is doing, just skipping that refresh because its doing it under the hood, still doesn't make sense tho, the data does come to the browser...
How would u revalidate a dynamic path? for example i could have "/project/123", i want to revalidate that exact path. would the "revalidateTag("/projects/123")" work?
I demonstrated this in the video! You can use `revalidatePath("/projects/123")` to revalidate a specific page and `revalidatePath("/projects/[slug]", "page")` to revalidate the dynamic path.
@@hamedbahram thanks a lot ❤
Not able to revalidate the root path in the app build with pages router
The video and the mentioned APIs are for the `app` router.
You can place multiple tags in a single function ?
Yes.
Do you know if it is possible to regenerate the sitemap after adding a new blog article with on-demand revalidation, for example?
Should be possible.
@@hamedbahram any ideas on how to do it? So we don’t have to redeploy everything, right?
which font you are using in your code Hamed ?
Operator mono
it's awesome thanks@@hamedbahram
So what if i want to revalidate the page every hour ?
How can i configure that ?????
Did you watch the video? I talked about time-based revalidation first with the `revalidate` property.
Did you use any time interval for it ?
I couldn't find it in the video.
Just wanted to revalidate my CMS contents in vercel.
For now, I'm using WEB HOOKS from contentful to redeploy and build again when new data is added to contentful
@LehmannMr I have a problem the revalidation using api route handler I m using the latest "next": "^14.1.4",.
I have written my revalidation route in src/app/api/revalidation/route.ts
revalidatePath('/', 'page')
I wanted to update the home page. The postman response is good. But does not revalidate the data. I also have see some github threats issuses in next js 14. I also tried the revalidatetag but its not working.
Thanks in Advance
FYI I used fetch inside useEffect
When an on-demand revalidation is triggered, the appropriate cache entries will be purged from the cache.The next time a request is made, it will be a cache MISS again, and the data will be fetched from the external data source. Therefor if a user is on the home page, and a webhook calls your `/api/revalidation` the user won't see the change unless they refresh the page.
@@hamedbahram yes I have obviously make the new request and refresh the page. The new data is not fetching. I am using the app router in next js 14. I have read somewhere in git hub this is a bug in next js 14.
Please create a video on shimmer effect if the image is not loaded in NextJs 🤌🤌
Absolutely! will have in mind.
waiting for it thanks sir@@hamedbahram