Next.js Tutorial - 37 - SWR for Client-side Data Fetching

in this video let's quickly look at an example of client-side data fetching in nextgears with swr the name swr is derived from the stale while revalidate cache invalidation strategy and is basically a react hooks library for data fetching it handles caching revalidation focus tracking refetching on interval and a lot more for this video though we are not going to go through the different features this library has to offer we will just look at implementing basic client-side data fetching and for our example we're going to achieve the exact same result that we did in the previous video fetching the dashboard data what will change however is how we fetch the data back in vs code in the pages folder i'm going to create a new file called dashboard hyphen swr dot js within the file we define a component called dashboard swr within the component we need to fetch and store the data for rendering and this is where we need the swr library in the terminal run the command yarn add swr this will install the package once the installation completes let's import it import use swr from swr since use swr is a hook we call it within our component the first argument to this hook is a unique key for the request i'll just call it dashboard the second argument is a function where we fetch the data so async function and i'm going to copy the fetching logic from dashboard.js so a fetch request to localhost 4000 slash dashboard and convert the response to json once we have the json data we return it from the function now this data fetching function can be defined here in line but the common practice is to extract this into a function called fetcher let's do the same so cut and above the component const fetcher is equal to paste the function code now pass fetcher as the second argument to use swr this hook returns a couple of things from which we can destructure data and error data would be our api data and error is any error encountered while fetching the data now for the jsx we can use these two values so if there is an error we're going to return an error has occurred if there is no data we're going to return loading if we do have the data let's render the jsx which i will copy paste from the previous video of course dashboard data has to be replaced with just data and that is pretty much it if you now head to the browser and navigate to localhost 3000 slash dashboard we have the output from the previous video if i navigate to localhost 3000 slash dashboard hyphen swr we again have the same error as before because we forgot to export our component so export default dashboard swr go back to the browser we see the output from the component we have defined in this video and if you ask me data fetching with the swr hook is much simpler than using the state and effect hooks and not just that in db.json if we change the number of likes to 150 go back to the browser on the dashboard page we have to refresh to see the latest data however if i simply navigate to the dashboard hyphen swr tab the swr hook will automatically fetch the latest data and the ui is updated this is just one of the many features that swr offers for data fetching i highly recommend you give this package a try and i guarantee you'll prefer this over writing your own code for data fetching alright thank you all for watching make sure to subscribe to the channel and i'll see you in the next video

Channel: Codevolution

Views: 65,803

Keywords: Codevolution, Next, Next.js, Next JS, Codevolution Next.js, Codevolution Next JS, Next.js Tutorial, Next.js Tutorial for Beginners, Next JS Tutorial, Next JS Tutorial for Beginners, Next Tutorial, Next Tutorial for Beginners, Next.js 11, SWR for Client-side Data Fetching, SWR for Client-side Data Fetching in Next.js, Next.js Tutorial on SWR for Client-side Data Fetching

Id: CQ5yHU1wYOo

Length: 5min 46sec (346 seconds)

Published: Wed Jul 21 2021