1
00:00:02,000 --> 00:00:05,000
NextJS has this built-in page pre-rendering

2
00:00:05,000 --> 00:00:08,000
but this built-in process has a flaw

3
00:00:08,000 --> 00:00:10,000
if you wanna call it like this.

4
00:00:10,000 --> 00:00:12,000
As I showed you a couple of seconds ago,

5
00:00:12,000 --> 00:00:16,000
the page that is pre-rendered has basically the snapshot

6
00:00:16,000 --> 00:00:21,000
after the first component render cycle as its content

7
00:00:21,000 --> 00:00:23,000
and that might be missing crucial data.

8
00:00:23,000 --> 00:00:25,000
So if we visit some route,

9
00:00:25,000 --> 00:00:29,000
if some request is sent to some route to this page then,

10
00:00:29,000 --> 00:00:32,000
there we return that pre-rendered page

11
00:00:32,000 --> 00:00:34,000
but we might be missing data here.

12
00:00:34,000 --> 00:00:37,000
So whilst this is theoretically good for SEO,

13
00:00:37,000 --> 00:00:39,000
for search engine optimization,

14
00:00:39,000 --> 00:00:41,000
it might not always be.

15
00:00:41,000 --> 00:00:44,000
But after this HTML page was received,

16
00:00:44,000 --> 00:00:46,000
React will actually take over,

17
00:00:46,000 --> 00:00:49,000
the page is hydrated as this process is called,

18
00:00:49,000 --> 00:00:52,000
which means that now React will turn this

19
00:00:52,000 --> 00:00:55,000
into a single page application and take over control

20
00:00:55,000 --> 00:00:59,000
and then this useEffect function might be executed,

21
00:00:59,000 --> 00:01:03,000
data might be fetched and the page might be updated

22
00:01:03,000 --> 00:01:06,000
in the browser, not on the server,

23
00:01:06,000 --> 00:01:07,000
not on the pre-rendered page

24
00:01:07,000 --> 00:01:12,000
but instead, after this page was received in the browser.

25
00:01:12,000 --> 00:01:14,000
And therefore, we then have a fully interactive page

26
00:01:14,000 --> 00:01:17,000
or app with all the data we need.

27
00:01:17,000 --> 00:01:21,000
But if we wanna pre-render a page with data

28
00:01:21,000 --> 00:01:24,000
so that this initially returned HTML code

29
00:01:24,000 --> 00:01:26,000
already contains the data,

30
00:01:26,000 --> 00:01:30,000
we need to fine tune this built-it pre-rendering process

31
00:01:30,000 --> 00:01:32,000
and we need to configure it.

32
00:01:32,000 --> 00:01:37,000
And for this, NextJS gives us two forms of pre-rendering,

33
00:01:37,000 --> 00:01:40,000
which we can use for controlling

34
00:01:40,000 --> 00:01:43,000
how the pages should be rendered.

35
00:01:43,000 --> 00:01:46,000
It has something which is called Static Generation

36
00:01:46,000 --> 00:01:48,000
and it has an alternative,

37
00:01:48,000 --> 00:01:51,000
which is called Server-side Rendering.

38
00:01:51,000 --> 00:01:53,000
And the two might sound similar

39
00:01:53,000 --> 00:01:58,000
but they run or the code runs at different points of time

40
00:01:58,000 --> 00:02:00,000
as you will learn over the next minutes.

41
00:02:00,000 --> 00:02:03,000
Now, we're going to start with Static Generation

42
00:02:03,000 --> 00:02:07,000
because that is the approach which you typically should use

43
00:02:07,000 --> 00:02:08,000
but how does it work?

44
00:02:09,000 --> 00:02:11,000
When using Static Generation,

45
00:02:11,000 --> 00:02:14,000
a page component is pre-rendered

46
00:02:14,000 --> 00:02:16,000
when you build your application,

47
00:02:16,000 --> 00:02:19,000
when you build the next project.

48
00:02:19,000 --> 00:02:21,000
So when you build it for production.

49
00:02:21,000 --> 00:02:23,000
And that's important.

50
00:02:23,000 --> 00:02:25,000
With Static Generation,

51
00:02:25,000 --> 00:02:28,000
by default, your page is not pre-rendered

52
00:02:28,000 --> 00:02:31,000
on the fly on the server

53
00:02:31,000 --> 00:02:33,000
when a request reaches the server

54
00:02:33,000 --> 00:02:35,000
but instead, it is pre-rendered

55
00:02:35,000 --> 00:02:40,000
when you as a developer build your site for production.

56
00:02:40,000 --> 00:02:43,000
And that means that after it was deployed,

57
00:02:43,000 --> 00:02:46,000
that pre-rendered page does not change.

58
00:02:46,000 --> 00:02:49,000
At least not by default.

59
00:02:49,000 --> 00:02:51,000
If you then updated the data

60
00:02:51,000 --> 00:02:54,000
and you know that the pre-rendered page needs to change,

