All right.
Let's summarize what we learned in the last three videos and kind of turn this into some steps to move
forward.
At the end the day here's our goal.
Here's our plan.
If we are ever making requests from the browser then we're going to essentially allow the browser to
work as usual when it comes to figuring out what domain to make the request to.
In other words we're gonna use a base year L and axles of just empty string.
So we will continue when we're executing requests inside the browser to have a Euro like that right
there.
But if we are making a request during the server side rendering process then we need to make sure that
we set a base url on that request to reach out to ingress engine X directly.
So for example if you're making this request right here during the server side rendering process we
would have to add in something like h TTP ingress dash and Gen-X dot all that other stuff that we just
spoke about a moment ago so that's what we really need to do.
We need to customize their request based upon the environment.
Now that starts to raise an important question how do we know when a request is going to be executed
in the browser versus on Next j ust or by next J US itself.
Well here's the rule of thumb we're going to use if we ever have a request coming from a component then
that is always going to be issued from the browser.
So we will use that rule of using a domain of basically empty string.
How do we know the request is always going to come from the browser if it's issued in a component.
Well remember during the server side rendering process it initial props gets called one time we can
make some requests inside there and then we return some data that data is provided to this component
as props not component is then going to render itself exactly one time although we technically can make
a request from inside of here.
We don't ever get the opportunity to wait for the request to be resolved during the server side rendering
process.
So we don't get the.
We don't get the ability to update any state make use of any lifecycle methods or anything like that
all the components just get executed or rendered one time and whatever they return is immediately sent
back down to the browser.
Then once inside the browser if we have any requests being issued from inside of the component that's
totally fine.
So basically if the request is inside of a component we do not have to worry about setting a very particular
domain or anything like that so the only other location where we'll be making requests is inside of
get initial props.
And unfortunately this is where life starts to get all that confusing up to this point I've said to
you several times that get initial props gets executed during the server side rendering process 100
percent true.
Initial props always call during server side rendering it is executed on the server.
However get initial props will also be executed in the browser under some very particular I guess is
the best word.
Very particular circumstances.
So take a look at win that's that function is going to be executed inside the browser.
So here is essentially the rules on the left hand side.
We've got a couple of requests sources.
So this is essentially when we tried to navigate to our app or win some request is issued from inside
of our application so if we ever do a hard refresh the page get initial props will be executed on the
server if we ever click a link from a different document or a different domain.
So let's say that you go to read it dot com and you click on a link and that takes you to our application
that is going to cause get initial props to be executed on the server.
And then finally if we ever say type of your URL into the address bar and hit the entry key once again
get initial prompts executed on the server but get initial prompts can be executed on the client and
the case in which that will happen is any sign that we are navigating from one page to another while
inside of our application already.
So let's go through these different scenarios and I want to prove to you exactly you know make sure
that this is actually what occurs.
So to really test this out I'm going to go back over to my get initial props are going to come in out
what is inside there right now.
And I'm also going to comment out the console log of current user up there.
I'll then put in a console log of I was executed and I'm going to return an empty object so we're going
to try to load up our page in a couple of different ways and we'll take a look at where this console
log shows up at.
And we can use that to really determine what context or whether good initial properties being executed
in the browser or on the server.
So let's try first a hard refresh the page.
So I got to go over to ticketing dot Dev.
I'm going to refresh the page and I see it.
No console log at all.
But if I go over to my terminal I see I was executed right there OK.
Well that definitely means that good initial promises executed on the server.
I'm not going to clear this log by pressing command K. and I'm going to test out the next scenario we
don't really have the ability to click on a link from a different domain.
So just go directly to this one.
I'm going to try typing.
Are you well into the address bar.
So for this I can really just go to the address bar and hit enter and when I do so I don't see any console
log over here.
But again if I go over to my terminal I will see I was executed.
Again that means that good initial promise was executed on the server.
Now finally last case if you are navigating from one page to another while already inside the application.
So how can we simulate this.
Remember any sign that we successfully sign up to our application.
We navigate to a different page inside of our app.
So if we go and try to sign up right now that should cause get initial problems to be executed on the
client.
So to test that out I'm going to go to ticketing not Dev off sign up and then I'm going to enter in
a valid email and a valid password and then click on it sign up I then automatically navigated over
while still inside the application.
I did not do a full reload of the page.
Instead we just changed the HTML that was on the screen.
So in this scenario we see that get initial props was in fact executed on the browser so in total what
this is what I'm really saying here is that if we are making requests from inside of a component we
don't have to worry about this whole domain issue but if we are making a request from get initial props
we do have to worry about it.
So if we are ever making a request from say inside of a component or inside of a hook like let's say
user requests which we had put together a little bit ago we don't have to worry about in his domain
stuff.
But any requests that is originating from inside of it get initial props.
That's where we have to worry about this whole domain problem.
So that we've narrowed this down a bit more.
We're going to come back next video we're going to figure out how we can tell whether we are on the
client or the server by writing out some code inside of get initial props.