1
00:00:03,000 --> 00:00:06,139
We wrote our first "getStaticProps" function

2
00:00:06,139 --> 00:00:08,851
to pass "props" to our page component.

3
00:00:08,851 --> 00:00:10,421
Now let's make sure we

4
00:00:10,421 --> 00:00:12,561
fully understand how it works.

5
00:00:13,275 --> 00:00:14,698
Let's start by checking

6
00:00:14,698 --> 00:00:16,493
when this function is called,

7
00:00:16,493 --> 00:00:18,349
by adding a logging statement.

8
00:00:20,275 --> 00:00:21,724
And I'll print the page name

9
00:00:21,724 --> 00:00:22,965
as well as the function.

10
00:00:23,876 --> 00:00:25,302
Now, let's open the terminal

11
00:00:25,302 --> 00:00:27,034
so we can look at the server logs.

12
00:00:27,585 --> 00:00:28,649
I'll clear everything

13
00:00:28,649 --> 00:00:30,627
so it's easier to see the new messages.

14
00:00:31,178 --> 00:00:32,383
When we load the page

15
00:00:32,883 --> 00:00:33,892
You can see that

16
00:00:33,892 --> 00:00:35,722
the "getStaticProps" function

17
00:00:35,722 --> 00:00:37,552
is called on the server side,

18
00:00:38,179 --> 00:00:39,500
but not in the browser.

19
00:00:40,000 --> 00:00:42,581
While our component render function,

20
00:00:42,581 --> 00:00:44,087
as we know, is called

21
00:00:44,087 --> 00:00:46,740
both by the server and in the client.

22
00:00:47,384 --> 00:00:50,200
So that's the first interesting thing:

23
00:00:50,200 --> 00:00:53,758
"getStaticProps" is only executed on the server,

24
00:00:53,758 --> 00:00:57,094
to generate the HTML returned to the browser.

25
00:00:57,743 --> 00:00:59,124
If we reload the page

26
00:00:59,124 --> 00:01:01,492
then getStaticProps is called again,

27
00:01:01,492 --> 00:01:03,794
so it's called before every render.

28
00:01:03,794 --> 00:01:06,622
And this is because we're currently running

29
00:01:06,622 --> 00:01:08,333
the app in the dev server.

30
00:01:08,333 --> 00:01:10,569
We'll see in a minute what happens

31
00:01:10,569 --> 00:01:11,819
in production mode.

32
00:01:12,713 --> 00:01:15,354
But first I want to point out this

33
00:01:15,354 --> 00:01:18,151
peculiarity of writing Next.js apps.

34
00:01:18,728 --> 00:01:20,469
In this same file we have

35
00:01:20,469 --> 00:01:22,000
our component function

36
00:01:22,000 --> 00:01:24,367
that's executed both by the server

37
00:01:24,367 --> 00:01:25,690
and in the browser.

38
00:01:26,399 --> 00:01:28,113
And this is already different

39
00:01:28,113 --> 00:01:29,473
from a normal React app

40
00:01:29,473 --> 00:01:31,661
where everything runs in the browser.

41
00:01:32,280 --> 00:01:35,690
But now we also have this getStaticProps function

42
00:01:35,690 --> 00:01:37,708
that only runs in the server.

43
00:01:38,278 --> 00:01:40,973
So in the same file we have a mix of

44
00:01:40,973 --> 00:01:43,445
server-side and client-side code.

45
00:01:43,445 --> 00:01:46,814
This is different from most other frameworks,

46
00:01:46,814 --> 00:01:49,810
where you either write server-side code,

47
00:01:49,810 --> 00:01:52,056
or you write client-side code.

48
00:01:52,056 --> 00:01:54,827
This can be a bit confusing at first,

49
00:01:54,827 --> 00:01:57,822
but it is actually one of the advantages

50
00:01:57,822 --> 00:01:59,095
of using Next.js.

51
00:01:59,095 --> 00:02:00,518
This component page

52
00:02:00,518 --> 00:02:03,514
and the function that populate its props

53
00:02:03,514 --> 00:02:05,086
are strictly related,

54
00:02:05,086 --> 00:02:08,681
so it makes sense to keep them in the same file.

55
00:02:08,681 --> 00:02:11,601
The fact that they can then be executed

56
00:02:11,601 --> 00:02:13,773
in two different environments

