1
00:00:01,720 --> 00:00:01,980
All right.

2
00:00:01,990 --> 00:00:06,400
Let's summarize what we learned in the last three videos and kind of turn this into some steps to move

3
00:00:06,400 --> 00:00:07,210
forward.

4
00:00:07,390 --> 00:00:08,820
At the end the day here's our goal.

5
00:00:08,830 --> 00:00:10,390
Here's our plan.

6
00:00:10,390 --> 00:00:14,740
If we are ever making requests from the browser then we're going to essentially allow the browser to

7
00:00:14,740 --> 00:00:18,860
work as usual when it comes to figuring out what domain to make the request to.

8
00:00:18,880 --> 00:00:22,600
In other words we're gonna use a base year L and axles of just empty string.

9
00:00:22,750 --> 00:00:28,000
So we will continue when we're executing requests inside the browser to have a Euro like that right

10
00:00:28,000 --> 00:00:28,290
there.

11
00:00:29,700 --> 00:00:34,890
But if we are making a request during the server side rendering process then we need to make sure that

12
00:00:34,890 --> 00:00:38,980
we set a base url on that request to reach out to ingress engine X directly.

13
00:00:39,690 --> 00:00:44,520
So for example if you're making this request right here during the server side rendering process we

14
00:00:44,520 --> 00:00:50,940
would have to add in something like h TTP ingress dash and Gen-X dot all that other stuff that we just

15
00:00:50,940 --> 00:00:55,490
spoke about a moment ago so that's what we really need to do.

16
00:00:55,530 --> 00:00:58,960
We need to customize their request based upon the environment.

17
00:00:59,130 --> 00:01:04,620
Now that starts to raise an important question how do we know when a request is going to be executed

18
00:01:04,740 --> 00:01:09,270
in the browser versus on Next j ust or by next J US itself.

19
00:01:09,810 --> 00:01:15,300
Well here's the rule of thumb we're going to use if we ever have a request coming from a component then

20
00:01:15,390 --> 00:01:18,120
that is always going to be issued from the browser.

21
00:01:18,120 --> 00:01:22,120
So we will use that rule of using a domain of basically empty string.

22
00:01:22,200 --> 00:01:26,330
How do we know the request is always going to come from the browser if it's issued in a component.

23
00:01:26,340 --> 00:01:32,010
Well remember during the server side rendering process it initial props gets called one time we can

24
00:01:32,010 --> 00:01:36,900
make some requests inside there and then we return some data that data is provided to this component

25
00:01:36,900 --> 00:01:43,350
as props not component is then going to render itself exactly one time although we technically can make

26
00:01:43,350 --> 00:01:45,150
a request from inside of here.

27
00:01:45,300 --> 00:01:49,920
We don't ever get the opportunity to wait for the request to be resolved during the server side rendering

28
00:01:49,920 --> 00:01:50,720
process.

29
00:01:50,910 --> 00:01:52,490
So we don't get the.

30
00:01:52,800 --> 00:01:57,720
We don't get the ability to update any state make use of any lifecycle methods or anything like that

31
00:01:58,050 --> 00:02:02,640
all the components just get executed or rendered one time and whatever they return is immediately sent

32
00:02:02,640 --> 00:02:04,800
back down to the browser.

33
00:02:04,980 --> 00:02:09,510
Then once inside the browser if we have any requests being issued from inside of the component that's

34
00:02:09,510 --> 00:02:10,630
totally fine.

35
00:02:10,630 --> 00:02:15,630
So basically if the request is inside of a component we do not have to worry about setting a very particular

36
00:02:15,630 --> 00:02:21,990
domain or anything like that so the only other location where we'll be making requests is inside of

37
00:02:22,020 --> 00:02:23,400
get initial props.

38
00:02:23,400 --> 00:02:28,560
And unfortunately this is where life starts to get all that confusing up to this point I've said to

39
00:02:28,560 --> 00:02:34,860
you several times that get initial props gets executed during the server side rendering process 100

40
00:02:34,860 --> 00:02:35,730
percent true.

41
00:02:35,730 --> 00:02:39,980
Initial props always call during server side rendering it is executed on the server.

42
00:02:40,080 --> 00:02:47,670
However get initial props will also be executed in the browser under some very particular I guess is

43
00:02:47,670 --> 00:02:48,120
the best word.

44
00:02:48,120 --> 00:02:50,100
Very particular circumstances.

45
00:02:50,190 --> 00:02:56,160
So take a look at win that's that function is going to be executed inside the browser.

46
00:02:56,310 --> 00:02:59,930
So here is essentially the rules on the left hand side.

47
00:02:59,950 --> 00:03:02,220
We've got a couple of requests sources.

48
00:03:02,250 --> 00:03:07,750
So this is essentially when we tried to navigate to our app or win some request is issued from inside

49
00:03:07,750 --> 00:03:15,320
of our application so if we ever do a hard refresh the page get initial props will be executed on the

50
00:03:15,320 --> 00:03:19,600
server if we ever click a link from a different document or a different domain.

51
00:03:19,610 --> 00:03:24,350
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

