all right what's going on everyone in N we have two composes use Fetch and use a sync data to handle data fetching within our applications use fetch is going to be the most straightforward way to perform data fetching while use async data allows you to wrap your asynchronous logic for more complex calls and this can be extremely useful in working with third party libraries like superbase or if you wanted to make multiple API calls within your component and under the hood use fetch is actually nearly equivalent to use async data it's just some DX for the most common use case now by default Nu uses view suspense component under the hood to prevent navigation to Pages until all asynchronous functions have been resolved to see this in action I've created a server route to fetch some products from a third party API and then delayed The Return by 2 seconds and inside of a page called products we're using the use fetch composable along with the key were to wait to make the request and then output these products inside of our template inside of our application if we attempt to navigate to the products page after the application has been hydrated you'll see that we're going to wait on the homepage until the API has resolved and then it will be navigated to our products page now Nu also provides a built-in component called nux loading indicator that we can use to show a progress bar while navigating between pages and this can be useful to let the users know that something is happening we can add this either in the app. view file or if you have layouts you can add it within there then when we navigate to our products page by def fall at the top of our application we're going to see that progress bar now although this component is useful to let the users know some action is occurring inside of the application in my opinion the default Behavior preventing navigation to Pages while waiting for asynchronous functions to resolve does not make for a great user experience what would be ideal is navigating to that page immediately and providing a user some sort of loading State and both use Fetch and use async data allow for this by providing an option object parameter and pass in the property of lazy and setting that to true this will then expose a pending variable in which we can use to display a loading state to the user while waiting for the asynchronous functions to be resolved so on the products page let's add the object pram to the use Fetch composable and pass in the lazy property and set that to true we're also going to want to destructure the pending variable from the return response then in our template we can wrap the product cards in a new template and use a v and VLS directive with the pending variable to properly Implement a loading State and back in our application if we navigate to the products page again after the application has been hydrated we're going to be immediately taken to the route where we're going to see our loading State and after the Asing function resolves we'll see our data to take this a step further and improve the look of our UI we could use the Nu UI library and create a simple skeleton for the layout using the U skeleton component if you don't have nuui installed you can do it very easily with this command here which will not only install it but it's also going to add it to your modules in your n configuration so to start we'll just want to clone the existing marker for the product cards and replace the image and text with the use skeleton component and configure these with a proper height and width for the V4 Loop by default I have the limit set to be 10 products on the API endpoint so we can update this V4 Loop to say in 10 instead of referencing the products array this will then create 10 instances of our skeleton markup then if we rigate back to our products page we're going to have a nice skeleton outline of the UI while waiting for our asynchronous function to resolve and in my opinion this approach makes for a much better user experience than blocking the navigation and also when we load this page in for the first time during SSR the data will still be there now as a quick tip instead of having to Define this options object pram for the lazy property Nu also provides two additional composes called use lazy Fetch and use lazy async data these accomplish the same thing as passing the property and the options object parameter but can make your code a bit cleaner if you were only using that single property also one more thing that I would like to point out is when you're using either the used lazy fetch composable or the pram option with use fetch you don't actually need to include the keyword of a weight in front of the composable it's not going to affect anything if you do include it so if you would like you could remove it but I personally just tend to keep it for consistency purposes as it's not going to affect anything regardless if you include it or not all right so that's going to wrap it up for this video definitely let me know what your thoughts are on this approach to handling data fetching I think it just makes for a much better user experience after the application has been hydrated but anyways thank you for watching if you enjoyed it be sure to leave a like on it and subscribe if you're new and I'll see you in the next one take care