61
00:02:54,000 --> 00:02:57,000
you need to start that build process again

62
00:02:57,000 --> 00:02:59,000
and redeploy again.

63
00:02:59,000 --> 00:03:02,000
But that might sound worse than it actually is

64
00:03:02,000 --> 00:03:04,000
because for a lot of applications,

65
00:03:04,000 --> 00:03:06,000
pages don't change all the time.

66
00:03:06,000 --> 00:03:08,000
Page content doesn't change all the time

67
00:03:08,000 --> 00:03:11,000
and if it should change frequently,

68
00:03:11,000 --> 00:03:14,000
there are alternatives, which I will also show you

69
00:03:14,000 --> 00:03:15,000
in a couple of minutes.

70
00:03:15,000 --> 00:03:19,000
But for the moment, let's start with this Static Generation.

71
00:03:19,000 --> 00:03:21,000
Now, as I mentioned, by default,

72
00:03:21,000 --> 00:03:23,000
NextJS prepares your pages.

73
00:03:23,000 --> 00:03:27,000
It by default generates your pages already statically

74
00:03:27,000 --> 00:03:30,000
and it by default does that during the build process

75
00:03:30,000 --> 00:03:33,000
but if you need to wait for data,

76
00:03:33,000 --> 00:03:36,000
if you need to add data fetching to a page component,

77
00:03:36,000 --> 00:03:41,000
you can do so by exporting a special function

78
00:03:41,000 --> 00:03:43,000
from inside your page component file.

79
00:03:43,000 --> 00:03:45,000
And that's important.

80
00:03:45,000 --> 00:03:49,000
This now only works in your page component files,

81
00:03:49,000 --> 00:03:51,000
not in other component files.

82
00:03:51,000 --> 00:03:55,000
Only in component files inside of the pages folder.

83
00:03:55,000 --> 00:03:58,000
In there, you can export a function,

84
00:03:58,000 --> 00:04:00,000
a function called getStaticProps

85
00:04:02,000 --> 00:04:05,000
and it has to be called getStaticProps.

86
00:04:06,000 --> 00:04:09,000
This is a reserved name so to say.

87
00:04:09,000 --> 00:04:12,000
NextJS will look for a function with that name

88
00:04:12,000 --> 00:04:16,000
and if it finds it, it executes this function

89
00:04:16,000 --> 00:04:19,000
during this pre-rendering process.

90
00:04:20,000 --> 00:04:24,000
So it will then not directly call your component function

91
00:04:24,000 --> 00:04:28,000
and use the returned JSX snapshot as HTML content

92
00:04:28,000 --> 00:04:31,000
but it will, first of all, call getStaticProps

93
00:04:31,000 --> 00:04:34,000
before it calls the component function.

94
00:04:34,000 --> 00:04:37,000
And getStaticProps has this name

95
00:04:37,000 --> 00:04:42,000
because indeed, its job is to prepare props for this page.

96
00:04:44,000 --> 00:04:48,000
And these props could then contain the data this page needs.

97
00:04:48,000 --> 00:04:51,000
And that's useful because getStaticProps

98
00:04:51,000 --> 00:04:54,000
is allowed to be asynchronous.

99
00:04:54,000 --> 00:04:56,000
You can return a promise there

100
00:04:56,000 --> 00:04:58,000
and then, and that's the key thing,

101
00:04:58,000 --> 00:05:02,000
NextJS will wait for this promise to resolve,

102
00:05:02,000 --> 00:05:05,000
which means it waits until your data is loaded

103
00:05:05,000 --> 00:05:09,000
and then you return the props for this component function.

104
00:05:09,000 --> 00:05:12,000
And with that, you're able to load data

105
00:05:12,000 --> 00:05:14,000
before this component function is executed

106
00:05:14,000 --> 00:05:17,000
so that this component can be rendered

107
00:05:17,000 --> 00:05:18,000
with the required data.

108
00:05:20,000 --> 00:05:22,000
Now, here in getStaticProps,

109
00:05:22,000 --> 00:05:24,000
you can also execute any code

110
00:05:24,000 --> 00:05:27,000
that would normally only run on a server.

111
00:05:27,000 --> 00:05:29,000
You could access a file system here

112
00:05:29,000 --> 00:05:32,000
or securely connect to a database

113
00:05:32,000 --> 00:05:35,000
because any code you write in here

114
00:05:35,000 --> 00:05:37,000
will never end up on the client side

115
00:05:37,000 --> 00:05:41,000
and it will never execute on the client side

116
00:05:41,000 --> 00:05:44,000
simply because this code is executed

117
00:05:44,000 --> 00:05:45,000
during the build process,

118
00:05:45,000 --> 00:05:50,000
not on the server and especially not on the clients

119
00:05:50,000 --> 00:05:51,000
of your visitors.

120
00:05:51,000 --> 00:05:55,000
So the code in here will never reach the machines

