Next.js 13 - Data Fetching & Suspense Boundaries

in this video we will learn about data fetching in Nexus 13 and we will also take a look on suspense boundaries and how you can use those to enable criminal loading of your UI so let's dive in so over here I have a fresh Nexus project open and let's start by getting rid of the pages folder because we won't need that and then let's create a page inside of an app folder and from there let's just export a function like this and let's try to start the server and by the way if you didn't already watch the video I made about the app folder explaining how it works and how the routing in the new app folder works I'll leave a link in the description so you can check that out but yeah let's start the dev server okay we are getting an error and it's saying that we need to enable the experimental app folder because it's at the time still experimental so let's do that we just add to the Nexus config this experimental property now let's try to start the server again and then switch to the browser and try to open up the page okay great so we get the hello text so everything is working and for this application I was thinking that let's create this kind of small dashboard that shows some user data and some company's data so that way we can demonstrate how to fetch data and also how to use the suspense features so let's start by going back to the vs code and as we can see here next is created for us this root layout file so here I'll just add a header over here saying that dashboard like this and yep it appears over there great then let's go to the page JS and Define the users and companies sections in here so let me do that okay so here I added some code so I made two columns that first one displays the users and the second one displays the companies over here so let's save it and see how it looks so this is kind of our dashboard view so on the left we have the users and companies on the right now as we can see we are just inserting some static data over here in the code so what we actually want to do is fetch the users from an API and then fetch the companies from an API and before we do any fetching you can probably tell that these could be their own components so let's add a user's component and companies component and thanks to the new app folder structure we don't have to create any components directory and put them in there but we can just add the components straight into the app folder and use them from there so let's start by adding the users component and inside here I just export a function and let's paste in the code we created so from here like this and then inside of the page let's import that component and then use it like this let's save it and see how it looks so nothing changed everything is still working great let's do the same for the companies so I add a new file to the app folder called companies then export a function and then copy the code from the page so over here and paste it in and then in the page I import the component and let's display it save it and check the browser looks like everything is working great so now we can start working on the data fetching and where are we going to fetch the data well I have an API running on localhost with one endpoint returns some users data and then another endpoint Returns on companies data over here so let's start with the users so I'll open the user's component over here and with Nexus 13 we can actually just Define the fetching logic right here in the component which is create in my opinion because it's right there where you need it and you don't have to hide it or bury it in some other functions or some other files so it's as easy as just defining a new function up here and then inside of here we can use fits to fetch the data so let's do that and the URL let's copy that so it was there and paste it in and then oh let's add a weight like that and then just return the rest.json like this then inside of the component up here we can call that function so let's do that and let's add a sync over here great and now inside of this list let's Loop those users and display some data like this so we are just adding list element for each user save it and let's switch to the browser and go to our web page and looks like users map is not a function but let's refresh the page and we still get the error let's see what's happening over here oh I made a mistake because the users are coming in a variable called user so let's do this over here so in the API we can see it returns an object with users over there so let's try this now so save it and switch to the browser refresh the page and yeah what do you know there we have some user data displayed so let's do the same for companies so inside of the company's component at the top I will Define that get data function and inside of the function I will use fetch to call the API and then return the Json like this and then inside of the component I will call that function and let's add the async and then let's map through those companies and show some data like this and all we need to add this one over here too like this so let's save it and then switch to the browser so now we have the dashboard and on it we have the users on the left and some companies on the right that's great so that's how easy it is to do data fetching with Nexus 13 so we just need to add the fixing function up here and then call it inside of the component let's take a look on how we can make this even more user friendly so what I will do is actually stop my Dev server and go to the browser refresh the page so we see the site can't read page and then fire up my server again and then refresh the page so now and you can see it takes a little bit of time before it displays the page and that is because the company's endpoint actually takes two seconds to load the company data and then return it so the application is persuading the API for two seconds before it gets the data from the API and for the user's endpoint it takes roughly one second to return the data so the application is not rendering anything before it gets all of this data and one thing we can do is add a loading indicator in our application so if we add a new file to the app folder called loading and Export a component out of it like this and then if we again stop the dev server switch to the browser refresh it and then start the dev server and try to refresh the page so take a look what happens So This Server is running then the browser refresh the page as you can see it actually shows the dashboard heading and then the text loading and once the loading is done it will display the users and companies so this is much better already and how this works is that if we take a look on our layout over here so next JS will right away serve this layout and the heading from it but then as a children we have the page which has some loading to do inside of those components so by adding the loading component inside of the app folder we can show a custom loading indicator while these components are being rendered or while the data is being loaded so that's one new feature of the Nexus 13 that we can add these special files called loading there are a bunch of others also you can take the documentation for those so there is I think also error and template and maybe some there but at least the loading is for the loading indicator so next test 13 detects that okay this component is still loading so let's show the loading indicator this is good but we can make this even better because if the users take only like one second load and then companies take two seconds to load wouldn't it be better to show the users as soon as they are loaded and then the companies as soon as they are loaded well yes so let's do that next and how we can do this is with a suspense boundaries so let's go to our page.js and I will start by importing suspense from react like this and then I will use it and the suspense takes a prop called fallback which is a component that will be displayed while data is loading you will see it in a second so for this I will just add a div saying loading users like this and then I will move these users inside of here like this then I will do the same for the companies like this so let's save it and see what happens so we are on the dashboard and now if I refresh the page you can see it first displays loading users loading companies and as soon as the users are loaded so the API Returns the data it will render the user's list while the company's list is still loading so let's try that again so I will refresh the page so it shows the loading users and then loading companies so this way user right away sees the dashboard and some loading indicators that data is loading and then when any part of that data is fetched it will automatically be displayed right away rather than waiting all the other requests to also complete before rendering the page so let's try out changing these users out of that suspense call so now the users is not inside of the suspense boundaries I'll save this and let's try to refresh the page and as you can see it first shows the pages loading text that came from the loading indicator we defined here and after the users are fetched then it will display the users but still be loading the companies because the companies was inside of a suspense boundary but let's move these users back inside of that suspense boundary and save it and refresh the page so you can see it displays the both floating indicators right away and when the users are fetched this place demand when the companies are feds displays them so this is how you use the suspense boundaries inside of an excess 13 application I hope this video was helpful and please let me know in the comments what you think of this and if this video was helpful and also if you are not already please hit the Subscribe button below too

Channel: Tuomo Kankaanpää

Views: 20,007

Keywords: next.js, next js, nextjs, next.js 13, next js 13, next 13, react suspense, suspense boundaries, react, javascript, next js conf, next js tutorial, next js tutorial 2022, next js tutorial for beginners, james q quick, lee robinson, quillermo rauch, tuomo kankaanpää, tuomo kankaanpaa, fireship, fireship io, reactjs, next.js tutorial, next.js tutorial for beginners

Id: dDTW-psAwuw

Length: 13min 14sec (794 seconds)

Published: Thu Oct 27 2022