52
00:03:24,680 --> 00:03:28,130
that is going to cause get initial props to be executed on the server.

53
00:03:28,160 --> 00:03:33,080
And then finally if we ever say type of your URL into the address bar and hit the entry key once again

54
00:03:33,140 --> 00:03:40,180
get initial prompts executed on the server but get initial prompts can be executed on the client and

55
00:03:40,180 --> 00:03:44,800
the case in which that will happen is any sign that we are navigating from one page to another while

56
00:03:44,800 --> 00:03:47,580
inside of our application already.

57
00:03:47,590 --> 00:03:51,940
So let's go through these different scenarios and I want to prove to you exactly you know make sure

58
00:03:51,940 --> 00:03:53,950
that this is actually what occurs.

59
00:03:53,950 --> 00:04:00,300
So to really test this out I'm going to go back over to my get initial props are going to come in out

60
00:04:00,330 --> 00:04:01,580
what is inside there right now.

61
00:04:01,650 --> 00:04:05,030
And I'm also going to comment out the console log of current user up there.

62
00:04:05,220 --> 00:04:14,680
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

63
00:04:14,680 --> 00:04:19,630
to try to load up our page in a couple of different ways and we'll take a look at where this console

64
00:04:19,630 --> 00:04:20,660
log shows up at.

65
00:04:20,770 --> 00:04:25,210
And we can use that to really determine what context or whether good initial properties being executed

66
00:04:25,210 --> 00:04:28,060
in the browser or on the server.

67
00:04:28,140 --> 00:04:30,810
So let's try first a hard refresh the page.

68
00:04:30,910 --> 00:04:33,750
So I got to go over to ticketing dot Dev.

69
00:04:33,910 --> 00:04:36,730
I'm going to refresh the page and I see it.

70
00:04:36,730 --> 00:04:38,440
No console log at all.

71
00:04:38,560 --> 00:04:44,080
But if I go over to my terminal I see I was executed right there OK.

72
00:04:44,100 --> 00:04:48,120
Well that definitely means that good initial promises executed on the server.

73
00:04:48,120 --> 00:04:54,950
I'm not going to clear this log by pressing command K. and I'm going to test out the next scenario we

74
00:04:54,950 --> 00:04:57,320
don't really have the ability to click on a link from a different domain.

75
00:04:57,350 --> 00:04:58,750
So just go directly to this one.

76
00:04:58,760 --> 00:04:59,640
I'm going to try typing.

77
00:04:59,650 --> 00:05:01,580
Are you well into the address bar.

78
00:05:01,760 --> 00:05:07,310
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

79
00:05:07,310 --> 00:05:08,270
log over here.

80
00:05:08,270 --> 00:05:11,610
But again if I go over to my terminal I will see I was executed.

81
00:05:11,720 --> 00:05:15,830
Again that means that good initial promise was executed on the server.

82
00:05:15,830 --> 00:05:22,490
Now finally last case if you are navigating from one page to another while already inside the application.

83
00:05:22,580 --> 00:05:24,240
So how can we simulate this.

84
00:05:24,330 --> 00:05:27,310
Remember any sign that we successfully sign up to our application.

85
00:05:27,380 --> 00:05:30,690
We navigate to a different page inside of our app.

86
00:05:30,860 --> 00:05:36,020
So if we go and try to sign up right now that should cause get initial problems to be executed on the

87
00:05:36,020 --> 00:05:37,260
client.

88
00:05:37,400 --> 00:05:43,280
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

89
00:05:43,310 --> 00:05:49,820
a valid email and a valid password and then click on it sign up I then automatically navigated over

90
00:05:49,850 --> 00:05:51,950
while still inside the application.

91
00:05:51,950 --> 00:05:54,760
I did not do a full reload of the page.

92
00:05:54,800 --> 00:05:57,970
Instead we just changed the HTML that was on the screen.

93
00:05:58,040 --> 00:06:07,190
So in this scenario we see that get initial props was in fact executed on the browser so in total what

94
00:06:07,200 --> 00:06:11,550
this is what I'm really saying here is that if we are making requests from inside of a component we

95
00:06:11,550 --> 00:06:16,080
don't have to worry about this whole domain issue but if we are making a request from get initial props

96
00:06:16,260 --> 00:06:18,250
we do have to worry about it.

97
00:06:18,270 --> 00:06:23,160
So if we are ever making a request from say inside of a component or inside of a hook like let's say

98
00:06:23,220 --> 00:06:27,000
user requests which we had put together a little bit ago we don't have to worry about in his domain

99
00:06:27,000 --> 00:06:27,510
stuff.

100
00:06:27,660 --> 00:06:31,590
But any requests that is originating from inside of it get initial props.

101
00:06:31,590 --> 00:06:35,870
That's where we have to worry about this whole domain problem.

102
00:06:35,990 --> 00:06:37,860
So that we've narrowed this down a bit more.

103
00:06:38,030 --> 00:06:41,900
We're going to come back next video we're going to figure out how we can tell whether we are on the

104
00:06:41,900 --> 00:06:45,770
client or the server by writing out some code inside of get initial props.