React Query Tutorial with Typescript | Part 5 -- Next.js Server Side Rendering

[Music] hey guys and welcome to the last part of my react query tutorial and in this part we're going to be adding uh next js support with server side rendering with react query prefetching with react query there's two ways that we can really do pre-fetching for our server side render pages there's we could either prefetch the data ourselves so we could call like get server-side props and then that way we actually make the api call ourselves and then we just pass it in using initial data or the second way actually which is a little bit of a better way and i'll explain why in this video is to actually just uh use a hydration to hydrate the query cache and then access that data from the prefetch that you made in your uh from your server all right so let's get started with option one and option one is uh we do the prefetch ourselves in get server side props or get static props and then we pass it in using uh initial data props to our use query so first thing i'm gonna do is i'm gonna go ahead and create a new page folder here and i'm just going to call it ssr for server side rendering and then i'm going to call this page uh initial data.tsx um just to kind of separate it out so that you guys can have the two different examples um in the two different page files and then what i'm going to do is i'm going to copy this over here and kind of explain what is happening so pretty much what we're doing is i'm passing in an interface so if you're not familiar with next js um the way that you can kind of pass props into your uh function here is by passing in um kind of like a props object or some type of interface here and then what you can do is then you can then destructure it here in um part of the function call of your functional component and then that way you can actually access this person um throughout your uh component and so you can see here what we're doing then after that is um let's go first and look at get server-side props so guest server-side props is an xjs uh function that you can use to fetch data on the server and so this allows you to actually get the data on the server so that your page is rendered uh server side rendered with the data already there instead of having to wait for it to be fetched on the client so pretty much what we're doing here is we're just defining a simple get server-side props and what we're returning here is this object which is a props object which we're going to pass a person so it's going to be something similar to our first query of just getting a person so uh we're using the use the fetch person here which if we look at this again just a quick reminder is just recalling the fetch uh api slash person which if we look at our api we can see here that it's just returning this kind of static person here so if we go back to here all we're doing is we're calling fetchperson so we're fetching the data on the server we're saving it as this person object and then we're passing it in back to our component via this props and then what then we have to do is we destructure it here so that we have access to it and then what we can then do is one of the options that you can pass to use query if you remember we have a bunch of these we have like enabled we have things like stale time one of the options is actually initial data and what that does is that it actually tell you like hey we already did this on the server you don't need to refetch it but here is the data so that you can cache it so that it actually works uh cache next time and yeah so let's go ahead and actually navigate to our uh application and i just went ahead and started it called yard dev to make sure we have that and so we can actually navigate to it here you can see our application is running here so now if we navigate to our new page at initial data what is actually expected to happen is that we're actually going to see here that only absolute urls are supported and that's actually expected due to the nature of next.js so the reason that this is happening is because if we look at our person page here it's okay to do a shorthand notation like this for the api and the reason for that is because it's on the browser and it understands to look into this api folder using this notation but on the server it doesn't have that same kind of understanding right so the problem that we're running into is that this um is not going to work because it's trying to call that um that route but that route doesn't exist and so the way that we fix that is pretty easy actually and the way that we do that is that we instead of calling that function that we had already defined let's just call a fetch here on its own and we're going to pass our application's entire url to that same api route and then we're also going to return uh json because we're using fetch library and then we're going to be able to access it so now if i go back to our page here and i refresh we should be able to see that boom now we have both our person here which is expected and the person uh cache here and you remember in the first video that we can see here i guess it's easier for me to show you side to side if i refresh this you can see here that it calls getting person but if i switch browsers or switch tabs like this you can see that it's not making another call and the reason for that is because it's still cached but if i go to invalidate it you can see that it made another call and the reason for that is because right now if you remember in part 4 we changed the scale time to 20 seconds so it's going to be a little bit longer but you can see that it's actually cache and it's actually providing it but it only makes one call on the server and then it's able to access that information uh using initial data and so it doesn't make another call and for a simple kind of uh high level components that are kind of just by itself and you only need initial data that's kind of all you really need to do and there you go you have a server-side rendered page with the data is being filled but there are kind of some trade-offs with this uh way of pre-fetching queries and the main trade-off comes when let's say for example you have a uh kind of like a component like a page here but this page has several different components within it you might have a form you might have different things within that page but they all access the same query data right so as you if you guys remember in the first part of the video i talked about props drilling meaning that like you have uh the props initialized on the page but then you pass them to all your sub components and that's one way that you can kind of pass data around but the cool thing about react query is it tries to make it so you can kind of eliminate props drilling and make it a little bit cleaner by just using queries that each access the different cache values so the trade-off that you get for this is that any kind of query that's going to use the same fetch person within this component any sub component or if you use it in multiple places you're going to have to actually pass in initial data either through props drilling or like similar like this because if not what's going to happen let's say for example i have another component where i have use query here but i don't pass this in what's going to happen is that this one understands that it has the initial data but this one doesn't and it's going to go ahead and actually fetch that again and it's going to make a separate call and that's kind of annoying so that's kind of the trade-off and that's why it's not necessarily the best way to actually pre-fetch the best way is actually hydration and let's talk about how we can actually set that up all right so to get started with hydration there's a couple of things we need to change in our app page and we need to change how we actually create this query client and what i mean by that is let me go ahead and paste this in here and a couple things that you'll notice is that let me go ahead and clean this out so you guys can see a little bit better the way that we actually have to go is now we have to create the query client instance inside of the app and make sure that it's a state variable so this ensures that data is not shared between users uh due to the hydration and so like they won't share caches and things like that as well as only creating a query client once per uh component life cycle so this is how you're supposed to do it according to their documentation and what we do is that we use the use state from react here to kind of create this query client and then we're going to kind of define a function that's going to return a new query client and you can see here we have the same default option so it'll be the same query client that we had before but then what we do is we change up how we kind of we add one kind of little thing to wrap our component and so query client provider is going to be the same but here you can see we actually just pass in this state variable as the client but then what we do is we add this new hydration tag to encircle our component and what we're going to do is we're going to pass in a state and we do page props here that we're getting from up here and then a dehydrated state as well as that should then allow our app to kind of dehydrate rehydrate things like that within our queries and let's show that by going ahead in ssr and now i'm going to create a hydration page again i just want to kind of keep these separate and i'm going to go ahead and actually copy the page from um initial data so let me go ahead and actually copy that over here and then we're going to make a couple changes to it and the one of the things you're going to notice that will change is that we'll actually change how we fetch the data so we're not any longer in charge so like previously we were manually using this fetch to go ahead and actually fetch the data from our server on the server side we'll name it as a person and then we'll hydrate our component itself but now we're going to use the query uh client directly and so what we're going to do is we're going to modify get server side props and then here let me make sure i import um these new kind of uh things that i hadn't imported before um and then i think yep okay dehydrate was the last one and so the changes that we've made is the return type we're no longer returning the person that we're gonna be uh kind of passing up here what we're doing is now we're passing in this dehydrated state which is a type dehydrated state with props this props is kind of required for get server side props return but now on our server we're actually creating a new query client and then we're going to use that query client the prefetch query to go ahead and actually do that prefetch for us and then what we do is uh we return a dehydrated state of dehydrate this query client which then kind of tells our um appjs that this is the same prop that the cache will then pick up you know so then what this means is that this uh our app when it renders it's going to pick up this dehydrated state and hydrate it so that what we can then do is we can actually update this entire page here and a couple of things that you'll notice that we've changed is that we no longer have to pass in that destructured in uh props because our use query is actually just going to pick up the cache value that we're actually hydrating in the get server side props here and in our app page here so um the best way to show you guys again i'll just go into it a little bit but yeah so you can see here the changes with use query is that we no longer need to pass initial data and we no longer need to pass in the person the structure here and then what that means is that any sub component we can still uh get away with doing something like this where we have multiple queries of the same query that's calling the same function and um they won't actually refetch they'll all use that same rehydrated uh information from the query cache so that if it does become stale then it'll then it of course it'll go and re-fetch but this way we can avoid uh props drilling and so let's show that that's actually working by i'm just going to go ahead and actually copy this down here so that we'll make two different calls and but instead i just kind of want to make this i'm just going to make it results because we're not going to really be using it but i just want to show that it's actually let's see what is this saying okay it's assigned a value but i just want to show that it's actually going to just make one single call as opposed to making multiple calls but they're both going to use the same data so um let's go ahead and then go back to our application here and so if i split this up so you can see this what it'll actually do is if i refresh this you can see it only makes one call and if i switch back and forth you can see that it's not any it's not making another call to the api because it's not stale yet and it's the 22nd stale time but you can see that they're both using that same query cache data and yeah that's pretty much all you really need to get started with server side rendering with react query there's those two ways you can either use initial data you can use hydration hydration is kind of the preferred way to go ahead about doing it but it does take a little bit more setup but it's really not too complicated but that way you can kind of keep the same mantra of just have instead of props drilling you can kind of use queries and different components and they'll all access the same query cache data so um there's that and then yeah that's kind of all there is to really incorporating react query with uh next js so i hope you guys enjoyed the video um if you guys like this zoom size please let me know in the comment section below i can't tell if this zoom size or this zoom size the on my computer and kind of like when i go back through the video they both look okay so um please let me know which zoom size you guys prefer um and then also subscribe to the channel if you guys like this content it really means a lot to me but also thanks for watching and i hope this was able to help you guys uh somewhat and i hope to see you guys in the next one thanks

Channel: Leo Roese

Views: 2,150

Keywords: next.js, next, react, react.js, react-query, react query, server side rendering, ssr, prefetch, node.js, javascript, typescript

Id: Yb1wPypdqEc

Length: 13min 35sec (815 seconds)

Published: Thu Jul 15 2021