57
00:02:13,773 --> 00:02:16,169
is more of a deployment concern.

58
00:02:16,169 --> 00:02:19,015
And Next.js takes care of that for us,

59
00:02:19,015 --> 00:02:20,887
by intelligently deciding

60
00:02:20,887 --> 00:02:23,133
which code needs to run where.

61
00:02:23,133 --> 00:02:26,204
It's pretty clever if you think about it.

62
00:02:28,052 --> 00:02:29,718
Now, let's see what happens

63
00:02:29,718 --> 00:02:32,001
when we build our app for production.

64
00:02:32,563 --> 00:02:34,569
Let's run "npm run build",

65
00:02:37,763 --> 00:02:39,033
and look at the output.

66
00:02:41,063 --> 00:02:43,905
The "getStaticProps" function is called

67
00:02:43,905 --> 00:02:46,238
while "Generating static pages".

68
00:02:46,811 --> 00:02:49,008
And in fact it's logged just before

69
00:02:49,008 --> 00:02:51,395
rendering our FirstPostPage component,

70
00:02:51,957 --> 00:02:53,544
which makes sense because

71
00:02:53,544 --> 00:02:56,273
you need the props to render the component.

72
00:02:56,836 --> 00:02:58,643
Now, if we look at the build summary

73
00:02:59,143 --> 00:03:01,059
remember how our other pages,

74
00:03:01,059 --> 00:03:02,578
that is Home and About,

75
00:03:02,578 --> 00:03:04,692
are marked with an empty circle,

76
00:03:05,324 --> 00:03:08,150
which means they are "Static", as in

77
00:03:08,150 --> 00:03:11,212
"automatically rendered as static HTML"

78
00:03:11,212 --> 00:03:13,724
and they use "no initial props".

79
00:03:14,381 --> 00:03:17,226
If we look at our new "first-post" page,

80
00:03:17,226 --> 00:03:19,858
this one has a filled circle instead.

81
00:03:20,430 --> 00:03:23,649
And a filled circle means it's "SSG",

82
00:03:23,649 --> 00:03:25,912
or Static Site Generation,

83
00:03:25,912 --> 00:03:27,739
which is explained as

84
00:03:27,739 --> 00:03:29,914
"automatically generated"

85
00:03:29,914 --> 00:03:32,003
"as static HTML + JSON",

86
00:03:32,003 --> 00:03:34,265
and uses "getStaticProps".

87
00:03:35,201 --> 00:03:37,151
So Next.js treats pages

88
00:03:37,151 --> 00:03:39,864
with a "getStaticProps" function

89
00:03:39,864 --> 00:03:43,680
slightly differently from fully static pages.

90
00:03:43,680 --> 00:03:45,969
For most practical purposes

91
00:03:45,969 --> 00:03:49,615
"Static" or "SSG" are pretty much the same,

92
00:03:49,615 --> 00:03:52,329
we can deploy both type of pages

93
00:03:52,329 --> 00:03:55,212
to any web server as static files.

94
00:03:56,221 --> 00:03:58,783
But let's see why it says that

95
00:03:58,783 --> 00:04:01,089
it generates "HTML + JSON",

96
00:04:01,089 --> 00:04:02,968
rather than just HTML.

97
00:04:03,921 --> 00:04:06,415
Here's the "first-post.html" file

98
00:04:06,415 --> 00:04:08,759
generated by the build process.

99
00:04:09,335 --> 00:04:10,205
And if we look inside it,

100
00:04:11,001 --> 00:04:13,080
we can see our React component

101
00:04:13,080 --> 00:04:15,160
pre-rendered to HTML as usual,

102
00:04:15,730 --> 00:04:18,505
and it used the prop values we returned

103
00:04:18,505 --> 00:04:20,853
in our "getStaticProps" function,

104
00:04:20,853 --> 00:04:23,274
which are the post title and body.

105
00:04:23,917 --> 00:04:25,438
So far nothing strange.

106
00:04:25,938 --> 00:04:28,282
But in addition to the HTML file

107
00:04:28,282 --> 00:04:31,212
the build also generated this JSON file.

108
00:04:31,786 --> 00:04:33,457
As you can see this file

109
00:04:33,457 --> 00:04:35,615
simply contains our "pageProps"

