Next.js 13 Caching and Revalidation

if you're using next js13 you may have noticed that your data is cached by default so for example this is a next js13 app that gets the current time stamp using an API you'll notice when I refresh the page nothing happens even though my code is written like this saying to get the value of Time Each time this page loads using this get time function I created it still only gets the time the first time I load the page the reason is with next js13 in server side components whenever you use a fetch request the data that is returned from that request is automatically cached so by default the data on the screen will not revalidate so if you want the data on the screen to revalidate each time a user visits that screen there's some manual configuration you have to do to force the page to revalidate if you'd like to follow along you can go to nextchat.ai this is a chat GPT powered service with something called a prompt Library I created a prompt that can help you follow along you can learn more about nextchat by watching this video that's coming on the screen go to nextchat.ai click sign up that should take you to a page like this if you come over here to This Global prompt Library you can click that button you can search through the prompts by saying next js13 caching and it's that one right there copy The Prompt come back to next chat and I'm going to go ahead and paste this prompt here and now you're ready to start a conversation I'm going to say my data is not refreshing whenever I refresh the page it stays the same how do I fix this and so it'll explain how your data is being cached and then it will explain the options you have to stop caching so the first one is you can add this cat no store parameter to your fetch request so I'm going to copy that come back here paste that there in your fetch request as a second parameter and now if I go back to my website it should refresh and as you can see now each time I refresh the page new data is being returned so that is your first option your second option is next.js has something called revalidate you can put this as your second parameter and your fetch requests instead this number here represents seconds so let's say three seconds now if I come back to my page you'll notice I can click the refresh button I'm clicking it clicking it nothing's happened I'm clicking it clicking it nothing's happening it will only revalidate every three seconds so that is your second option your third option is something called segment level caching to find out how segment level caching works you can go to the documentation which I'll put put in the description below the first thing to notice here is that nexjs does not recommend using segment level caching they recommend you use either cash no store or next revalidate on a per fetch basis because it will improve control over caching maybe you don't want to revalidate all the data on a screen maybe you just want to revalidate some of it so it's good to go on a fetch by fetch basis but you can put this export const revalidate function at the bottom of your screen so for example down here I'll come here and paste that right there I'll switch this to three to represent three seconds and now let's remove this second parameter and let's see if this works so I'll come back here refresh I'm clicking refresh and you'll notice it's only refreshing every three seconds even though I'm clicking refresh over and over and over again and that is how caching and revalidation works with your fetch request in server side components let me know what you think about this feature in the comments below do you like that they cache by default or do you find it kind of annoying this honestly threw me off guard let us know your thoughts in the comments below like the video if you'd like to see more videos like this don't forget to subscribe and hit the Bell icon to be notified when new videos come out thanks for watching and I'll see you next time

Channel: Native Notify

Views: 11,570

Keywords: next.js, next, js, 13, cache, caching, revalidation

Id: ztswJg7MYCs

Length: 4min 23sec (263 seconds)

Published: Mon Jun 05 2023