1
00:00:02,000 --> 00:00:05,000
So getStaticProps is a very useful function

2
00:00:05,000 --> 00:00:08,000
which you can export in your page components to ensure

3
00:00:08,000 --> 00:00:12,000
that your pre-rendered pages contain data

4
00:00:12,000 --> 00:00:15,000
you might need to wait for.

5
00:00:15,000 --> 00:00:17,000
Now with revalidate, you can ensure

6
00:00:17,000 --> 00:00:21,000
that this page is also updated regularly after deployment.

7
00:00:21,000 --> 00:00:25,000
But sometimes even a regular update is not enough.

8
00:00:25,000 --> 00:00:29,000
Sometimes you really want to regenerate this page

9
00:00:29,000 --> 00:00:32,000
for every incoming request.

10
00:00:32,000 --> 00:00:35,000
So you want to pre-generate the page dynamically

11
00:00:35,000 --> 00:00:40,000
on the fly after deployment on the server.

12
00:00:40,000 --> 00:00:41,000
Not during the build process

13
00:00:41,000 --> 00:00:44,000
and not every couple of seconds,

14
00:00:44,000 --> 00:00:46,000
but for every request.

15
00:00:46,000 --> 00:00:47,000
And if that's your goal,

16
00:00:47,000 --> 00:00:50,000
then there is an alternative to getStaticProps.

17
00:00:50,000 --> 00:00:53,000
Now, I will comment out getStaticProps,

18
00:00:53,000 --> 00:00:55,000
because it is the better choice here

19
00:00:55,000 --> 00:00:57,000
and I wanna use it later again.

20
00:00:57,000 --> 00:01:00,000
But I want to show you this alternative as well.

21
00:01:00,000 --> 00:01:03,000
And that would be another function which you can export.

22
00:01:03,000 --> 00:01:07,000
A function that can also be async if you want to.

23
00:01:07,000 --> 00:01:11,000
And that's the getServerSideProps function.

24
00:01:12,000 --> 00:01:15,000
Just like getStaticProps, that is a reserved name,

25
00:01:15,000 --> 00:01:17,000
which NextJS will be looking for.

26
00:01:17,000 --> 00:01:20,000
And the difference to getStaticProps

27
00:01:20,000 --> 00:01:23,000
is that this function will now not run

28
00:01:23,000 --> 00:01:25,000
during the build process,

29
00:01:25,000 --> 00:01:29,000
but instead always on the server after deployment.

30
00:01:29,000 --> 00:01:32,000
Now you will still return an object here,

31
00:01:32,000 --> 00:01:35,000
an object with a props property,

32
00:01:35,000 --> 00:01:38,000
because after all, this function still is

33
00:01:38,000 --> 00:01:41,000
about getting the props for this page component.

34
00:01:41,000 --> 00:01:45,000
And you can still then fetch data from an API here,

35
00:01:45,000 --> 00:01:48,000
or from the file system, whatever you want to do.

36
00:01:48,000 --> 00:01:52,000
Any code you write in here will always run on the server,

37
00:01:52,000 --> 00:01:53,000
never in the client.

38
00:01:53,000 --> 00:01:56,000
So you can run the server side code in here,

39
00:01:56,000 --> 00:01:59,000
you can also perform operations that use credentials

40
00:01:59,000 --> 00:02:02,000
that should not be exposed to your users,

41
00:02:02,000 --> 00:02:05,000
because this code only runs on the server.

42
00:02:05,000 --> 00:02:09,000
And then ultimately, you return your props object.

43
00:02:09,000 --> 00:02:12,000
So here an object with a meetups key,

44
00:02:12,000 --> 00:02:15,000
which holds my dummy meetups, for example.

45
00:02:15,000 --> 00:02:18,000
Now you can't set revalidate here,

46
00:02:18,000 --> 00:02:20,000
because it doesn't make any sense here.

47
00:02:20,000 --> 00:02:23,000
This getServerSideProps function runs

48
00:02:23,000 --> 00:02:25,000
for every incoming requests anyways,

49
00:02:25,000 --> 00:02:29,000
so there is no need to revalidate every x seconds.

50
00:02:29,000 --> 00:02:31,000
Now what you can do in here,

51
00:02:31,000 --> 00:02:34,000
is you can work with a parameter,

52
00:02:34,000 --> 00:02:37,000
which you'll receive. The context parameter.

53
00:02:37,000 --> 00:02:40,000
You actually also get this and getStaticProps,

54
00:02:40,000 --> 00:02:43,000
but I will come back to it there, later.

55
00:02:43,000 --> 00:02:47,000
You do get it here and getServerSideProps as well.

56
00:02:47,000 --> 00:02:50,000
And there in this context argument,

57
00:02:50,000 --> 00:02:52,000
in this context parameter.

58
00:02:52,000 --> 00:02:55,000
You also get access to the request object

59
00:02:55,000 --> 00:02:58,000
under direct key, and the response object

60
00:02:58,000 --> 00:03:00,000
that will be sent back.

61
00:03:00,000 --> 00:03:03,000
And if you worked with NodeJS and Express before,

62
00:03:03,000 --> 00:03:06,000
this might look familiar to you.

63
00:03:06,000 --> 00:03:09,000
There, you also get request and response objects

64
00:03:09,000 --> 00:03:12,000
in your middleware to then work with those.

65
00:03:12,000 --> 00:03:15,000
And especially having access

