1
00:00:01,420 --> 00:00:05,470
In the last video we had a quick discussion around how we fetch data during the server side rendering

2
00:00:05,470 --> 00:00:06,320
process.

3
00:00:06,490 --> 00:00:08,580
So let's get back to our topic at hand.

4
00:00:08,590 --> 00:00:13,840
We are trying to make sure that we can display on the initial response that comes back to the user's

5
00:00:13,840 --> 00:00:17,770
browser on that initial HMO document whether or not the user is signed in.

6
00:00:18,310 --> 00:00:22,930
So we need to make a request to figure out whether or not the user is authenticated during the server

7
00:00:22,930 --> 00:00:24,500
side rendering process.

8
00:00:24,550 --> 00:00:30,690
So that means that from inside of get initial props we need to make a request off to our off service.

9
00:00:30,730 --> 00:00:32,210
That's our goal.

10
00:00:32,260 --> 00:00:36,850
We know that we're going to have to place this request inside of get initial props because only get

11
00:00:36,850 --> 00:00:41,710
initial props or get initial props is the only location where we can fetch data during the server side

12
00:00:41,710 --> 00:00:43,280
rendering process.

13
00:00:43,300 --> 00:00:48,970
So with all that mind let's go back over to our editor and find our index dot J.S. file at the very

14
00:00:48,970 --> 00:00:49,580
top.

15
00:00:49,600 --> 00:00:54,340
I'm going to import exiles from Exodus.

16
00:00:54,410 --> 00:00:56,600
Now we're gonna make access to make the request.

17
00:00:56,720 --> 00:01:02,060
And as I say that you might be curious why are we using axioms when we just put together that use request

18
00:01:02,060 --> 00:01:04,310
hook a little bit ago.

19
00:01:04,560 --> 00:01:08,760
Remember we create a user request to make it really easy to make some kind of request and possibly handle

20
00:01:08,790 --> 00:01:10,690
any errors that might occur.

21
00:01:10,710 --> 00:01:17,520
The reason for this is that user request is a hook and hooks are used inside of React Components get

22
00:01:17,520 --> 00:01:23,280
initial props right here is not a component it is a plane function we call this thing or I should say

23
00:01:23,280 --> 00:01:29,630
Next j s calls this thing and we are required to immediately return some data so we can only use use

24
00:01:29,630 --> 00:01:31,780
request inside of a react component.

25
00:01:31,970 --> 00:01:36,530
And as I just mentioned in the last video we are not allowed to fetch data from inside of a component

26
00:01:36,740 --> 00:01:42,260
during the server side rendering process we can only fetch data from inside of get initial props.

27
00:01:42,380 --> 00:01:47,520
So that's why we are using axles instead of user request all right.

28
00:01:47,590 --> 00:01:54,250
So let's make use of axioms effect some data from inside of get initial props I'm going to put on the

29
00:01:54,250 --> 00:02:05,770
async you were right here I'm going to get a response from a weight axles that gets API users current

30
00:02:05,770 --> 00:02:12,480
user then we're going to take the response right here or more precisely we're going to take the data

31
00:02:12,510 --> 00:02:18,480
out of it and return it from get initial props as a quick reminder on what response we should really

32
00:02:18,480 --> 00:02:26,000
expect to receive back I'm going to pull open post man very quickly just to give you a quick reminder.

33
00:02:26,180 --> 00:02:30,310
All right this thing is slow to open.

34
00:02:30,320 --> 00:02:39,110
But here we go song and make a get request to users current user and we expect to receive back an object

35
00:02:39,140 --> 00:02:42,750
that has a current user property and if we are signed in we should see an object there.

36
00:02:42,770 --> 00:02:44,070
Otherwise we will see no.

37
00:02:44,190 --> 00:02:47,370
So that is the structure of data that we're going to expect to receive back.

38
00:02:48,110 --> 00:02:51,340
So that's going to be on the response not data property.

39
00:02:51,360 --> 00:02:57,940
So from this function will return response not data like so that means that now inside of our component

40
00:02:57,940 --> 00:03:03,570
itself we should get a current user property there.

41
00:03:03,670 --> 00:03:10,520
Right now let's replace that console log and just do a console log of current user.

42
00:03:10,580 --> 00:03:10,830
All right.

43
00:03:10,830 --> 00:03:13,140
So I think that this is ready to test.

44
00:03:13,150 --> 00:03:16,450
I want you to know that the code we have inside of here is good.

45
00:03:16,530 --> 00:03:17,340
Everything inside of here.

46
00:03:17,340 --> 00:03:20,160
This is how we correctly fetch data.

47
00:03:20,160 --> 00:03:26,130
However what we have right here is not going to work for some very interesting reasons specifically

48
00:03:26,160 --> 00:03:30,360
because we're making use of this Cuban Eddie's system and all is kind of crazy stuff.

49
00:03:30,390 --> 00:03:34,710
So again the code we have here is good but we're going to have to add in a little bit of a configuration

50
00:03:34,710 --> 00:03:39,690
change to get this stuff to work just because of how we are making use of next J.S. specifically inside

51
00:03:39,690 --> 00:03:41,780
of a cougar his environment.

52
00:03:41,820 --> 00:03:49,290
Let's save this I'm going to put back over to my browser and I'm going to refresh the page when I do

53
00:03:49,290 --> 00:03:54,080
so I get a real nasty air air connection refused local host.

54
00:03:54,090 --> 00:03:55,720
That's essentially what that IP is.

55
00:03:55,800 --> 00:03:57,120
Or 80.

56
00:03:57,150 --> 00:04:00,150
Well that might be a little bit unexpected.

57
00:04:00,150 --> 00:04:02,150
Let me show you something really interesting.

58
00:04:02,250 --> 00:04:03,630
Back over inside of index.

59
00:04:03,670 --> 00:04:04,790
Yes.

60
00:04:04,890 --> 00:04:12,000
I'm going to come in out get initial props and I'm going to copy the axial start get call to inside

61
00:04:12,150 --> 00:04:13,170
of my components.

62
00:04:13,440 --> 00:04:15,400
I'm not going to put a weight on there or anything like that.

63
00:04:15,420 --> 00:04:21,090
I'm just going to attempt to make the request from inside the browser and then go to save this look

64
00:04:21,090 --> 00:04:22,710
back over now.

65
00:04:22,710 --> 00:04:24,740
Looks like everything is loading up successfully again.

66
00:04:24,750 --> 00:04:30,390
But what's more relevant is you'll notice inside of my network request log I was able to successfully

67
00:04:30,450 --> 00:04:33,210
make the request off to our art service.

68
00:04:33,210 --> 00:04:39,330
So let me summarize what just happened here when we tried to make this request while we were executing

69
00:04:39,330 --> 00:04:45,020
this code on our server it failed horribly and we saw that really mysterious error message.

70
00:04:45,330 --> 00:04:51,250
But when we were making that request from inside the browser everything worked as expected so there's

71
00:04:51,260 --> 00:04:53,210
some difference in environment here.

72
00:04:53,210 --> 00:04:59,420
Something is very different when we try to make the request on our server versus on our clients or really

73
00:04:59,420 --> 00:05:00,510
inside the browser itself.

74
00:05:01,220 --> 00:05:02,150
Let's take a pause right here.

75
00:05:02,150 --> 00:05:03,520
We're gonna come back the next video.

76
00:05:03,590 --> 00:05:06,710
I'm going to help you understand exactly why we're seeing this oddity.