1 00:00:01,070 --> 00:00:06,030 The last video we tried to fetch data from two locations inside of our component inside of get initial 2 00:00:06,030 --> 00:00:07,000 props. 3 00:00:07,140 --> 00:00:11,620 Now inside the component right here this call is executed on the browser for sure. 4 00:00:11,640 --> 00:00:15,960 Without a doubt it is technically also execute on the server but we're gonna forget that for just a 5 00:00:15,960 --> 00:00:20,780 moment when we executed this call on the browser we saw. 6 00:00:20,810 --> 00:00:23,220 Without a doubt that we got a good response back. 7 00:00:23,270 --> 00:00:25,690 But there's my current user request I got back some data. 8 00:00:25,760 --> 00:00:30,950 Everything worked as expected but as soon as we tried to make that request inside of get initial props. 9 00:00:30,950 --> 00:00:33,350 And remember this is executed on the server. 10 00:00:33,350 --> 00:00:37,780 We saw a big nasty air lets let's come at that really quick save the file. 11 00:00:37,850 --> 00:00:42,310 Look back over refresh the page and there we go. 12 00:00:42,350 --> 00:00:43,810 There's the big nastier. 13 00:00:43,820 --> 00:00:45,950 This barely even makes sense. 14 00:00:45,950 --> 00:00:47,900 We don't even really see any action will. 15 00:00:47,900 --> 00:00:49,040 Error message here. 16 00:00:49,040 --> 00:00:50,120 What does that even mean. 17 00:00:50,120 --> 00:00:52,070 What does this error message mean. 18 00:00:52,090 --> 00:00:55,550 So in this video we're going to figure out exactly what is going on there just so you know. 19 00:00:55,550 --> 00:01:00,500 This whole issue where we're currently running into is pretty much why I wanted to use server side rendering 20 00:01:00,530 --> 00:01:03,210 in the first place for this particular application. 21 00:01:03,260 --> 00:01:07,940 I don't really care quite so much about SEO benefits right Mike that I really just wanted you to see 22 00:01:07,970 --> 00:01:12,480 this error just to give you some more insight into what is going on in the world of Cuban ads. 23 00:01:12,500 --> 00:01:17,930 OK so let's first take a look at a diagram that's going to investigate exactly what happened when we 24 00:01:17,930 --> 00:01:20,360 made that request from the browser successfully. 25 00:01:20,360 --> 00:01:25,810 So that was when we had that request right there only and we had come to it out get initial props. 26 00:01:25,940 --> 00:01:29,390 So why was this working and exactly what is going on behind the scenes. 27 00:01:29,390 --> 00:01:30,920 Well let's zoom in and take a look. 28 00:01:32,520 --> 00:01:32,780 All right. 29 00:01:32,800 --> 00:01:33,640 So I'm gonna start off. 30 00:01:33,750 --> 00:01:35,580 First up on this top flow. 31 00:01:35,580 --> 00:01:41,070 So we typed in ticketing dot Dev into our browser that made a request off to some networking level or 32 00:01:41,070 --> 00:01:43,390 layer on your computer. 33 00:01:43,390 --> 00:01:50,020 Now remember we have setup our host file to translate ticketing dot Dev into local host. 34 00:01:50,020 --> 00:01:55,240 So when we made this request from our browser something on your machine some networking layer translated 35 00:01:55,240 --> 00:01:58,660 that into a get request to 1 2 7 0 0 1. 36 00:01:58,660 --> 00:02:03,060 And by default because we did not specify a port the port was set to 80. 37 00:02:03,100 --> 00:02:09,460 So that is where we are making our request to ultimately now that port on local host has been bound 38 00:02:09,460 --> 00:02:11,560 to by ingress engine x. 39 00:02:11,550 --> 00:02:16,840 Anytime you make a request you add that port that IP ingress engine X is going to receive that request 40 00:02:17,140 --> 00:02:18,420 and read it off appropriately. 41 00:02:19,710 --> 00:02:24,570 So in this case because we making a request to a ticketing dot Dev without any path on their ingress 42 00:02:24,570 --> 00:02:28,290 engine X decided to send that request on to our client application. 43 00:02:28,290 --> 00:02:32,680 So next to us built up some HMO document and sent it back down to us. 44 00:02:32,760 --> 00:02:33,730 So it responded. 45 00:02:33,850 --> 00:02:37,680 And that eventually came back to us as some fully rendered HMO file. 46 00:02:37,710 --> 00:02:42,210 Of course we were not actually patching any data or anything like that inside of this initial approach 47 00:02:42,480 --> 00:02:47,100 but nonetheless there might have been some initial HMO inside there who knows the point is we got a 48 00:02:47,100 --> 00:02:53,700 response successfully so then inside the browser our browser took that each nail file and rendered it. 49 00:02:53,730 --> 00:02:58,800 It might have also fetch some additional JavaScript files and then eventually we had some code inside 50 00:02:58,800 --> 00:03:03,250 of our ReACT application that made use of access to make a followup request. 51 00:03:03,330 --> 00:03:11,930 So that request is this request right here so we made a request and we specifically designated a path 52 00:03:11,980 --> 00:03:12,400 only. 53 00:03:12,410 --> 00:03:16,650 We said make a request you just API users current user. 54 00:03:16,790 --> 00:03:21,860 So as you see right here just a path we have not specified a domain or anything like that. 55 00:03:22,040 --> 00:03:27,200 Whenever we try to make a request and we do not specify the domain by default your browser is going 56 00:03:27,200 --> 00:03:31,010 to assume that you're trying to make a request to the current domain. 57 00:03:31,100 --> 00:03:36,500 So as a matter of fact if I look back over after fixing up my code I'm gonna save this file really quickly 58 00:03:36,500 --> 00:03:38,870 with that stuff come to it out. 59 00:03:38,870 --> 00:03:43,550 So now if I take a look at this successful current user request right here and look at the headers tab 60 00:03:43,880 --> 00:03:49,400 I'll see that the final request your l that the browser decided to use was in fact ticketing dot Dev 61 00:03:49,460 --> 00:03:56,390 slash API users current user so even though we typed into our code just API users can't user the browser 62 00:03:56,390 --> 00:04:00,550 expanded that into ticketing dot Dev API users current user. 63 00:04:00,650 --> 00:04:05,060 So again that went through some kind of networking layer on your computer and because of the config 64 00:04:05,060 --> 00:04:12,110 that we put into that host file your computer decided to ultimately translate that into 1 2 7 0 0 1 65 00:04:12,200 --> 00:04:15,260 80 and then the actual root. 66 00:04:15,330 --> 00:04:20,970 So again that got forwarded into ingress engine X ingress engine X took a look at the path on there. 67 00:04:21,000 --> 00:04:26,760 So API users current user and decided to for that on to the auto service and we got a response from 68 00:04:26,760 --> 00:04:30,200 the auto service and everything worked as expected. 69 00:04:30,210 --> 00:04:37,190 So again this entire flow is when everything up here to work so let's now take a look at a very similar 70 00:04:37,190 --> 00:04:42,470 diagram what we're going to imagine or kind of picture the case in which we were making this request 71 00:04:42,890 --> 00:04:48,240 from the server instead not from the browser that we're going to look at a diagram that's gonna handle 72 00:04:48,300 --> 00:04:52,320 this case right here without really making the request from inside the components. 73 00:04:52,320 --> 00:04:54,680 Why did this fail so catastrophically. 74 00:04:54,780 --> 00:04:59,860 Why do we see that really nasty error message this one right here. 75 00:04:59,870 --> 00:05:02,460 Well let's take a look at the diagram okay. 76 00:05:02,610 --> 00:05:09,010 So I going to zoom in so in this case we entered antiquity not delve into our address smart and hit 77 00:05:09,010 --> 00:05:15,070 enter or we just refresh the page like so that made a request off to ticketing not deaf. 78 00:05:15,080 --> 00:05:20,990 Now once again that got translated by your computer because that hosts file setting to a request for 79 00:05:21,020 --> 00:05:29,970 1 2 7 0 0 1 80 so that went off to ingress engine X ingress engine X took a look at the path of that 80 00:05:29,980 --> 00:05:30,670 request. 81 00:05:30,670 --> 00:05:35,140 It didn't see anything so it decided to send it off to our default handler which is essentially our 82 00:05:35,140 --> 00:05:40,070 client service so that request was then handled inside of Next j us. 83 00:05:40,140 --> 00:05:41,600 I'm going to zoom in on this thing. 84 00:05:42,690 --> 00:05:46,060 The next j ust took a look at that incoming request. 85 00:05:46,150 --> 00:05:49,170 It took a look tried to see if there's any path on there or anything like that. 86 00:05:49,180 --> 00:05:50,320 It did not see one. 87 00:05:50,320 --> 00:05:57,630 So next she has decided to show the route route or essentially Art Index dot J S file inside of index 88 00:05:57,630 --> 00:06:01,800 at J us is our landing page and remember when I told you whenever. 89 00:06:01,840 --> 00:06:06,940 Next j US is rendering our stuff on the server it's going to call that components associated get initial 90 00:06:06,940 --> 00:06:07,990 prompts function. 91 00:06:08,320 --> 00:06:14,610 So that's when this thing right here was invoked then inside there we wrote out some code that said 92 00:06:14,670 --> 00:06:19,200 Make a request to just API users current user. 93 00:06:19,200 --> 00:06:27,680 And again we did not specify a domain so next J us or really axels in this case attempted to issue that 94 00:06:27,680 --> 00:06:33,820 request that request with just the route right there went through some networking layer once again. 95 00:06:33,820 --> 00:06:35,580 Now I just have networking right here. 96 00:06:35,590 --> 00:06:42,780 This is actually kind of some CTP stuff implemented by node nodes H TTP layer works similar to the browser. 97 00:06:42,910 --> 00:06:49,660 If you did not specify a domain right there the nodes H2 TTP layer is going to just assume that you 98 00:06:49,660 --> 00:06:56,620 are trying to make a request on your local machine so nodes H TTP layer is going to automatically stick 99 00:06:56,710 --> 00:07:03,280 a domain on there of possibly local host or really it's 1 2 7 0 1. 100 00:07:03,280 --> 00:07:08,900 So again nodes HDTV layer says I need a domain to make the request to have some to throw in local machine. 101 00:07:08,950 --> 00:07:09,940 Good enough. 102 00:07:10,180 --> 00:07:15,210 So we ultimately tried to make a request to 1 2 7 0 0 1 80. 103 00:07:15,250 --> 00:07:21,930 Now here's the really super critical thing to remember we are running our next application inside of 104 00:07:21,930 --> 00:07:26,130 a container that container is essentially its own little world. 105 00:07:26,130 --> 00:07:34,390 So when we try to make requests to 1 2 7 0 0 1 or 80 that request went to Port 80 inside of the container. 106 00:07:34,440 --> 00:07:39,660 It did not somehow get redirected back out to ingress and Gen-X. 107 00:07:39,720 --> 00:07:42,210 It didn't magically get sent back out there. 108 00:07:42,300 --> 00:07:46,160 Instead it went to local host inside of this container. 109 00:07:46,200 --> 00:07:49,520 There's nothing running on port 80 inside that container right now. 110 00:07:49,560 --> 00:07:50,610 Nothing. 111 00:07:50,730 --> 00:07:54,870 So that is why we end up seeing a message right here of connection refused. 112 00:07:54,930 --> 00:08:00,750 Once you seven years or 180 this IP address once you seven years are one that's not talking about local 113 00:08:00,750 --> 00:08:04,780 host on your personal machine or essentially like your entire overall machine instead. 114 00:08:04,950 --> 00:08:07,110 That is local host inside the container. 115 00:08:07,110 --> 00:08:11,280 And again nothing is listening on local host port 80 inside the container. 116 00:08:11,280 --> 00:08:17,450 So that's why we're seeing this nasty error message here so the request that we had intended to probably 117 00:08:17,450 --> 00:08:22,730 go off to ingress engine X and we had probably been hoping for that to be read off to the service or 118 00:08:22,730 --> 00:08:27,320 alternately we would have hoped for that request to just go to the off service directly like any of 119 00:08:27,320 --> 00:08:28,890 those would have been appropriate. 120 00:08:29,000 --> 00:08:30,200 That never happened. 121 00:08:30,200 --> 00:08:35,180 The request never went to ingress engine X and got routed in the other alternative just going directly 122 00:08:35,180 --> 00:08:36,000 to the auto service. 123 00:08:36,020 --> 00:08:37,870 That also did not happen. 124 00:08:38,180 --> 00:08:40,580 And so we ended up with that really nasty error message. 125 00:08:41,530 --> 00:08:41,760 All right. 126 00:08:41,790 --> 00:08:46,740 So again that's pretty much the reason we use next day as I really just wanted you to see this kind 127 00:08:46,740 --> 00:08:49,250 of big problem in action. 128 00:08:49,380 --> 00:08:51,330 So how are we going to deal with this. 129 00:08:51,330 --> 00:08:52,770 That's the real question. 130 00:08:52,890 --> 00:08:53,490 What are we going to do. 131 00:08:53,490 --> 00:08:55,440 How we gonna somehow fix this error. 132 00:08:55,470 --> 00:08:56,640 Well let's take a pause right here. 133 00:08:56,640 --> 00:08:59,690 Come back the next video and figure out exactly how we're going to solve this.