66
00:03:15,000 --> 00:03:17,000
to the concrete request object can be helpful.

67
00:03:17,000 --> 00:03:21,000
For example, when you're working with authentication,

68
00:03:21,000 --> 00:03:24,000
and you need to check some session cookie

69
00:03:24,000 --> 00:03:25,000
or anything like this.

70
00:03:25,000 --> 00:03:29,000
This is something which I show in my full NextJS course,

71
00:03:29,000 --> 00:03:31,000
it's a little too advanced here.

72
00:03:31,000 --> 00:03:34,000
But you do have access to the incoming request

73
00:03:34,000 --> 00:03:37,000
and all its headers and the request body if you need to.

74
00:03:37,000 --> 00:03:41,000
And that then might give you extra data or information,

75
00:03:41,000 --> 00:03:44,000
which you need for the code that executes

76
00:03:44,000 --> 00:03:46,000
in getServerSideProps.

77
00:03:46,000 --> 00:03:49,000
Ultimately, you then don't return a response

78
00:03:49,000 --> 00:03:51,000
by working on that response object here,

79
00:03:51,000 --> 00:03:55,000
but instead, you return this object with the props key,

80
00:03:55,000 --> 00:03:59,000
which holds the props for this page component function.

81
00:03:59,000 --> 00:04:01,000
So that is how you then can use getServerSideProps

82
00:04:01,000 --> 00:04:06,000
for preparing that data for your page.

83
00:04:06,000 --> 00:04:09,000
And if we do use getServerSideProps here,

84
00:04:09,000 --> 00:04:13,000
if we save everything, if I reload the starting page,

85
00:04:13,000 --> 00:04:15,000
you see it works just as before,

86
00:04:15,000 --> 00:04:17,000
and if we view the page source,

87
00:04:17,000 --> 00:04:20,000
we also see all the data in there again.

88
00:04:20,000 --> 00:04:22,000
The unordered list with all the list items.

89
00:04:22,000 --> 00:04:24,000
That works exactly as we learned it,

90
00:04:24,000 --> 00:04:28,000
but now their page is really pre-generated

91
00:04:28,000 --> 00:04:29,000
for every incoming request.

92
00:04:29,000 --> 00:04:32,000
Now, which one of the two should you use?

93
00:04:32,000 --> 00:04:36,000
Is getServerSideProps better or getStaticProps?

94
00:04:36,000 --> 00:04:39,000
getServerSideProps might sound better

95
00:04:39,000 --> 00:04:42,000
because it's guaranteed to run for every request.

96
00:04:42,000 --> 00:04:45,000
But that actually can be a disadvantage,

97
00:04:45,000 --> 00:04:49,000
because that means that you need to wait for your page

98
00:04:49,000 --> 00:04:53,000
to be generated on every incoming request.

99
00:04:53,000 --> 00:04:57,000
Now if you don't have data that changes all the time,

100
00:04:57,000 --> 00:04:59,000
and with that, I really mean

101
00:04:59,000 --> 00:05:01,000
that it changes multiple times every second.

102
00:05:01,000 --> 00:05:05,000
And if you don't need access to the request object,

103
00:05:05,000 --> 00:05:07,000
let's say for authentication,

104
00:05:07,000 --> 00:05:10,000
getStaticProps is actually better.

105
00:05:10,000 --> 00:05:13,000
Because there you pre-generate an HTML file,

106
00:05:13,000 --> 00:05:17,000
that file can then be stored and served by a CDN.

107
00:05:17,000 --> 00:05:21,000
And that simply is faster than regenerating

108
00:05:21,000 --> 00:05:24,000
and fetching that data for every incoming request.

109
00:05:24,000 --> 00:05:27,000
So your page will be faster when working

110
00:05:27,000 --> 00:05:30,000
with getStaticProps, because then it can be cached

111
00:05:30,000 --> 00:05:34,000
and reused, instead of regenerated all the time.

112
00:05:34,000 --> 00:05:38,000
Hence, you should really only use getServerSideProps

113
00:05:38,000 --> 00:05:41,000
if you need access to that concrete request object,

114
00:05:41,000 --> 00:05:44,000
because you don't have access to request

115
00:05:44,000 --> 00:05:46,000
and response in getStaticProps.

116
00:05:47,000 --> 00:05:49,000
Or if you really have data

117
00:05:49,000 --> 00:05:53,000
that changes multiple times every second,

118
00:05:53,000 --> 00:05:56,000
then therefore even revalidate won't help you,

119
00:05:56,000 --> 00:05:59,000
then getServerSideProps is a great choice.

120
00:05:59,000 --> 00:06:01,000
Now here for our meetup list, though,

121
00:06:01,000 --> 00:06:05,000
it's not a great choice, because that is not data,

122
00:06:05,000 --> 00:06:06,000
which changes frequently.

123
00:06:06,000 --> 00:06:08,000
And here I also don't need to work

124
00:06:08,000 --> 00:06:10,000
with the incoming request.

125
00:06:10,000 --> 00:06:14,000
And therefore I will comment getServerSideprops out again,

126
00:06:14,000 --> 00:06:16,000
and comment getStaticProps in.

127
00:06:16,000 --> 00:06:19,000
Because with that, we can take advantage of the caching

128
00:06:19,000 --> 00:06:23,000
and we're not regenerating the page multiple times,

129
00:06:23,000 --> 00:06:25,000
unnecessarily.