1
00:00:00,970 --> 00:00:05,080
As I mentioned at the end of last video we are going to now focus on this landing page.

2
00:00:05,080 --> 00:00:08,860
We need to figure out whether or not the user is signed in at any given point in time and then display

3
00:00:08,860 --> 00:00:09,490
on the screen.

4
00:00:09,520 --> 00:00:13,460
Either you are signed in or you are not signed in.

5
00:00:13,540 --> 00:00:16,500
Doing this is going to be a little bit more challenging than you might expect.

6
00:00:16,510 --> 00:00:21,070
Just because we are using server side rendering I first want to begin this video by giving you a quick

7
00:00:21,070 --> 00:00:25,450
reminder of how we can decide whether or not we are signed in in general.

8
00:00:25,450 --> 00:00:27,170
So here's what we want to do.

9
00:00:28,500 --> 00:00:33,870
We want to make sure that we make requests off to our service specifically a request to the API users

10
00:00:33,900 --> 00:00:35,560
current user route.

11
00:00:35,610 --> 00:00:40,290
If we are signed in then the response we get back is going to have some information about ourselves.

12
00:00:40,290 --> 00:00:42,920
So for example our I.D. our email and so on.

13
00:00:43,140 --> 00:00:48,500
But if we are not signed in and the response is going to have no to ultimately that's what we want to

14
00:00:48,500 --> 00:00:50,390
do to find whether or not we are signed it.

15
00:00:50,420 --> 00:00:54,650
We gotta make a request off to this current user end point.

16
00:00:54,650 --> 00:00:58,490
Now the real question here is when are we going to make this request.

17
00:00:58,520 --> 00:01:02,200
Chances are that whenever a user makes an initial request to our server.

18
00:01:02,240 --> 00:01:08,540
So this initial request to get our application we want to have some kind of H.M. file being immediately

19
00:01:08,540 --> 00:01:11,420
sent back with some relevant content inside of it.

20
00:01:11,420 --> 00:01:16,190
In other words this Asian all file that we send back immediately needs to say whether or not the user

21
00:01:16,190 --> 00:01:17,770
is signed in.

22
00:01:17,840 --> 00:01:23,240
That means that we need to figure out essentially how to make the request while our application is being

23
00:01:23,240 --> 00:01:31,220
built or served from our next J server so we can have to inspect this entire server side rendering approaches

24
00:01:31,260 --> 00:01:34,560
a little bit more and get a better idea or understanding of what's going on with it.

25
00:01:34,570 --> 00:01:36,330
So quick diagram.

26
00:01:36,470 --> 00:01:36,740
All right.

27
00:01:36,770 --> 00:01:38,680
So here's what's actually going on behind the scenes.

28
00:01:38,690 --> 00:01:43,630
Whenever we make a request to our next GSA application so request is going to come into the next JSF

29
00:01:44,270 --> 00:01:50,280
and on our client pod or inside that container the following logic is going to be executed next J US

30
00:01:50,300 --> 00:01:54,860
is going to take a look at the URL of the incoming request and based upon it you're all going to decide

31
00:01:54,860 --> 00:01:56,650
what components to show.

32
00:01:56,660 --> 00:02:01,310
So in other words it's going to decide whether or not it needs to show the sign up page or the banana

33
00:02:01,310 --> 00:02:08,460
page or the root root page then for each those components that it decides that needs to show it's going

34
00:02:08,470 --> 00:02:14,270
to call the get initial props static method for each of these relevant components.

35
00:02:14,270 --> 00:02:15,710
What is get initial prompts.

36
00:02:15,920 --> 00:02:17,170
Let me show you back inside my code.

37
00:02:17,180 --> 00:02:25,390
Ed I'm going to find my index dot j ust file inside of here we've got a very simple component function

38
00:02:25,390 --> 00:02:27,660
right now I'm going to update this thing just a little bit.

39
00:02:27,670 --> 00:02:33,050
I'm going to change the name of this or I'm going to assign this function to a variable I'll call about

40
00:02:33,070 --> 00:02:41,340
landing page I'll then do an export default of landing page down here at the bottom then in between

41
00:02:41,340 --> 00:02:48,990
the two I can say it landing page dot get initial props so this get initial prop setting is specific

42
00:02:48,990 --> 00:02:55,410
to Next j us if we decide to implement get initial props the next J ust is going to call this function

43
00:02:55,620 --> 00:03:01,350
while it is attempting to render our application on the server get initial props is our opportunity

44
00:03:01,350 --> 00:03:06,930
to attend to fetch some data that this component needs during these server side rendering process so

45
00:03:06,930 --> 00:03:12,240
if we decide to implement get initial props it'll be automatically called on the server when next J

46
00:03:12,240 --> 00:03:19,740
US decides to show this component once get initial props is invoked any data that we return from it's

47
00:03:19,870 --> 00:03:26,370
not usually in the form of an object is going to be provided to our component as a prop so we're going

48
00:03:26,370 --> 00:03:30,370
to render each component that next decided to show with whatever data we return from.

