1
00:00:00,930 --> 00:00:05,640
In the last video we wrote out some scaffolding for the app component and then I very abruptly ended

2
00:00:05,640 --> 00:00:10,200
the video saying oh yeah I did initial props this time round is going to be slightly different or candidate.

3
00:00:10,230 --> 00:00:12,060
There was something different this time around.

4
00:00:12,220 --> 00:00:16,770
So remember at this point we've been talking about get initial props as it has been implemented inside

5
00:00:16,800 --> 00:00:18,540
of our different pages.

6
00:00:18,540 --> 00:00:20,790
We are not technically working in a page right now.

7
00:00:20,790 --> 00:00:25,300
Instead we are working inside of a custom app component that's going to wrap up a page.

8
00:00:25,890 --> 00:00:30,270
Unfortunately this is kind of a tough thing to keep in the back of your mind when you're making use

9
00:00:30,270 --> 00:00:31,410
of next to us.

10
00:00:31,560 --> 00:00:37,230
The arguments that are provided to the get initial props function for a page are different than the

11
00:00:37,230 --> 00:00:41,960
arguments that are provided to get initial props for the custom app component.

12
00:00:41,970 --> 00:00:48,110
So as we just saw inside of a page components our first argument is some kind of context object and

13
00:00:48,120 --> 00:00:53,130
inside there was that rec property that was request and that was the property that we cared a lot about

14
00:00:53,370 --> 00:00:59,080
because it had that set of headers that was coming into our application from the user's browser so we

15
00:00:59,080 --> 00:01:03,790
really want to make sure that we got access to that rec property so we could use it to eventually build

16
00:01:03,790 --> 00:01:10,600
up our axles client when we are defining the get initial props function for a custom app component.

17
00:01:10,600 --> 00:01:16,070
However the Rec object is a little bit nested inside of that first argument.

18
00:01:16,120 --> 00:01:20,000
So again the first argument is different between these two types of things.

19
00:01:20,070 --> 00:01:22,600
It's I know kind of a nasty thing but that's life.

20
00:01:22,600 --> 00:01:27,640
That's just how the authors of next decided to put the stuff together rather than that first argument

21
00:01:27,670 --> 00:01:31,580
just being a plain object that has the REC property write directly on it.

22
00:01:31,690 --> 00:01:39,260
Instead the Rec object is nested on this s.t. ex property s.t. ex being short for context let's do a

23
00:01:39,260 --> 00:01:45,330
quick console log here just to kind of verify that this is the case the inside of get initial props

24
00:01:45,390 --> 00:01:50,220
I'm going to receive this first argument that we're going to refer to as app context just to kind of

25
00:01:50,220 --> 00:01:55,140
clarify and make it a little bit more obvious that this context right here is different than a context

26
00:01:56,090 --> 00:02:00,930
inside of that landing pages give initial props.

27
00:02:00,970 --> 00:02:06,220
Now this app context if we did a console log of it directly we would get a ton of information because

28
00:02:06,220 --> 00:02:08,950
there's a ton of different properties nested inside there.

29
00:02:08,990 --> 00:02:11,040
So just make this thing a little bit easier to read.

30
00:02:11,080 --> 00:02:18,760
I'm going to only print out the keys of that object to do so I'll do a console log of object keys on

31
00:02:18,850 --> 00:02:22,370
app contexts and then go into return an empty object.

32
00:02:23,640 --> 00:02:24,770
Let's save this.

33
00:02:24,790 --> 00:02:28,000
I'm gonna go back over my browser and do a hard refresh the page.

34
00:02:28,080 --> 00:02:31,020
Now I have to refresh on this page if it says that you are not signed in.

35
00:02:31,060 --> 00:02:36,850
Even though you might be really really really sure that you are signed in that is OK and then going

36
00:02:36,850 --> 00:02:40,740
to go over to my terminal and now I can see the keys console logged right there.

37
00:02:40,840 --> 00:02:47,680
So again on this app context thing we get arbitrary component router and s.t. X and C2 X is what we

38
00:02:47,740 --> 00:02:54,160
really care about because nested on there is still going to be that same wrecked property that we want

39
00:02:54,160 --> 00:02:58,590
to pass off to our build client function.

40
00:02:58,640 --> 00:02:58,890
All right.

41
00:02:58,890 --> 00:03:01,500
So again that's why we kind of abruptly pause a video.

42
00:03:01,500 --> 00:03:06,540
You're just so we understood that we have to adjust how we call build client this time around.

43
00:03:06,540 --> 00:03:08,630
So long story short here's what we're gonna do.

44
00:03:08,700 --> 00:03:14,460
We're still going to build up a client falling build client but this time around because we are inside

45
00:03:14,460 --> 00:03:16,140
of this custom app component.

46
00:03:16,320 --> 00:03:19,920
We're going to instead pass an app context that CGI X..

47
00:03:20,010 --> 00:03:21,010
That's pretty much it.

48
00:03:22,710 --> 00:03:28,370
Once you've got the client put together we can still use it as usual to attempt to fetch some data for

49
00:03:28,370 --> 00:03:29,120
example.

