How to Correctly Use Fetch In Next.js

in today's video I want to address this one nextjs feature that I see people using wrong or to be more exact not taking the full advantage of this feature by understanding this feature and using it properly we can make our applications more performant and our code much cleaner and easier to understand without further Ado let's see what this feature is and how to fully take advantage of it in your next SS application okay so let me just walk you through real quick our setup so we have the next test application which has this kind of dashboard of users and this user data is coming from an API and we have this node server as our API so all we have here is just an endpoint for/ API SL users and it will return the users which is just a JavaScript array of a couple of users down here so this is kind of a mock API for our example and the second part of this is the actual nextjs application that is rendering our dashboard over here and it looks like this so we have in demo one folder we have a page and inside of that page we are fetching the users from the API I just showed you and then in the page component we are returning the user count component which looks like this so we are just getting the users from the props and then rendering the uh count of the users and then we are also displaying a user list and it gets the users as a prop tool as the last component and inside of it we are mapping through the users and displaying the name and email for each user and then also we are rendering a latest user component where we pass in the users as a prop and that component displays the latest user from the aray so this is our example application it displays the count the user list and the latest user okay so this looks like a pretty basic application but believe it or not we are not taking full advantage of the nextjs features when we are doing things like this because the problem so to speak here is that if you noticed we fetch the users in our component in the top level component and then we pass in the users as props for the user count user list and inside of that user list component we still needed users for the latest user component and for that we also passed in the users as a prop so you can see that this can get pretty complicated pretty quickly if we are passing in the users as props to the components so let me show you the better way to do this so I'm going to close these files and open My Demo to and let's open it up in the browser too as you can see it looks looks like the same page but we're doing something different in here so if we open up the page.js file we can see that we no longer fetch the users from the API inside of this component because this component doesn't actually need the user data then if we look at the user count component inside of that we have the fetch users function which will fetch the users from the API and then inside of the user account component we are calling that function and displaying the user data and then if we look at the user list component again inside of that we have a fetch users function where we fetch the users from the API because this user list component needs those users too and then we map through the users and then we render the latest user component and notice here also that we are not passing in the users as a prop for this latest user component because if we open that up we can see that inside of that component we again fetch the users from the API and then use that data to render our latest user component so now we are fetching the user data in each component that actually needs that data well isn't this super inefficient you might ask Well normally it would but next test provide us with feature called Fetch memorization this means that if we need to use same data for example the user data in multiple components in a tree we don't have to fetch the data globally and forward props between components instead we can use the fets inside of the components that actually need the data without worrying about the performance implications of making multiple requests for the same data so what's happening under the hood here is that next TS is actually checking all the server components so this fetch memorization only works in server components and if it sees multiple fetch requests for the same API endpoint it will automatically just make one request and cast that and then whenever the other components are calling the same fetch request with same API endpoint it will return the data from the cash instead of making the request multiple times to the API so let's take a look at our demo 2 example and see if this actually works so what I'm going to do is open the API in my WS code so this one over here and again this is just a simple Express node application that is uh returning the users from the endpoint and we also have a console log here logging to the console whenever this API endpoint is executed and let me just stop the server clear everything and then start it again like this so now whenever we are are making a request to this endpoint so if we open this page again we can see the console log over there and the data over here so now we have our demo 2 example so this is calling the fets in each of the components that needs it so now let's see what happens if we refresh the page okay the data is shown and we can see in our vs code that we got three new console logs over here so this endo was executed three times and if we open up the nextjs application we can see that we are making the fetch request in the US list component in the latest user component over here and also in the user count component over here so looks like it's still making three requests and it's not actually cashing them well the reason for this is that we are running our next test application on our Dev server and this fetch memorization is only activated in production so whenever we are running our uh build application not in development mode so let's change it up and I'm going to stop the nexts server and I'm going to build my application like this and then run the production build with yarn start like this so now our application is running like it would in production so now I'm going to open up my uh server code again again I'm going to close this clear it and then start it again like this and now when we refresh the page for the demo two we can see the application is displaying all the data we need and we are only getting one request to our server we can test it again by refreshing the page and again our endpoint is called only once so looks like the memorization is working because again we are calling the fetch in each of our components so the three components the user list user count and latest user but even though we are calling it in each of the components only one request is sent to the actual API endpoint so next TS automatically handles cashing the fetch request and serving the data from cash for the other components so by making the fetch request in each of the component that needs it actually makes our application code much uh simpler and easier to understand so in our page file we are just returning the components and then in our other components where we need the user data we are fetching it and of course in a real application you might probably want to put this fetch users function to some shared place and just import it to the each of the components I just wanted to demonstrate the point here and copy paste the same code to each of the components and there is still one advantage I want to show you an example off when using this kind of approach so let's say for example that we wanted to display on the top of our page the latest user so all we have to do here is import the latest user component like this and then we can just drop it over here like this save it and now that we are running our production build we need to stop the server build the application again and then start the server again like this and now when we refresh the page we get the latest user component up top over here so we didn't have to know anything about this latest user needing the users data as a prop or in any other way and we could just drop the component over here and because the data fing logic is inside of the component we didn't have to worry about it at all where as in our uh demo 1 example if you look at the page we would have had to know that the latest user needs the user data and then pass it as props and possibly we would have needed to add a fetch for it outside of the actual latest user component which just makes the whole thing more complicated and the code is not as easily reusable and understandable as it is with our demo 2 example like this if you found this video helpful you might also enjoy my exclusive newsletter where I share more in depth nextjs and web development content that I don't talk about anywhere else the link is down in the description if you want to sign up

Channel: Tuomo Kankaanpää

Views: 1,050

Keywords: nextjs, react, server components, next js, next js 14, next.js 14, next js 13, web dev simplified, fireship io, fireship, james q quick, josh tried coding, jack herrington, vercel, freecodecamp, theo, lee robinson, lee robinson next js, memoization, fetch memoization, caching, next.js caching, nextjs full course, nextjs full tutorial, nextjs api, nextjs react

Id: hUotqWTKmOc

Length: 10min 38sec (638 seconds)

Published: Sun Mar 31 2024