1
00:00:00,920 --> 00:00:01,380
All right.

2
00:00:01,380 --> 00:00:02,900
Last a little bit of setup here.

3
00:00:02,970 --> 00:00:07,590
So we have fetched some information that we assigned to page props and we need to make sure that this

4
00:00:07,590 --> 00:00:10,890
information gets down into the page we're trying to display.

5
00:00:10,890 --> 00:00:15,510
There might also be some data say about the current user that we want to share with some header component

6
00:00:15,510 --> 00:00:17,520
that we need to eventually create as well.

7
00:00:17,520 --> 00:00:20,200
So how are we going to share all this information around.

8
00:00:20,220 --> 00:00:25,950
Well down here at the return statement I can replace return data with return.

9
00:00:25,950 --> 00:00:28,200
I'm going to throw in there page props.

10
00:00:28,420 --> 00:00:31,190
And we're also going to pass in current user.

11
00:00:31,200 --> 00:00:33,660
So we need to extract the current user out of this data right here.

12
00:00:33,660 --> 00:00:39,740
So I'll say current user is data dot current user

13
00:00:42,540 --> 00:00:47,850
alternately we could just put in dot dot dot data because remember that object is going to have a current

14
00:00:47,850 --> 00:00:50,760
user property inside of it.

15
00:00:50,840 --> 00:00:53,270
I'm going to delete the console log right there.

16
00:00:53,270 --> 00:00:59,470
So now this information that we are returning from this object is going to show out as props up here.

17
00:00:59,480 --> 00:01:04,180
You'll notice that we kind of kept that same idea of naming page props with Page props.

18
00:01:04,460 --> 00:01:09,140
So whatever we are getting out of get initial props right here is going to show up as page props up

19
00:01:09,140 --> 00:01:13,130
there and we are already passing that information through into the component.

20
00:01:13,130 --> 00:01:17,180
So now in addition I'm going to also pull off current user.

21
00:01:17,180 --> 00:01:19,650
We don't really have anywhere to show the current user with this.

22
00:01:19,670 --> 00:01:21,200
Each one had a right here.

23
00:01:21,200 --> 00:01:22,060
So how about.

24
00:01:22,160 --> 00:01:23,930
Well I guess maybe we do.

25
00:01:23,930 --> 00:01:33,460
Let's try to print out here about current user dot email let's try to show some information about the

26
00:01:33,460 --> 00:01:36,040
current user inside that H1.

27
00:01:36,070 --> 00:01:42,700
All right so let's now save this know flip back over and now I should see if there is my e-mail.

28
00:01:43,060 --> 00:01:46,650
And I've also got you are not signed in which means that now that's better.

29
00:01:46,660 --> 00:01:47,950
I said do a refresh.

30
00:01:47,980 --> 00:01:50,710
So you are now assigned in awesome.

31
00:01:50,800 --> 00:01:55,170
That means that we are correctly executing our initial props for the page.

32
00:01:55,380 --> 00:01:58,100
We're communicating that information down into the page.

33
00:01:58,110 --> 00:02:03,990
We've also got some custom or additional information fetching that is common to all of the different

34
00:02:03,990 --> 00:02:06,530
pages inside our application.

35
00:02:06,550 --> 00:02:07,350
So this is pretty much it.

36
00:02:07,360 --> 00:02:09,580
We've now got a working solution.

37
00:02:09,580 --> 00:02:13,750
Now at this point I want to mention that what we've come up with here is kind of nasty.

38
00:02:14,290 --> 00:02:19,000
And the fact that next J S did not just kind of automatically handle the fact that we want to have get

39
00:02:19,000 --> 00:02:21,510
initial props in multiple locations.

40
00:02:22,180 --> 00:02:24,400
I wish it was a little bit easier to use than this.

41
00:02:24,730 --> 00:02:28,270
If all this stuff seems really confusing that is truly fine in my opinion.

42
00:02:28,270 --> 00:02:31,240
This is a little bit more complicated than it really had to be.

43
00:02:31,310 --> 00:02:36,250
And I think that maybe this API could have been designed a bit more easily to use but that's life.

44
00:02:36,250 --> 00:02:37,060
This is what we get.

45
00:02:37,090 --> 00:02:40,810
And to be honest with you if you are trying to do all this server side rendering stuff from scratch

46
00:02:40,900 --> 00:02:46,880
and not use next yes we would have been running into our own gigantic set of issues so at the end of

47
00:02:46,880 --> 00:02:48,810
the day next to us really does save us time.

48
00:02:49,580 --> 00:02:55,030
OK so we've got information fetching ability or the entire app inside of this app components condition

49
00:02:55,100 --> 00:02:55,800
props.

50
00:02:55,840 --> 00:03:01,020
We also have information fetching ability for individual pages as well.

51
00:03:01,080 --> 00:03:02,190
Let's take a pause right here.

52
00:03:02,280 --> 00:03:03,180
Continue in just a moment.