Cache explained with Next.js 14 — Course part 16

caching in JavaScript application is very useful and it's important for several reasons and in this lesson I'm going to explain to you what is caching and how to use it in a next gs13 application the first reason why you would use the cache it would be for performance reasons of course when you use the cache you save the data locally and it improves the performance because you don't have to call all the time the API to refresh the data the problem is that probably the data would have changed in the database and probably your cash is overwriting the Regeneration when you call your API we're going to see in this lesson how to avoid this the second reason would be about the bandwidth you don't want to call your API all the time because it costs you money and every time you are going to request your API it's going to launch a process which could be long or not depending on the amount of request your IPI is receiving at the time you do your call the third reason would be a faster user experience when you got data that is cached actually your application is served quicker than it is not the first reason of course we already talked about it we have a reduced load uh server uh implication into the process so offload server resources are reducing the cost of the server and the last reason of course it's because you would like to have for instance enough offline access to your application so if you want to let your user to access to the application offline you would use the cache all right back in my application I got two pages I got the page app and the page posts and both of them are a server side rendered so it's server component and here we've got a function that is rendering and it's exactly the same function in here I could have externalized this function but here I just copy paste it that is rendering a random number which is mat floor etc etc this example you see it in a lot of lessons on YouTube and I think this is the best way explain how cach is working okay so both of those uh functions that we get in here are calling the function here random three digigit number so let's come back in here and we see that we've got on the on page number 184 and we've got a link to post pages so I'm going to click on link to post pages and suddenly I arrive on the post page with a new number which is 564 okay if I come back to the homepage and we got to remember the number here if I come back to the homepage suddenly I got 10084 but there's a problem right because here I'm supposed to call random digit number and every time I'm going to call this function I'm going to have a random number right and here I don't got a random number so what's happening in here is that we are currently using the cache so on server component by default the data that we've got is cached so this is why probably if you are using the um server components you would have some cases where the data is not regenerated don't worry it's totally normal we are going to show you later how to regenerate the data directly inside your server component okay so I'm going to come back to uh the post uh uh page and here I refreshed it and we got 635 and if we switch between home and and post we see that we have data that has been cached okay if I come back to the post page and uh let's say that in here I would like to transform this post page into a client component does it work the same so I'm going to go on the top I'm going to type use client in here okay and there we go and with this use client I'm going to get back and down there I put some um some Tailwind CSS to show you the difference so here we got the client component we got 784 so post page is now a client component and we get 784 if I come back home I get a server component with 443 and if I switch suddenly the client component got a new number and if I come back home I still got 444 and if I come back here we see that every time I switch the client component doesn't cach by default so this is the first lesson the client component doesn't cash by default and the serers side rendered component is caching by default so as a client component the function rendom three digigit number will be called all the time at rendered however on the server side it's keeping its first value until the moment I regenerate the page but if I don't regenerate the the page I stay at the number that I had before at first let's make now the demonstration with an endpoint inside our API here we've got a API random endpoint of a get method with a next response returning to us an object random with exactly the same um uh the same function that we used inside our server side component application I created two new pages for the client and for the server demonstration so we are right now on server side rendering and I got a call to get random number the function that is going to call my API random and if I come back in here we see that I got 877 and if I update the number stays the same by default on server side the cache here is no store we see that by default the cache is going to be applied on on top of every call so you can call as much time as you want as many times as you want it will stay on the first uh results that he got so if you want to avoid this you can pass here cash no store and every time that I'm going to call my server side rendered page we see here that the number will change by default here is going to be Force cach for SSR which means that it's going to stay on on the first value that he got and it's going to keep uh the cache as long as we manually recall the API to get a new number let's do exactly the same with our page client side render so it's exactly the same as the SSR page all right and here we are going to call our um API we're going to have the random number that is coming back and here I'm going to go to the endpoint and basically here I have the number displayed so we see that every time that I call I got a new number we are on the client side client side doesn't cash by default okay by default actually it has the cash no store and with cash no store actually we never cach the data so every time the component is going to refresh the data let's say that you want to do the opposite you are going to use cash Force cash okay so I'm going to come back here I got 85 and every time I'm going to update my page I'm going to have 815 so on the client side you can cach by using Force cache and by default it's no store and on the server side it's the opposite by default it's false cash and here it's no store okay let's come back to this server side page that that we created before and we've got this function get random number that is called and we got a random number for some reason we would like to update this number x amount of time per day because we don't want that all the time we will keep the same cache data okay and we probably want to stay on serers side rendering in here because we got some SEO uh optimization or SEO configuration on this page and we would like to keep it on the server side so what can I do if I come back here to remove this number and update this number and by extension here we talk about the number but actually I'm talking more about refreshing the data on a product let's give an example let's say that this page is a product that you cached but probably the price of the product will change every hour and you would like to actually update the cache what can you do you would like to turn this into a client component by default but you can keep it actually as a serers side rendered component and what you can do here is to use next and you can use revalidate and revalidate here it's a parameter that you pass to say hey I want to keep this page on serers side rendering and I would like to keep the cache so keep the data for a certain amount of time and let's say that here it will be 5 Seconds every 5 seconds I would like to revalidate the data I would like to refresh the number so here we're going to have one number it's going to stay 5 seconds and after 5 seconds it's going to refresh call again okay we got a number here which is 267 and I update I update I update and suddenly the number change I update I update I update 900 17 950 every 5 Seconds the cache will be updated because I pass the next revalidate that I got here I would need to pass next revalidate to update the data X seconds otherwise it would keep always the data that has been cached so we use next revalidate when we want to say to the application use the cache however every seconds update the cach

Channel: CodewithGuillaume

Views: 1,726

Keywords: course, free, code, javascript, startup, dev, nextjs 13, cache

Id: XBbXciVXWlQ

Length: 10min 32sec (632 seconds)

Published: Wed Oct 11 2023