49
00:03:30,390 --> 00:03:35,520
Get initial props next to us and then going to take the smell from all the components it rendered and

50
00:03:35,520 --> 00:03:37,630
send back a full response.

51
00:03:37,640 --> 00:03:43,110
So long story short if we ever want to fetch some data with next to us during the server side rendering

52
00:03:43,110 --> 00:03:48,450
process we are going to define this get initial props function right here and this is where we can make

53
00:03:48,450 --> 00:03:54,280
some async requests we can somehow generate data whatever we need to do to fetch data.

54
00:03:54,300 --> 00:04:00,910
We are going to implement inside of get initial props and this function will be executed on the server.

55
00:04:01,050 --> 00:04:06,150
We can not do any data loading inside of components themselves when we render a component with Next

56
00:04:06,150 --> 00:04:09,010
j us during these server side rendering phase.

57
00:04:09,060 --> 00:04:14,160
We don't get any opportunity to make requests all of our components are executed or rendered just one

58
00:04:14,160 --> 00:04:14,970
single time.

59
00:04:15,120 --> 00:04:20,190
So we cannot attempt to say make a request and then wait for the response and possibly try to update

60
00:04:20,190 --> 00:04:21,830
some state or anything like that.

61
00:04:21,870 --> 00:04:26,850
Instead each of our components during server side rendering are just rendered once we take the result

62
00:04:27,030 --> 00:04:27,630
and that's it.

63
00:04:27,630 --> 00:04:29,820
That's what's gonna be sent back to the user.

64
00:04:29,860 --> 00:04:34,430
Now of course after our application shows up on the browser all bets are off.

65
00:04:34,500 --> 00:04:36,680
Get initial props not really used anymore.

66
00:04:36,690 --> 00:04:40,110
Instead we're going to rely upon our components implementation.

67
00:04:40,110 --> 00:04:45,190
So all this discussion around get initial props is really just about these server side rendering process.

68
00:04:45,300 --> 00:04:48,830
That's it and they help you really understand how this stuff works.

69
00:04:48,850 --> 00:04:54,730
Let's just put in a little bit of test code inside this index dot J has file inside of get initial props.

70
00:04:54,730 --> 00:05:01,940
I'm going to put in a console log of I am on the server and then after that I'm going to return an empty

71
00:05:01,940 --> 00:05:08,510
object to this empty object right here is going to show up as props to landing page to make it a little

72
00:05:08,510 --> 00:05:09,380
bit more interesting.

73
00:05:09,380 --> 00:05:11,990
Well let's put some imaginary data inside there.

74
00:05:11,990 --> 00:05:14,870
I can put in how about a color of red.

75
00:05:14,940 --> 00:05:21,440
Now I would be able to access that property as a prop inside this component so I can pull out that color

76
00:05:21,440 --> 00:05:27,100
property and I'll do a console log right here of I am in the component

77
00:05:30,250 --> 00:05:34,450
and after that I will print out the color.

78
00:05:34,540 --> 00:05:36,050
Let's save this.

79
00:05:36,210 --> 00:05:39,530
Now let's go back over the browser and try to test this thing out.

80
00:05:39,580 --> 00:05:43,780
I'm going to navigate back to our main landing page and then once they are going to make sure that I

81
00:05:43,780 --> 00:05:49,840
refresh the page manually at least one time you'll notice now that we've got a console log right here

82
00:05:49,840 --> 00:05:55,260
of I am INDY component and we see red and if I I'll also go back over to my terminal.

83
00:05:55,270 --> 00:06:02,090
Most importantly we'll see a console log right here of I am on the server I am in the component.

84
00:06:02,250 --> 00:06:03,630
So what's the lesson here.

85
00:06:03,630 --> 00:06:08,870
Well again this get initial prompts function is going to be executed during the server side rendering

86
00:06:08,870 --> 00:06:09,770
process.

87
00:06:09,770 --> 00:06:14,060
This functions where we're going to attempt to fetch some data specifically for doing some initial rendering

88
00:06:14,090 --> 00:06:15,110
of our app.

89
00:06:15,440 --> 00:06:19,670
Any data that we return from this function is going to show up inside of our component so we can freely

90
00:06:19,670 --> 00:06:24,800
access all the data inside there if we need to fetch any data during the server side rendering process.

91
00:06:24,890 --> 00:06:26,700
We have to do inside of get initial props.

92
00:06:26,720 --> 00:06:28,900
We can not do it inside of a component.

93
00:06:29,120 --> 00:06:34,250
And then finally once our entire application is executing inside the browser we're not really going

94
00:06:34,250 --> 00:06:37,100
to rely upon it get initial props too much after that.

95
00:06:37,220 --> 00:06:42,750
Instead we're going to be mostly concerned with fetching data as usual inside of a component.

96
00:06:42,750 --> 00:06:43,100
Yes.

97
00:06:43,100 --> 00:06:45,300
Now we've got some backstory on server side rendering.

98
00:06:45,320 --> 00:06:47,300
Quick pause right here and continue in just a moment.