110
00:04:35,615 --> 00:04:36,659
in JSON format.

111
00:04:37,299 --> 00:04:40,433
So, again, why does Next.js generate

112
00:04:40,433 --> 00:04:43,828
that separate JSON file with our props?

113
00:04:44,416 --> 00:04:46,093
To explain that let's run

114
00:04:46,093 --> 00:04:47,837
the app in production mode

115
00:04:47,837 --> 00:04:48,977
with "npm start".

116
00:04:52,249 --> 00:04:53,919
Now, if we reload the page

117
00:04:53,919 --> 00:04:54,882
you'll see that

118
00:04:54,882 --> 00:04:57,066
nothing gets logged in the server.

119
00:04:57,695 --> 00:04:58,657
Let me clear the logs

120
00:04:58,657 --> 00:04:59,758
to make it more obvious.

121
00:05:00,961 --> 00:05:02,342
Nothing gets logged,

122
00:05:02,342 --> 00:05:04,552
so our "getStaticProps" function

123
00:05:04,552 --> 00:05:05,519
is not called,

124
00:05:06,158 --> 00:05:08,830
because the page is already available

125
00:05:08,830 --> 00:05:10,348
as a static HTML file

126
00:05:10,348 --> 00:05:12,298
generated during the build.

127
00:05:12,943 --> 00:05:14,902
We can check that by looking

128
00:05:14,902 --> 00:05:16,581
at the Network requests,

129
00:05:16,581 --> 00:05:18,750
and the server response will be

130
00:05:18,750 --> 00:05:20,919
the same "first-post.html" file

131
00:05:20,919 --> 00:05:23,508
we opened in the editor a minute ago.

132
00:05:24,288 --> 00:05:26,565
This is what happens when we load

133
00:05:26,565 --> 00:05:28,566
the First Post page directly.

134
00:05:29,136 --> 00:05:30,445
But what if we start

135
00:05:30,445 --> 00:05:32,213
from the Home page instead?

136
00:05:32,779 --> 00:05:34,373
We know that in this case

137
00:05:34,373 --> 00:05:36,350
the browser loads the HTML file

138
00:05:36,350 --> 00:05:37,498
for the Home page.

139
00:05:38,126 --> 00:05:40,964
But when we click the First Post link,

140
00:05:40,964 --> 00:05:43,578
Next.js uses client-side navigation

141
00:05:43,578 --> 00:05:45,146
to open the new page,

142
00:05:45,796 --> 00:05:47,984
so in this case the browser

143
00:05:47,984 --> 00:05:50,577
does not load the full HTML page

144
00:05:50,577 --> 00:05:52,116
for the First Post.

145
00:05:52,779 --> 00:05:55,664
Instead, if we look at "All" the requests

146
00:05:55,664 --> 00:05:56,719
(not just HTML)

147
00:05:57,290 --> 00:05:58,984
the browser loaded that

148
00:05:58,984 --> 00:06:00,678
"first-post.json" file,

149
00:06:00,678 --> 00:06:03,329
that we've seen in the build folder.

150
00:06:03,977 --> 00:06:05,794
So the browser will render

151
00:06:05,794 --> 00:06:07,821
the First Post page component

152
00:06:07,821 --> 00:06:10,688
by loading the props from this JSON file.

153
00:06:11,328 --> 00:06:14,187
And this solves that small mystery

154
00:06:14,187 --> 00:06:17,214
of why Next.js generates a JSON file

155
00:06:17,214 --> 00:06:20,241
along with the HTML for an SSG page:

156
00:06:20,241 --> 00:06:23,941
it's used to support client-side navigation.

157
00:06:24,694 --> 00:06:26,755
Now, let's re-start our dev server

158
00:06:26,755 --> 00:06:28,878
so we can continue our development.

159
00:06:31,427 --> 00:06:33,053
But hopefully this video

160
00:06:33,053 --> 00:06:35,492
has given you a better understanding

161
00:06:35,492 --> 00:06:37,524
of how "getStaticProps" works.

162
00:06:38,160 --> 00:06:40,462
And you can probably see why

163
00:06:40,462 --> 00:06:43,916
the function is called get "static" props:

164
00:06:43,916 --> 00:06:47,369
because those props are set at build time,

165
00:06:47,369 --> 00:06:50,412
and used to render static HTML pages.