50
00:03:29,120 --> 00:03:41,720
I can still do a data is a weight find dot get to API users are int user and then I can still just return

51
00:03:42,320 --> 00:03:43,640
that data.

52
00:03:43,640 --> 00:03:48,350
I'm gonna make sure I mark the enclosing function as a sync and then for right now.

53
00:03:48,350 --> 00:03:52,520
Just make sure that we are executing this function and successfully making this call.

54
00:03:52,550 --> 00:03:54,650
Let's just do a console log of data right here.

55
00:03:55,620 --> 00:04:00,250
Unfortunately this awkwardness around app context is not the only thing we're going to have to kinda

56
00:04:00,270 --> 00:04:01,470
struggle with here.

57
00:04:01,470 --> 00:04:06,420
So you're gonna notice that the application when we refresh it is not going to really work as expected.

58
00:04:06,510 --> 00:04:11,990
Right now I really just want to verify that we are fetching some data in console logging it out.

59
00:04:12,060 --> 00:04:18,770
Let's save this once again flip back over to my browser do a hard refresh of the page.

60
00:04:18,840 --> 00:04:23,630
Then go back over to my terminal and I should see a console log of current user right there.

61
00:04:23,950 --> 00:04:26,100
Okay so we're definitely able to fetch the current user.

62
00:04:26,220 --> 00:04:29,550
That's good at least.

63
00:04:29,630 --> 00:04:38,510
So now let's go back over to our index dot j ust file so we've now got a get initial props into locations.

64
00:04:38,600 --> 00:04:43,850
We have one for our landing page and one for our custom app component I want to do.

65
00:04:43,850 --> 00:04:45,000
Just a quick test here.

66
00:04:45,110 --> 00:04:48,700
Back inside of the landing pages get initial props.

67
00:04:48,770 --> 00:04:50,780
I'm gonna put a console log inside of here.

68
00:04:50,810 --> 00:04:53,310
Of landing page.

69
00:04:53,750 --> 00:05:02,380
Like so all then save this and then going to refresh my browser once again and then go over to my terminal

70
00:05:02,930 --> 00:05:07,630
and when I do so you'll notice that we do not have a console log from the landing pages get initial

71
00:05:07,630 --> 00:05:09,790
perhaps function anymore.

72
00:05:09,790 --> 00:05:13,020
So this is another kind of little awkward thing around next.

73
00:05:13,080 --> 00:05:16,240
And this is kind of what I was leading to back on that diagram really quick back over here.

74
00:05:16,240 --> 00:05:16,590
I'm sorry.

75
00:05:16,600 --> 00:05:21,670
I know I'm clicking around a ton very quickly so I told you that when we define a get initial prompts

76
00:05:21,670 --> 00:05:26,050
for the app component we still needed to make sure that we can have a get initial props tied to an individual

77
00:05:26,050 --> 00:05:27,120
page.

78
00:05:27,170 --> 00:05:33,160
So unfortunately when we tie initial props to app components you get initial prompts functions so we

79
00:05:33,160 --> 00:05:37,840
tied to an individual page do not get automatically invoked anymore.

80
00:05:37,840 --> 00:05:43,330
So the reason that we just added in a console log inside of the landing page condition props was just

81
00:05:43,330 --> 00:05:46,840
show you that because we just added one to the custom page.

82
00:05:46,930 --> 00:05:49,370
Now this old one not getting called anymore.

83
00:05:50,080 --> 00:05:50,800
Yeah I know.

84
00:05:50,800 --> 00:05:53,550
Next is just a little bit awkward sometimes.

85
00:05:53,710 --> 00:05:58,450
You know it's it's a great framework and right now you might be thinking wow this is like a lot of work

86
00:05:58,450 --> 00:05:59,020
Stephen.

87
00:05:59,170 --> 00:06:03,250
And why are we going through these really intricate steps here just to figure out how to use server

88
00:06:03,250 --> 00:06:05,740
side rendering on a micro services course.

89
00:06:05,740 --> 00:06:07,900
I know this is starting to get really off topic.

90
00:06:09,080 --> 00:06:13,370
But trust me I really wanted to cover some aspect of server side rendering this course.

91
00:06:13,460 --> 00:06:17,960
And if we had tried to do all this stuff by hand we would've been in ten times a world of hurt and it

92
00:06:17,960 --> 00:06:19,590
would have all been ten times harder.

93
00:06:19,640 --> 00:06:23,760
So I know that we're running into some awkward challenges here but trust me we're almost through it.

94
00:06:23,870 --> 00:06:25,480
Let's just stick together a little bit longer.

95
00:06:26,160 --> 00:06:26,390
OK.

96
00:06:26,420 --> 00:06:32,120
So again our whole issue here we definitely need to be able to run get initial props from both locations

97
00:06:32,360 --> 00:06:38,000
but as soon as we added it into this new custom app component our second line or the original one stop

98
00:06:38,000 --> 00:06:38,830
getting invoked.

99
00:06:38,840 --> 00:06:39,730
So quick pause right here.

100
00:06:39,740 --> 00:06:41,660
We'll figure out how to fix this in just a moment.