1 00:00:00,890 --> 00:00:04,460 We just discussed some of the different routes that we're going to add into your application before 2 00:00:04,490 --> 00:00:09,350 adding any of these routes, however, I want to fix up one or two small issues inside of her app. 3 00:00:09,860 --> 00:00:14,490 It turns out that when we last worked on our client app, we kind of left a little issue inside of here. 4 00:00:14,570 --> 00:00:17,720 And so I want to identify what that issue is and understand how to solve it. 5 00:00:18,410 --> 00:00:23,570 So we're gonna first begin with a quick reminder on how next J.S. fetches data and provides it to our 6 00:00:23,570 --> 00:00:24,440 different components. 7 00:00:25,910 --> 00:00:28,790 So here's what is going to be going on inside of application very shortly. 8 00:00:29,330 --> 00:00:35,420 We have the app component at the very top and that is the underscore app file inside of our pages directory 9 00:00:35,420 --> 00:00:35,870 right here. 10 00:00:35,960 --> 00:00:36,980 Here's the app component. 11 00:00:37,550 --> 00:00:41,870 This component is responsible for rendering each of the different pages that we're going to create over 12 00:00:41,870 --> 00:00:42,260 time. 13 00:00:42,950 --> 00:00:47,240 So, for example, it's going to eventually display the landing page component within itself. 14 00:00:47,780 --> 00:00:50,560 Eventually these show ticket and show order and so on. 15 00:00:51,620 --> 00:00:55,730 Each of these child components are going to be displayed inside the app component because they are being 16 00:00:55,730 --> 00:00:59,180 provided to the app component as this component prop right here. 17 00:00:59,690 --> 00:01:04,310 So this component prop that is being displayed inside the app, that is the actual page that we are 18 00:01:04,310 --> 00:01:05,310 trying to show to the user. 19 00:01:05,480 --> 00:01:08,990 So the landing page show tickets, sign and sign up, whatever else. 20 00:01:10,570 --> 00:01:15,370 Now, when I walk through the process of how next J.S. decides to show when these components and how 21 00:01:15,370 --> 00:01:18,340 it fetches some data and provides that data to the component as well. 22 00:01:18,990 --> 00:01:24,340 So we're going to imagine for a second the entire flow that next goes through whenever a user tries 23 00:01:24,340 --> 00:01:26,860 to navigate to the landing page component. 24 00:01:26,980 --> 00:01:29,350 So essentially our root root right here. 25 00:01:30,910 --> 00:01:32,050 OK, so here's what's gonna go on. 26 00:01:33,790 --> 00:01:39,460 First off, a user navigates to our route route, essentially just forward slash because a user goes 27 00:01:39,460 --> 00:01:39,940 to that route. 28 00:01:40,690 --> 00:01:41,080 Next, J. 29 00:01:41,110 --> 00:01:44,710 S is going to find the index dot James file inside of the pages directory. 30 00:01:45,240 --> 00:01:48,370 And it's going to try to show the component that we are exporting from this file. 31 00:01:48,820 --> 00:01:50,450 In this case, it is the landing page. 32 00:01:50,470 --> 00:01:51,010 Component. 33 00:01:52,210 --> 00:01:54,880 The next is going to decide to show that landing page component. 34 00:01:55,750 --> 00:01:59,280 Once it decides to do so, it's then going to call the app components. 35 00:01:59,490 --> 00:02:00,940 Get initial props function. 36 00:02:01,690 --> 00:02:03,520 So that is the get initial props function. 37 00:02:03,580 --> 00:02:05,920 We define inside of the app component file. 38 00:02:06,700 --> 00:02:11,620 The goal of this function is to fetch some data that is required to show the app component to the user. 39 00:02:13,350 --> 00:02:16,820 Now, by default, next is all they going to call the app components. 40 00:02:16,890 --> 00:02:17,880 Get initial props. 41 00:02:18,060 --> 00:02:20,550 It is not going to call the landing pages. 42 00:02:21,090 --> 00:02:23,280 Landing page components get initial props function. 43 00:02:24,390 --> 00:02:28,290 It would normally call that function if we had not implemented the app component. 44 00:02:28,680 --> 00:02:32,760 But you and I implemented the app components, that we could have some consistent layouts or essentially 45 00:02:32,760 --> 00:02:35,760 make sure that every page had that header at the top of the screen. 46 00:02:36,450 --> 00:02:42,120 Usually, if we did not define the app component with next J.S., the landing pages component, it initial 47 00:02:42,120 --> 00:02:43,260 prompts function would be called. 48 00:02:43,290 --> 00:02:45,150 But in this case, it is not going to be called. 49 00:02:47,140 --> 00:02:50,940 So next, we'll call the app components, get initial props function inside of there. 50 00:02:51,000 --> 00:02:53,370 We are fetching a little bit of data in this case. 51 00:02:53,580 --> 00:02:59,010 We are trying to make requests to find to the current user is we are doing that inside the app component. 52 00:02:59,430 --> 00:03:00,120 Here it is right here. 53 00:03:01,360 --> 00:03:02,680 That's a refresh the current user. 54 00:03:03,400 --> 00:03:08,320 And we make that request so we can eventually take the current user and provide it to the header component 55 00:03:08,380 --> 00:03:10,870 so we can decide what set of buttons to show inside of it. 56 00:03:13,170 --> 00:03:18,660 In addition to fetching a little bit of data, you and I are also manually invoking the landing pages. 57 00:03:18,690 --> 00:03:20,370 Get initial props function as well. 58 00:03:21,120 --> 00:03:23,760 That occurs inside the app component right here. 59 00:03:25,030 --> 00:03:29,470 We first check to make sure that this child component that we're trying to display has a get initial 60 00:03:29,470 --> 00:03:31,900 props function, and if it does, we call it. 61 00:03:33,160 --> 00:03:37,900 We then assigned the results of that get initial parts function to a page broths and then return it. 62 00:03:38,800 --> 00:03:43,420 Those page props eventually show up inside of our app component and we pass them down into that child 63 00:03:43,420 --> 00:03:44,530 component as a prop. 64 00:03:45,810 --> 00:03:49,380 That is how we are eventually calling and getting initial props right here and making sure that the 65 00:03:49,380 --> 00:03:52,500 results that gets provided to the landing page component. 66 00:03:55,060 --> 00:03:57,760 The very last up next is going to render the app component. 67 00:03:58,510 --> 00:04:02,800 It's going to provide all the data that was returned from the app Capones get initial props function 68 00:04:03,430 --> 00:04:07,240 and the child component that we're trying to show on the screen, which in this case is the landing 69 00:04:07,240 --> 00:04:12,970 page within the app component will display landing page and at the same time pass down all the data 70 00:04:13,030 --> 00:04:14,830 that was fetched by the landing pages. 71 00:04:14,860 --> 00:04:16,000 Get initial props function. 72 00:04:17,470 --> 00:04:22,190 Yes, just a little reminder on what is going on behind the scenes now that we got that reminder out 73 00:04:22,190 --> 00:04:22,610 of the way. 74 00:04:22,760 --> 00:04:28,430 I want to show you a little issue that we left inside of application when we last worked on it back 75 00:04:28,430 --> 00:04:29,240 inside my browser. 76 00:04:29,330 --> 00:04:32,150 I'm going to navigate to our application at ticketing dot dev. 77 00:04:32,850 --> 00:04:37,430 Now, remember, if you come here and you get a big security warning, you can bypass that warning in 78 00:04:37,430 --> 00:04:41,060 Chrome by writing out anywhere inside the browser window itself. 79 00:04:41,280 --> 00:04:42,620 It's like the actual app window. 80 00:04:43,130 --> 00:04:44,510 This is unsafe. 81 00:04:45,380 --> 00:04:46,850 You're not going to write that into the console. 82 00:04:46,970 --> 00:04:48,920 You're just going to type it directly onto the screen. 83 00:04:48,950 --> 00:04:50,810 And that will bypass the security warning. 84 00:04:52,730 --> 00:04:54,220 And once you get the page loaded up. 85 00:04:54,790 --> 00:04:59,620 Try going to the root root and then once you're here, go to your network request log. 86 00:05:00,280 --> 00:05:03,940 We are all the requested of and made and click on the logo on the top left. 87 00:05:04,750 --> 00:05:09,160 As soon as you do that, you'll see that we are making two separate requests to fetch the current user. 88 00:05:09,760 --> 00:05:10,360 So why is that? 89 00:05:11,140 --> 00:05:15,760 Well, it is all because we have one request inside of our landing pages. 90 00:05:15,790 --> 00:05:17,590 Get initial prompts to fetch the current user. 91 00:05:19,400 --> 00:05:22,220 And we are doing the exact same thing inside of the app components. 92 00:05:22,280 --> 00:05:24,190 Get initial props function right there. 93 00:05:24,220 --> 00:05:26,510 We are making a request to fetch the current user as well. 94 00:05:27,870 --> 00:05:32,050 So the whole point here is that whenever we show a page, we are calling the app components get initial 95 00:05:32,050 --> 00:05:35,350 props and the individual pages get initial props as well. 96 00:05:35,830 --> 00:05:39,010 And right now, both those functions are both attempting to fetch the current user. 97 00:05:39,640 --> 00:05:40,510 So we're going to fix this up. 98 00:05:40,720 --> 00:05:45,970 We're gonna make sure that we only fetch the current user one time and that the app component, the 99 00:05:45,970 --> 00:05:48,760 app component is going to be the component that still fetches the current user. 100 00:05:49,120 --> 00:05:54,400 We're going to make sure that the app component passes down wherever the current user is into the current 101 00:05:54,400 --> 00:05:57,340 page or the child component that we are trying to show to the user. 102 00:05:58,680 --> 00:05:58,890 All right. 103 00:05:58,920 --> 00:06:01,830 So a lot of talking, a lot of reminders, lot of lecturing this video. 104 00:06:02,080 --> 00:06:03,300 So let's take a quick pause right here. 105 00:06:03,360 --> 00:06:05,400 Make this quick little fix the next video. 106 00:06:05,640 --> 00:06:08,820 We're going to also fix a one other very quick little issue as well.