1
00:00:02,000 --> 00:00:03,000
Now before,

2
00:00:03,000 --> 00:00:06,000
I also always had a look at the production build

3
00:00:06,000 --> 00:00:09,000
to really show you what Next.js does under the hood.

4
00:00:09,000 --> 00:00:12,000
And I wanna do the same here for getServerSideProps.

5
00:00:13,000 --> 00:00:17,000
So for this, I will add a console log statement here,

6
00:00:18,000 --> 00:00:20,000
where I log server side code.

7
00:00:22,000 --> 00:00:25,000
So that we see when this function runs

8
00:00:25,000 --> 00:00:27,000
and now if we save that file,

9
00:00:27,000 --> 00:00:29,000
and we again run npm run build

10
00:00:29,000 --> 00:00:31,000
to build this for production,

11
00:00:31,000 --> 00:00:34,000
we'll see when that code gets executed.

12
00:00:34,000 --> 00:00:37,000
Now, here, if I make this a bit bigger

13
00:00:37,000 --> 00:00:39,000
we see that we again

14
00:00:39,000 --> 00:00:42,000
pre-generated a couple of pages and importantly

15
00:00:42,000 --> 00:00:46,000
it's the same number of pages as we generated before.

16
00:00:46,000 --> 00:00:49,000
It's still the starting page slash nothing

17
00:00:49,000 --> 00:00:52,000
with the revalidation recognized,

18
00:00:52,000 --> 00:00:54,000
it's then 404 page.

19
00:00:54,000 --> 00:00:57,000
And it stands the product pages for P1,

20
00:00:57,000 --> 00:00:59,000
P2, P3 and so on.

21
00:00:59,000 --> 00:01:03,000
Now the user profile page was not pre-generated

22
00:01:03,000 --> 00:01:08,000
as is in the end signaled by this Lambda symbol here.

23
00:01:08,000 --> 00:01:12,000
The UID file also wasn't pre-generated.

24
00:01:12,000 --> 00:01:14,000
So this Lambda symbol here

25
00:01:14,000 --> 00:01:18,000
shows you that these pages are not pre-generated

26
00:01:18,000 --> 00:01:22,000
but instead will be pre-rendered on the server only.

27
00:01:22,000 --> 00:01:25,000
And that makes sense because in user profile

28
00:01:25,000 --> 00:01:27,000
we're using get Server Side Props

29
00:01:27,000 --> 00:01:31,000
and then UID we're using get Server Side Props.

30
00:01:31,000 --> 00:01:34,000
That's why, those pages are not pre-generated

31
00:01:34,000 --> 00:01:37,000
So, now with that

32
00:01:37,000 --> 00:01:41,000
If we, again, start our server with npm start here

33
00:01:42,000 --> 00:01:44,000
If you load, local host to three thousands,

34
00:01:44,000 --> 00:01:46,000
we're on this page here,

35
00:01:46,000 --> 00:01:49,000
but if I now visit the user dash profile page here

36
00:01:49,000 --> 00:01:51,000
and we see Max,

37
00:01:51,000 --> 00:01:53,000
if we go back to that terminal

38
00:01:53,000 --> 00:01:57,000
where I started this production server with npm start,

39
00:01:57,000 --> 00:02:00,000
we see server side code being logged here.

40
00:02:00,000 --> 00:02:03,000
So this output here, we see that log here,

41
00:02:03,000 --> 00:02:07,000
and that proves that this does code now executed,

42
00:02:07,000 --> 00:02:11,000
but as shown before that this page was not pre-generated

43
00:02:12,000 --> 00:02:14,000
With that, I'm going to get rid of that

44
00:02:14,000 --> 00:02:16,000
console log statement

45
00:02:16,000 --> 00:02:21,000
but I hope it's crystal clear when which code runs now.

46
00:02:21,000 --> 00:02:23,000
And that is it for a get Server Side Props

47
00:02:23,000 --> 00:02:26,000
and get static props

48
00:02:26,000 --> 00:02:30,000
and also for get Static Paths.

49
00:02:30,000 --> 00:02:32,000
I hope the differences are clear,

50
00:02:32,000 --> 00:02:35,000
especially between static pre generation

51
00:02:35,000 --> 00:02:37,000
and server side code

52
00:02:37,000 --> 00:02:39,000
that only runs there.

53
00:02:39,000 --> 00:02:42,000
I hope it's also clear why we use that.

54
00:02:42,000 --> 00:02:46,000
Simply so that we can prepare data for our component

55
00:02:46,000 --> 00:02:49,000
ahead of time or on the server

56
00:02:49,000 --> 00:02:53,000
so that we can serve a finished page to the client,

57
00:02:53,000 --> 00:02:57,000
that can offer a better user experience to our users

58
00:02:57,000 --> 00:02:59,000
since they get the finished page

59
00:02:59,000 --> 00:03:02,000
and all the content is there right from the start

60
00:03:02,000 --> 00:03:05,000
but it can also help us with search engines

61
00:03:05,000 --> 00:03:10,000
since search engine crawlers also see the finished page.

62
00:03:10,000 --> 00:03:13,000
And with that, there's only one thing left

63
00:03:13,000 --> 00:03:16,000
which I also want to take a look at in this module

64
00:03:16,000 --> 00:03:19,000
and that's client site data fetching,

65
00:03:19,000 --> 00:03:22,000
what that is, and when we still might need that.