Next.js 13 Data fetching ALL IN ONE video

hi guys welcome back to another photos called video this channel is where we discuss and learn new skills around the topics of design and development if you want to grow your skills and learn new things that are coming up please subscribe for more videos just like this don't forget to smash the like button for me this really helps me to create more content in this video we'll be learning about the different breaking changes in the next setting specifically how we fetch data I'm inside the next GS turning official documentation release and we are pretty much interested in one specific feature which is this particular uh thing called Data fetching so recently react uh also like introduced a support for first class support for promises and which is a powerful way of data switching and handling promises inside of our components and uh with the new next setting we could leverage the use of native web fridge API which is extremely great and it also automatically deducts which requests we could like achieve this with a single one API and the example is unlisted here so which is great and we can also use uh the different life cycle kind of methods which was introduced in next to verb with the next studying and more improved way which a single API for example if we take a reference to the old next tool documentation inside data featuring we have couple of options like get server side prompts get static paths get static props client-side and incremental static regeneration so we'll be going through all the data fetching that are available in next to work and making it possible in next terrine and this is the next GS 13 official beta documentation and still this is not a stable release but still we can can experiment things out and for example we could like use this bridging we if you widget fetching then all of the stuffs are listed here for example we'll be building this simple mini application where um we'll be covering all the ways how we can fetch data in next stating if we go to This Server then this particular thing is server rendered and basically this is similar to what we do in get server side props next world and we are doing this in next reading and uh in this client this is basically a client fetching which we could use some other libraries for doing this client requests for example maybe SWR xgos or react query something like that also we are covering uh other stuffs like uh get static paths and get static props basically this list is uh get static props and this is get static pads for example if you click on it and this is implementation of git static paths so basically we are covering most of the things that we could do with the data fetching um in next setting so without any delay let's get this started so let's first create a blank next 13 project with npx grid next app latest let's give it a name uh next study in data featuring and we will just stick with JavaScript for now and we will accept some eslint configuration looks like our project has been created so let's navigate to this project after opening this project you may see some difference in the file and folder structures here so there are a couple of changes in the app directory and folder structures and next year's uh introduced the app directory with the new features and conventions however you can still use the the old way and it's Backward Compatible and we have uh we don't require in use of the app directory but you still can uh make the use of amp directory which we will be using so first of all let's go ahead and delete this Pages directory and we will be creating a new directory and call it app and inside this app we will create another directory for example let's um have some pages for now and we can call it page.jsx not index.j and jsx which was before but we rename it to paste.jsx and inside this page.jss what we want to do is we want to copy and paste some hard-coded content this is basically our main page so which are just adding few um paragraphs what is data fetching in next three and all stuff okay that's so after that's done let's go ahead and create another file and we call it layout and inside our file layout.jsx what we want to do is we want to basically wrap our all of our application inside this layout so we will import Styles which is from this global.css and we'll also be creating map bar component which can be inside of shared folder which shares its component across the application so let's go ahead and create a folder and call it a shared and inside Shield we want napbar.jsx all right it looks cool so inside napar.jsx what we want to do is we want to import link from next link and couple of styles we are using CSS models for our demo purposes which is net bar a DOT module.css so let's rename this home model which is not used anywhere to net bar dot module.css all right so um inside this NEPA model we will just add a few lines of um styles just uh to add a Sprinkle of this um colors inside of our anchor links and it's a napper everything looks fine and we are using this snap bar inside of our layout right here and passing every um other components or Pages as a layout wrapper all right so after that's done let's go ahead and create um a couple of folders that we defined here as a route and it's server client and static props so basically we are going over all the data fetching options that are available to next to World in next 13 so how would we handle that situation all right so uh basically what we want to do is we want to create new phone soldiers for each of it first one would be client and second one would be server and third one would be static props all right so um in each of this folder that we created which is server client and static props we will make a main file which is not index.jsx but piece Dot jsx and inside here we want to use make the use of react functional component RFC yeah and call this client client page and just return client page all right so uh after that's done probably we don't need to import a react here uh this can be done with this so inside server will also make um page.jsx and uh also paste in some um server page right here okay so this can be server page all right so um the last one would be this particular thing which is static props so uh static props we will also create piece Dot jsx which would be which should act like the main page inside here and we will also paste in uh some stuff here uh for example and call this static prop uh page okay so this is the static Pro page all right so looks cool let's go ahead and spin up our local server because we have made all of our route which is uh inside of net bar which is inside here and we are taking the path of server client and static props which we created a folder for each of it and made our main file which is page.jsx pretty much straightforward till now so let's run npm run Dev spin up in localhost probably 3000 app directories experimental okay so we need to add this experimental flag over here so let's go ahead and copy the stuff and we'll paste it right in here all right so uh let's go ahead and run Dev and spin up our local server and check whether we have everything working or not and um looks like everything is working fine everything the route has been set up for example we can go to server which sees a server page inside client which is client page and static props it says static profit page basically we created each of the page inside this folder which is how the routing Works inside next right previous straightforward so first of all what we want to do is we want to start everything with the get static props right so what is get static Pro I want to bring this old documentation here so it basically get static props is the page that is generated in the build time and the all the edit stimul is pre-generated so it's not on the request time but it's build time and we'll write our console log function so that we can see that in action first thing first let's go to our static Pro page so inside this page let's first import the things that we need we'll be making the use of um the link and also the use Hook from the react which is the new hook and we will create a new um new function for example this can be simply asynchronous function and we will call it get characters basically this get characters are returning some Json data from this API and for the data we are using Reiki multi API which is an awesome API endpoint which has both graphql and wrist endpoints which is great what you want to do is we want to grab all the data that's returned from get characters and with the use of the use hook right so we just use and then right here right and after that's done we will return some jsx with some data that's mapped and which should be something like this like this is git static props in action and uh get static props which is kind of a thing we do in the modern extra Gene and this is what it is let's go ahead and save this and let's see now we have the server running and let's see this here and let's take a refresh and here we have our data right we have all of our of our data that's populated what we want to do now is we want to um add a control log for example uh let's add a console.l log here so so that we um we will know that how this is like being called for example if we go to our page console and refresh and um as you can see we don't have any Contour log printed right here but if you see the browser then you may see something like here here right so this is um why this page is generated in the build time and um we don't see anything going to log in the output in the browser so um this is how we replicate things with get static props inside of next 13. let's take a look at another way of data fetching get server side props if we take a look at the old documentation here um the get server side props as it says calls the API whenever we visit the page how can we achieve this in modern react I mean modern next 13 so I'm inside the server route which just says server page right so inside This Server page we want to basically use um the use um thing um the use hook like we can use the use hook and uh we are basically uh getting characters the same API endpoints we are getting characters we are and this is an asynchronous for example this is an asynchronous action um and we are waiting for it to be resolved um and particularly the thing that we need to note about is we have this additional parameters that we pass in to the fetch API uh function um into this particular section where it says that we need to add the Cache no store with the Fetch and the URL and pass this one which is some additional parameters so to say and similar which acts similar to get server-side props and we add a cache Force cast which results to get static props and get static props with some revalidate option can be achieved with this right so pretty handy okay so uh that's uh what we call it a single API can handle all the stuff with get static props get server side props and get static paths and all the stuff um so inside of our server page what we want to do is we want to basically you know return all the Json characters that we have and we want to make the use of the use thing right okay so and we added this and we we basically want to map it now so let's go ahead and map it so uh yeah this is server fetching get server side prompts um as we did in next toolb and this is a next 13 version of it we are taking the characters uh results because there are the area of results inside this character that has been returned from get character uh the data we are mapping all of it and printing it out in the UI this is what uh what is it and the main thing is this particular thing cash no store all right so let's see and we can see in the browser get server side props is in action and we can see all the data that has been populated right here okay so now let's go ahead uh to our and the piece where we did get started props we did get server-side props now how we can handle some client API requests okay if you remember we created a route which is a client route and we have nothing here so basically what we want to do is we want to fetch our data from the client side every time we hit that particular route or an endpoint basically we are calling uh whenever we visit this client route which is not currently supported in the client components like we are doing it right now and inside this documentation I want to take a reference to this particular section which is which example switch and use in client components and you can see here fetch is not currently supporting client components and may trigger multiple rearranges for now we need to fetch data in the client component and it's recommended you we use a third-party Library such as SWR because SWR is a library created by next and virtual team but we still can use any other data fetching library for example react query or activos or super agent or something like that and alternatively we can still wrap with a utility function outside of component and use the use hook all right so um what we want to do is we want to basically do similar thing but we will be using the SWR right uh as said from the documentation so to install astralar let's go to our um ID and we want to initialize or create another tab because I don't want to stop server so npm install estovar this will install the S2 of our package for us so that we can fit some data in the client side looks like sdolar 1.3.0 has been added okay looks cool um so let's import this so as this is a client component we want to add explicitly say that this is use client and want to use s2lr from use s2r and we also are importing link from next link okay so to fetch data from with the SWR we basically want to create another function which generally is called the feature feature function which is taking in the path it's not we can just hard code the path here but we are taking the path and the path is there here and we are I'm adding dot 10 because this is a promise that needs to be resolved okay and turning that data into Json uh with the feature okay so uh what we want to do is we want to get the data returned from here and we added the characters and uh inside this characters we use the use SWR from the estwr package and we added the path and also added another parameter of the feature like we do in the use estovar package all right looks cool and let's also return some data that has been defined here and we are using this um characters as a data and results and we are mapping it out and basically we are adding the link and the name that's mapped here so uh everything looks fine um this is how we deal with client-side data fetching and exterior with the use of third-party libraries and packages all right so if you take a look at the browser and take a refresh and you should see this client page is loaded with some data but I want to probably I didn't save it let's also refresh this and we can see all the data that's been fetched and this is the example of the client-side data fetching until this point we have basically covered most of the data fetching approach that we could use inside of next year study but uh the one last thing that we need to cover is get static paths so basically when we want to generally generate multiple pages in The build time we need this approach this is like served as a pure static content so that the path will be generated and all the routes that we added in the parents here for example according to next tool we will generate the path um that would be statically pre-rendered all the paths specified by get static paths so uh this is um the old version of how we can do with next tool but in next 13 we have as we can achieve the same in the similar way for example if we visit this particular uh sorry not that but inside of our static prop we could create another folder here and call it Slug and basically we are using this area brackets because it's a dynamic that's going on so we'll also create piece.jsx and inside this page.jsx which basically what we want to do is we want to basically do the similar thing that we did before which is we get all the characters and we will add a function which gets all the characters and return the Json data and the main thing here is if we'll get static paths we need to create a synchronous function and uh we just name this particular function generate static params and basically they are generating all the possible routes that the user can take beforehand for example we are getting the characters all the data from the characters and we are returning the slug key value appears which is the slug and the value is this particular thing which is the character's name from the Ricky multi API we are returning the characters and replacing the spaces with um with just a dash because they are uppercase and lowercase names there so and basically we are doing this and returning all the characters and what we can do now is we we can use this as a parameter times inside this static page and return this params.slug here and if we hit on Save and the this these params can be um like we can take uh from this params.slug if we take a difference to our build here and we can see all of the param slug if you click on this then we can see the character name is Rick blah blah blah which is basically the perm slug so this is how you um can achieve get static paths in next terrine and I have added all the comments and you can take a reference get static paths in next 18 and get static props in next 13 and get server side props in next settings and get client side or data switching and extending we have completed all the data fetching part and I want to cover another piece of um the newly introduced feature which is suspense so let's import a suspense and we want to use this particular suspense inside of our component whenever we don't have any data yet so um wrap this all um data inside of suspense and we want to add a fallback fallback sorry it will show up when we don't have the data ready for the UI all right we can add a loading and you can still add a custom component you can create inside of a shade or anywhere um in your file directory so this is how you can add a suspense we have covered most of the data fetching approach that we could take in next year study but if we are pretty much interested and we want to dive deep into the further Advanced topic then definitely you could take the reference to the documentation which is the Nexus beta next 13 documentation where we could still use parallel data fetching approach and sequential data fetching and block rendering routes and all this segment cache configuration and all this Advanced topic if you are interested um so I hope you learned something new from this if you want to learn more around the topics of design and development uh please subscribe for more videos just like this and um don't forget to smash that like button for me this really helps me to create more content thanks a lot guys see you in the next one

Channel: For Those Who Code

Views: 32,966

Keywords: Nextjs 13, Next.js 13, next13, Javascript, React, Reactjs, Router, Next.js

Id: JeaHyhcCVCE

Length: 25min 52sec (1552 seconds)

Published: Sun Nov 06 2022