Mastering Fetch API and Caching in NextJS

hi there and welcome to another video today I am going to show you a little thing that I have learned recently about the fetch API using nextjs and it's something I wish I'd known earlier because it will help with basically new projects but if you have a large project it could also help you there and what it is is when we fetch data the default for the fetch API is to Cache that data and sometimes that's annoying for example if you upload an image or something and you want to see that change reflected immediately you don't want that to be cached obviously it is better to have certain data cached because or at least certain API requests cached because it can reduce the intensity on the CPU and the resources and the load that you have on server resources it is beneficial to have caching on your fetch requests but at the same time it can be quite annoying if you want to see data updating in real time or at least on the next subsequent request what I'm going to do today is I'm going to show you how I do that now so I set the the cash on global level to no cach and then that means for every fetch request in the project we will basically set the the caching configuration on a pair request basis to default to caching that request so that every subsequent request gets the same data and that usually is for like a not a infinite amount of time but a certain amount of time the default caching usually takes a while for it to update so let's get into it as you can see I've got these products and this is just a simple nextjs project I've set it up using Create next app and I'll show you what it looks like so as you can see we've got basic nextjs project set up using Create next app and I have set up an API endpoint and this is basically just to mimic what you would do so this could be actually this could be any API end point it could be something you might be getting some crypto data or something from some external Source but what I'm doing is I'm just mimicking any API it just happens to be within the same project this could be absolutely anything this API in point so we've got our page and we've got our products page which does a fetch request to the API for/ products which is here and we are getting a list of products and we're just sending them back at Json and then we are getting the Json and we're putting it into a products table now get rid of this so you can see here it's coming in product name product description currency what we want to do is we want to to test how this cash works so this is actually you know server side fetch request so actually this is all happening on the server it's in a react server component so we're not going to be able to see any network tab fetch requests in here because as I said it's all happening in the nextjs server not in the browser it's not sending uh fetch request from the client to the so so you could really if you really wanted to you could just doesn't really make sense in this context to fetch a list of products say if we were getting them from our database doesn't really make sense to to do what we're doing here it only really makes sense in the context of fetching data from an external Source because what we do is we just do con products equals away to database. fetch and then that you'd get the products in here you wouldn't need to do an API call necessarily but for for the demo purposes we are doing this we're getting the products and if I go into these products and I just remove one save it and then I go back here refresh you'll see nothing's happening right it hasn't deleted the product and nextjs does have this revalidate revalidate property on here so we do revalidate you can see we've got this revalidate and this is the the interval it takes for us to for for it to basically clear the the cache and so if I revalidate this fetch request and I make it revalidate in 10 seconds and then I do ro okay and then I so I've got two products there by bring back this one you'll see still two products keep refreshing and then okay 10 seconds later it brings in this one so that's all good but there's another thing right we've got this cash and you have to you can either specify this cash property or the revalidate property you can't do both at the same time but if I do no cache you'll see that there's three products and when I delete one there's two products right right are basically not caching the data here but rather than having to specify no cach for x amount of requests I would just want to do a global no cache and the way we do that is we go into our layout our Global layout so this is the one in our root the root of our project in the app folder and then we do export const fetch cach you can see there we've got this the fetch cach option controls how nextg statically catches caches fetches by default it statically caches fetches reachable before any Dynamic hooks are used and it doesn't cash fetes that are discovered after that so we got all these options here and what we want to do or at least in my case what I would typically do is default no store because this allows any explicit cat option to be passed into fetch but if default or no option is provided then it defaults to no store this means even fetches before a dynamic hook are considered Dynamic we do this fetch cash equals default no store that means I don't have to specify that so if we get three we delete one and you can see there's two so there we go we don't have to specify this we can just remove that and it will always fetch we always make a new fetch request each time it will never just cash the fetch request that's ideal but then what if we want to revalidate next revalidate every 30 seconds or let's just say 60 seconds to give us enough time so want to revalidate every 60 seconds we've got got two products refresh when we add this new product 60 seconds later we can get that product as you can see we're just waiting so keep waiting maybe should have done this a bit less but for the purposes of the demo I just thought I'd show you still waiting for this and there it is 60 seconds later it works the next revalidate still works however when we remove that and now we've got three products we fetch that and then we delete one and it's gone that I thought was a really neat way to just default to not caching absolutely everything if you've got a big project like I have I've got other large client projects that I've migrated to the app rouer and I've migrated from react query to just using the plain fetch because it's useful there's things like duping which means it never duplicates the the fetch request like runs it twice it just always runs it once it's the default way I think should be using fetch arguably we can use a tool like react query and in certain cases it might be useful but in the case where we use the fetch API it is great and it's fast performing it's the default way to do fetching and it's annoying at times where cach is the data by default so this was a good cool little way to prevent that from happening on Global level and then you can go ahead and set it on a request basis thought that would be useful for sure and share if you found it useful please let me know leave any comments and give me a thumbs up if you are so kind and thank you for watching

Channel: Taylor Lindores-Reeves

Views: 829

Keywords: coding, web development, javascript, nextjs, fetch, caching

Id: qgpqFRnh5xU

Length: 10min 17sec (617 seconds)

Published: Sun Feb 04 2024