The last video we tried to fetch data from two locations inside of our component inside of get initial
props.
Now inside the component right here this call is executed on the browser for sure.
Without a doubt it is technically also execute on the server but we're gonna forget that for just a
moment when we executed this call on the browser we saw.
Without a doubt that we got a good response back.
But there's my current user request I got back some data.
Everything worked as expected but as soon as we tried to make that request inside of get initial props.
And remember this is executed on the server.
We saw a big nasty air lets let's come at that really quick save the file.
Look back over refresh the page and there we go.
There's the big nastier.
This barely even makes sense.
We don't even really see any action will.
Error message here.
What does that even mean.
What does this error message mean.
So in this video we're going to figure out exactly what is going on there just so you know.
This whole issue where we're currently running into is pretty much why I wanted to use server side rendering
in the first place for this particular application.
I don't really care quite so much about SEO benefits right Mike that I really just wanted you to see
this error just to give you some more insight into what is going on in the world of Cuban ads.
OK so let's first take a look at a diagram that's going to investigate exactly what happened when we
made that request from the browser successfully.
So that was when we had that request right there only and we had come to it out get initial props.
So why was this working and exactly what is going on behind the scenes.
Well let's zoom in and take a look.
All right.
So I'm gonna start off.
First up on this top flow.
So we typed in ticketing dot Dev into our browser that made a request off to some networking level or
layer on your computer.
Now remember we have setup our host file to translate ticketing dot Dev into local host.
So when we made this request from our browser something on your machine some networking layer translated
that into a get request to 1 2 7 0 0 1.
And by default because we did not specify a port the port was set to 80.
So that is where we are making our request to ultimately now that port on local host has been bound
to by ingress engine x.
Anytime you make a request you add that port that IP ingress engine X is going to receive that request
and read it off appropriately.
So in this case because we making a request to a ticketing dot Dev without any path on their ingress
engine X decided to send that request on to our client application.
So next to us built up some HMO document and sent it back down to us.
So it responded.
And that eventually came back to us as some fully rendered HMO file.
Of course we were not actually patching any data or anything like that inside of this initial approach
but nonetheless there might have been some initial HMO inside there who knows the point is we got a
response successfully so then inside the browser our browser took that each nail file and rendered it.
It might have also fetch some additional JavaScript files and then eventually we had some code inside
of our ReACT application that made use of access to make a followup request.
So that request is this request right here so we made a request and we specifically designated a path
only.
We said make a request you just API users current user.
So as you see right here just a path we have not specified a domain or anything like that.
Whenever we try to make a request and we do not specify the domain by default your browser is going
to assume that you're trying to make a request to the current domain.
So as a matter of fact if I look back over after fixing up my code I'm gonna save this file really quickly
with that stuff come to it out.
So now if I take a look at this successful current user request right here and look at the headers tab
I'll see that the final request your l that the browser decided to use was in fact ticketing dot Dev
slash API users current user so even though we typed into our code just API users can't user the browser
expanded that into ticketing dot Dev API users current user.
So again that went through some kind of networking layer on your computer and because of the config
that we put into that host file your computer decided to ultimately translate that into 1 2 7 0 0 1
80 and then the actual root.
So again that got forwarded into ingress engine X ingress engine X took a look at the path on there.
So API users current user and decided to for that on to the auto service and we got a response from
the auto service and everything worked as expected.
So again this entire flow is when everything up here to work so let's now take a look at a very similar
diagram what we're going to imagine or kind of picture the case in which we were making this request
from the server instead not from the browser that we're going to look at a diagram that's gonna handle
this case right here without really making the request from inside the components.
Why did this fail so catastrophically.
Why do we see that really nasty error message this one right here.
Well let's take a look at the diagram okay.
So I going to zoom in so in this case we entered antiquity not delve into our address smart and hit
enter or we just refresh the page like so that made a request off to ticketing not deaf.
Now once again that got translated by your computer because that hosts file setting to a request for
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
request.
It didn't see anything so it decided to send it off to our default handler which is essentially our
client service so that request was then handled inside of Next j us.
I'm going to zoom in on this thing.
The next j ust took a look at that incoming request.
It took a look tried to see if there's any path on there or anything like that.
It did not see one.
So next she has decided to show the route route or essentially Art Index dot J S file inside of index
at J us is our landing page and remember when I told you whenever.
Next j US is rendering our stuff on the server it's going to call that components associated get initial
prompts function.
So that's when this thing right here was invoked then inside there we wrote out some code that said
Make a request to just API users current user.
And again we did not specify a domain so next J us or really axels in this case attempted to issue that
request that request with just the route right there went through some networking layer once again.
Now I just have networking right here.
This is actually kind of some CTP stuff implemented by node nodes H TTP layer works similar to the browser.
If you did not specify a domain right there the nodes H2 TTP layer is going to just assume that you
are trying to make a request on your local machine so nodes H TTP layer is going to automatically stick
a domain on there of possibly local host or really it's 1 2 7 0 1.
So again nodes HDTV layer says I need a domain to make the request to have some to throw in local machine.
Good enough.
So we ultimately tried to make a request to 1 2 7 0 0 1 80.
Now here's the really super critical thing to remember we are running our next application inside of
a container that container is essentially its own little world.
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.
It did not somehow get redirected back out to ingress and Gen-X.
It didn't magically get sent back out there.
Instead it went to local host inside of this container.
There's nothing running on port 80 inside that container right now.
Nothing.
So that is why we end up seeing a message right here of connection refused.
Once you seven years or 180 this IP address once you seven years are one that's not talking about local
host on your personal machine or essentially like your entire overall machine instead.
That is local host inside the container.
And again nothing is listening on local host port 80 inside the container.
So that's why we're seeing this nasty error message here so the request that we had intended to probably
go off to ingress engine X and we had probably been hoping for that to be read off to the service or
alternately we would have hoped for that request to just go to the off service directly like any of
those would have been appropriate.
That never happened.
The request never went to ingress engine X and got routed in the other alternative just going directly
to the auto service.
That also did not happen.
And so we ended up with that really nasty error message.
All right.
So again that's pretty much the reason we use next day as I really just wanted you to see this kind
of big problem in action.
So how are we going to deal with this.
That's the real question.
What are we going to do.
How we gonna somehow fix this error.
Well let's take a pause right here.
Come back the next video and figure out exactly how we're going to solve this.