121
00:05:55,000 --> 00:05:56,000
of your visitors.

122
00:05:56,000 --> 00:05:59,000
It will never execute on their machines.

123
00:05:59,000 --> 00:06:01,000
Now, here in getStaticProps,

124
00:06:01,000 --> 00:06:02,000
you can do whatever you want,

125
00:06:02,000 --> 00:06:06,000
for example, fetch data from an API

126
00:06:06,000 --> 00:06:09,000
or from a database or read data from some files

127
00:06:09,000 --> 00:06:11,000
in the file system, like we do it

128
00:06:11,000 --> 00:06:15,000
in my full NextJS course, for example.

129
00:06:15,000 --> 00:06:18,000
But then once you're done with whatever you did

130
00:06:18,000 --> 00:06:19,000
to get the data you need,

131
00:06:19,000 --> 00:06:23,000
you need to return an object here in getStaticProps.

132
00:06:24,000 --> 00:06:27,000
You always need to return an object here.

133
00:06:27,000 --> 00:06:28,000
Now, in this object,

134
00:06:28,000 --> 00:06:30,000
you can configure various things

135
00:06:30,000 --> 00:06:32,000
but most importantly,

136
00:06:32,000 --> 00:06:36,000
you typically set a props property here

137
00:06:36,000 --> 00:06:38,000
and it has to be named props.

138
00:06:38,000 --> 00:06:41,000
And that then holds another object,

139
00:06:41,000 --> 00:06:45,000
which will be the props object you receive

140
00:06:45,000 --> 00:06:47,000
in your component function here

141
00:06:47,000 --> 00:06:50,000
in this page component function.

142
00:06:50,000 --> 00:06:52,000
This now receives a props object

143
00:06:52,000 --> 00:06:56,000
and the object will be the object you set as props here

144
00:06:56,000 --> 00:06:57,000
in getStaticProps.

145
00:06:58,000 --> 00:07:03,000
And there we could have our meetups key in there.

146
00:07:03,000 --> 00:07:06,000
The structure of this props object is totally up to you,

147
00:07:06,000 --> 00:07:08,000
which holds our DUMMY_MEETUPS.

148
00:07:09,000 --> 00:07:12,000
With that, those DUMMY_MEETUPS would be loaded

149
00:07:12,000 --> 00:07:13,000
and prepared in getStaticProps

150
00:07:14,000 --> 00:07:17,000
and then they would be set as props

151
00:07:17,000 --> 00:07:20,000
for this page component.

152
00:07:20,000 --> 00:07:23,000
Therefore, in this page component,

153
00:07:23,000 --> 00:07:25,000
we no longer need to manage state,

154
00:07:25,000 --> 00:07:28,000
we no longer need useEffect

155
00:07:28,000 --> 00:07:31,000
and we can therefore get rid of those imports here

156
00:07:31,000 --> 00:07:34,000
because now we get the data through props.

157
00:07:34,000 --> 00:07:37,000
And our meetups for the MeetupList component

158
00:07:37,000 --> 00:07:40,000
are props.meetsups.

159
00:07:40,000 --> 00:07:44,000
.meetups because I'm adding a meetups prop down there.

160
00:07:45,000 --> 00:07:47,000
And that's how we can move the data fetching away

161
00:07:47,000 --> 00:07:51,000
from the client to the server-side

162
00:07:51,000 --> 00:07:56,000
or to be precise to the during the build process side.

163
00:07:56,000 --> 00:07:57,000
If I now save everything,

164
00:07:58,000 --> 00:08:02,000
if we reload our page, we still see our meetups here

165
00:08:02,000 --> 00:08:05,000
but if I now view the page source,

166
00:08:05,000 --> 00:08:09,000
we see that we no longer have an empty unordered list,

167
00:08:09,000 --> 00:08:10,000
instead we have an unordered list,

168
00:08:10,000 --> 00:08:12,000
which has list items

169
00:08:12,000 --> 00:08:17,000
with the images and the title and so on.

170
00:08:18,000 --> 00:08:20,000
So now this is pre-rendered

171
00:08:20,000 --> 00:08:23,000
and it now contains the full HTML code

172
00:08:23,000 --> 00:08:27,000
and that's, of course, also great for search engines then

173
00:08:27,000 --> 00:08:29,000
because now, data is not fetched

174
00:08:29,000 --> 00:08:32,000
in a second component render cycle on the client

175
00:08:32,000 --> 00:08:35,000
but initially, before this page is pre-rendered,

176
00:08:35,000 --> 00:08:38,000
during the build process.

177
00:08:38,000 --> 00:08:41,000
And that's a great plus and one of the main features

178
00:08:41,000 --> 00:08:45,000
of NextJS, this data fetching for pre-rendering.

179
00:08:45,000 --> 00:08:49,000
And getStaticProps will be a function you use a lot

180
00:08:49,000 --> 00:08:54,000
when working with NextJS as you also see in my full course.