1
00:00:03,000 --> 00:00:04,707
We've seen how Next.js

2
00:00:04,707 --> 00:00:07,269
pre-renders our React components,

3
00:00:07,846 --> 00:00:09,449
so that the HTML page

4
00:00:09,449 --> 00:00:11,128
returned by the server

5
00:00:11,128 --> 00:00:13,341
already includes the elements

6
00:00:13,341 --> 00:00:15,936
defined in our HomePage component.

7
00:00:15,936 --> 00:00:18,302
But how does this work exactly?

8
00:00:19,108 --> 00:00:21,181
Let me close this HTML file now,

9
00:00:21,181 --> 00:00:23,839
so we can go back to our JavaScript code.

10
00:00:24,403 --> 00:00:26,344
How does Next.js render

11
00:00:26,344 --> 00:00:29,466
this component to HTML on the server?

12
00:00:30,051 --> 00:00:31,714
Well, let's show our terminal

13
00:00:31,714 --> 00:00:33,262
where the server is running

14
00:00:33,262 --> 00:00:34,983
and see what's going on there.

15
00:00:35,597 --> 00:00:37,019
Let's add a log statement

16
00:00:37,019 --> 00:00:38,668
inside our component function

17
00:00:39,330 --> 00:00:40,162
so we can see

18
00:00:40,162 --> 00:00:42,209
when this component is rendered.

19
00:00:43,263 --> 00:00:44,535
Now, if I save this file

20
00:00:45,035 --> 00:00:46,803
you can see the "render" message

21
00:00:46,803 --> 00:00:48,791
being logged in the browser console.

22
00:00:49,346 --> 00:00:51,089
That's because the component

23
00:00:51,089 --> 00:00:53,142
was updated using "fast refresh",

24
00:00:53,142 --> 00:00:55,008
which is a bit special in that

25
00:00:55,008 --> 00:00:57,248
it only happens in development mode.

26
00:00:57,934 --> 00:00:59,495
But let's see what happens

27
00:00:59,495 --> 00:01:01,237
if we go and reload the page,

28
00:01:01,237 --> 00:01:02,737
when the browser requests

29
00:01:02,737 --> 00:01:04,238
the page from the server.

30
00:01:04,918 --> 00:01:07,167
You can see that the "render" message

31
00:01:07,167 --> 00:01:08,869
shows up in the server logs.

32
00:01:09,429 --> 00:01:11,514
This means that our component

33
00:01:11,514 --> 00:01:13,382
is rendered on the server.

34
00:01:13,382 --> 00:01:15,970
The server takes our JavaScript code

35
00:01:15,970 --> 00:01:17,910
and generates the HTML page

36
00:01:17,910 --> 00:01:19,635
returned to the browser.

37
00:01:20,422 --> 00:01:22,656
Interestingly, the same message

38
00:01:22,656 --> 00:01:23,881
is also displayed

39
00:01:23,881 --> 00:01:25,538
in the browser console.

40
00:01:25,538 --> 00:01:28,493
So our React component is rendered twice,

41
00:01:28,493 --> 00:01:29,862
once by the server,

42
00:01:29,862 --> 00:01:31,591
and once in the browser.

43
00:01:32,451 --> 00:01:35,139
Now, you may wondering why it needs to be

44
00:01:35,139 --> 00:01:37,105
rendered again in the browser,

45
00:01:37,105 --> 00:01:39,792
if it was already rendered by the server.

46
00:01:39,792 --> 00:01:41,758
And we'll talk more about this

47
00:01:41,758 --> 00:01:43,069
later in the course,

48
00:01:43,069 --> 00:01:44,773
but for now let's say it's

49
00:01:44,773 --> 00:01:47,526
in case we need client-side functionality,

50
00:01:47,526 --> 00:01:50,541
like responding to the user clicking a button.

51
00:01:51,499 --> 00:01:53,821
Anyway, if you pay close attention

52
00:01:53,821 --> 00:01:56,757
you'll notice that the render on the server

53
00:01:56,757 --> 00:01:59,284
happens before the one on the client.

54
00:01:59,920 --> 00:02:01,884
Let me reload the page again

55
00:02:01,884 --> 00:02:03,847
so you can hopefully see it.

56
00:02:03,847 --> 00:02:05,250
What happens is that

57
00:02:05,250 --> 00:02:07,844
when we load the page in the browser,

58
00:02:07,844 --> 00:02:10,999
the browser requests the page from the server

59
00:02:10,999 --> 00:02:12,752
so that's when the server

60
00:02:12,752 --> 00:02:14,786
renders our component to HTML

61
00:02:14,786 --> 00:02:17,521
to return the HTML page to the browser.

62
00:02:17,521 --> 00:02:20,466
After that, the browser displays the page,

63
00:02:20,466 --> 00:02:23,130
but it also loads the JavaScript files

64
00:02:23,130 --> 00:02:24,533
included by the HTML

65
00:02:24,533 --> 00:02:26,847
and at that point it will execute

66
00:02:26,847 --> 00:02:28,179
the JavaScript code

67
00:02:28,179 --> 00:02:31,124
that renders the component in the browser.

68
00:02:32,536 --> 00:02:34,742
The other thing to notice is that

69
00:02:34,742 --> 00:02:36,681
every time we reload the page

70
00:02:37,247 --> 00:02:39,939
the component is re-rendered by the server.

71
00:02:40,439 --> 00:02:41,939
This happens because

72
00:02:41,939 --> 00:02:43,663
we're currently running

73
00:02:43,663 --> 00:02:45,912
the Next.js server in dev mode

74
00:02:45,912 --> 00:02:48,610
so it re-renders our page every time

75
00:02:48,610 --> 00:02:50,409
to make sure it reflects

76
00:02:50,409 --> 00:02:53,333
the latest changes we made to the code.

77
00:02:54,207 --> 00:02:56,682
But this is not actually what happens

78
00:02:56,682 --> 00:02:59,022
when we run our Next.js application

79
00:02:59,022 --> 00:02:59,959
in production.

80
00:03:00,592 --> 00:03:02,300
Let me stop the dev server,

81
00:03:02,300 --> 00:03:04,261
so I can show you how to run it

82
00:03:04,261 --> 00:03:05,463
in production mode.

83
00:03:06,089 --> 00:03:07,474
As we've seen before,

84
00:03:07,474 --> 00:03:09,056
the "next" tool supports

85
00:03:09,056 --> 00:03:10,704
a few different commands.

86
00:03:11,335 --> 00:03:13,742
So far we always ran "next dev",

87
00:03:14,242 --> 00:03:16,030
but there are other options,

88
00:03:16,030 --> 00:03:17,690
like "build", and "start".

89
00:03:18,253 --> 00:03:20,448
In fact, "build" and then "start"

90
00:03:20,448 --> 00:03:22,377
is exactly what we need to do

91
00:03:22,377 --> 00:03:24,638
to run the app in production mode.

92
00:03:25,271 --> 00:03:26,457
Let's try this out.

93
00:03:26,457 --> 00:03:27,892
We can add some scripts

94
00:03:27,892 --> 00:03:29,577
to our "package.json" file.

95
00:03:30,201 --> 00:03:31,883
So in addition to "dev"

96
00:03:31,883 --> 00:03:33,565
we want a "build" task,

97
00:03:33,565 --> 00:03:35,539
that executes "next build".

98
00:03:36,186 --> 00:03:38,221
And then a "start" command,

99
00:03:38,221 --> 00:03:39,954
that runs "next start".

100
00:03:41,352 --> 00:03:42,927
Once we have these scripts,

101
00:03:42,927 --> 00:03:44,502
we can run them with "npm".

102
00:03:45,061 --> 00:03:47,212
Let's do an "npm run build",

103
00:03:47,212 --> 00:03:50,133
which will generate a production build

104
00:03:50,133 --> 00:03:51,593
of our Next.js app.

105
00:03:52,247 --> 00:03:54,140
Now, let me show the full output.

106
00:03:54,140 --> 00:03:56,434
There are a few interesting things here.

107
00:03:56,992 --> 00:03:58,980
First of all, notice that,

108
00:03:58,980 --> 00:04:00,585
as part of the build,

109
00:04:00,585 --> 00:04:02,956
Next.js generates static pages.

110
00:04:03,609 --> 00:04:06,304
It doesn't just compile and bundle

111
00:04:06,304 --> 00:04:07,889
our JavaScript code,

112
00:04:07,889 --> 00:04:10,109
like a normal React project.

113
00:04:10,109 --> 00:04:12,963
It also generates static HTML pages.

114
00:04:13,701 --> 00:04:15,448
And it's during that step

115
00:04:15,448 --> 00:04:18,244
that it rendered our HomePage component,

116
00:04:18,814 --> 00:04:20,250
as we can tell because

117
00:04:20,250 --> 00:04:22,341
it printed our log message here.

118
00:04:22,907 --> 00:04:25,135
The other interesting thing is that

119
00:04:25,135 --> 00:04:26,982
at the end it shows a summary

120
00:04:26,982 --> 00:04:29,147
of all the files it has generated,

121
00:04:29,775 --> 00:04:31,608
including JavaScript files,

122
00:04:31,608 --> 00:04:33,102
their size, and so on.

123
00:04:33,670 --> 00:04:36,177
But for now let's focus on the pages.

124
00:04:36,677 --> 00:04:39,812
It has generated a page for the root path,

125
00:04:39,812 --> 00:04:42,797
which corresponds to our "index.js" file

126
00:04:42,797 --> 00:04:45,334
containing our HomePage component.

127
00:04:45,334 --> 00:04:48,841
And it also generated a 404 page automatically,

128
00:04:48,841 --> 00:04:52,050
which is always needed if somebody requests

129
00:04:52,050 --> 00:04:53,990
a page that doesn't exist.

130
00:04:53,990 --> 00:04:56,378
Now, notice how before each page

131
00:04:56,378 --> 00:04:57,647
there's a symbol,

132
00:04:57,647 --> 00:05:01,080
and for both these pages it's an empty circle.

133
00:05:02,177 --> 00:05:04,905
It explains what that means at the bottom.

134
00:05:04,905 --> 00:05:07,828
An empty circle means that's a "Static" page,

135
00:05:08,393 --> 00:05:10,342
which means a page that's

136
00:05:10,342 --> 00:05:13,462
"automatically rendered as static HTML".

137
00:05:14,040 --> 00:05:18,201
There are other possible types of pages: "Server",

138
00:05:18,201 --> 00:05:22,112
"SSG" that stands for "Static Site Generation",

139
00:05:22,696 --> 00:05:24,398
or "ISR" which means

140
00:05:24,398 --> 00:05:27,292
"Incremental Static Regeneration".

141
00:05:27,878 --> 00:05:30,291
We'll cover these other page types

142
00:05:30,291 --> 00:05:32,137
in the following sections,

143
00:05:32,137 --> 00:05:34,551
but for now it's good to know that

144
00:05:34,551 --> 00:05:37,391
our index page is a fully "Static" page.

145
00:05:38,104 --> 00:05:39,558
Now, let's see what happens

146
00:05:39,558 --> 00:05:41,660
when we run the app in production mode.

147
00:05:42,570 --> 00:05:44,914
We can do that by typing simply

148
00:05:44,914 --> 00:05:45,821
"npm start".

149
00:05:46,397 --> 00:05:48,158
And this starts the server

150
00:05:48,158 --> 00:05:50,530
on the same port as the dev server,

151
00:05:50,530 --> 00:05:51,749
that is port 3000,

152
00:05:51,749 --> 00:05:53,714
but in this case it's running

153
00:05:53,714 --> 00:05:55,001
in production mode.

154
00:05:55,773 --> 00:05:57,235
If we load the home page,

155
00:05:57,235 --> 00:05:59,458
it looks the same as before obviously,

156
00:06:00,017 --> 00:06:02,340
and it logged our "render" message

157
00:06:02,340 --> 00:06:03,911
in the browser console,

158
00:06:03,911 --> 00:06:06,576
which happens after the HTML is loaded,

159
00:06:06,576 --> 00:06:09,104
when the JavaScript code is executed.

160
00:06:09,809 --> 00:06:13,008
But if you notice there is no "render" message

161
00:06:13,008 --> 00:06:14,886
printed in the server logs.

162
00:06:15,456 --> 00:06:17,146
Remember how in dev mode

163
00:06:17,146 --> 00:06:19,681
the server re-rendered our component

164
00:06:20,252 --> 00:06:22,694
every time we reloaded the page.

165
00:06:22,694 --> 00:06:24,755
But not in production mode.

166
00:06:25,331 --> 00:06:27,282
That's because in this case

167
00:06:27,282 --> 00:06:30,172
the HTML page has already been generated

168
00:06:30,172 --> 00:06:31,906
during the "build" step,

169
00:06:32,550 --> 00:06:35,091
so all the server needs to do

170
00:06:35,091 --> 00:06:37,894
is return that static HTML file.

171
00:06:38,481 --> 00:06:39,755
We can see that file

172
00:06:39,755 --> 00:06:42,112
if we look inside the ".next" folder,

173
00:06:42,675 --> 00:06:43,411
under "server",

174
00:06:43,911 --> 00:06:44,831
and then "pages".

175
00:06:45,444 --> 00:06:47,580
Here's the "index.html" file

176
00:06:47,580 --> 00:06:50,782
that was generated by the "build" command.

177
00:06:51,358 --> 00:06:52,880
If I format this document,

178
00:06:52,880 --> 00:06:54,577
so it's a bit easier to read,

179
00:06:56,024 --> 00:06:57,684
here inside the "body"

180
00:06:57,684 --> 00:07:00,247
you can see our HomePage component

181
00:07:00,247 --> 00:07:01,756
as rendered to HTML.

182
00:07:02,406 --> 00:07:04,067
So the Next.js server

183
00:07:04,067 --> 00:07:06,597
can simply return this HTML file

184
00:07:06,597 --> 00:07:09,918
every time the browser requests that page.

185
00:07:10,576 --> 00:07:11,753
It doesn't need to

186
00:07:11,753 --> 00:07:13,453
regenerated it every time.

187
00:07:16,142 --> 00:07:18,252
Now, let me stop the production server

188
00:07:21,308 --> 00:07:23,237
and restart the "dev" server,

189
00:07:23,237 --> 00:07:24,967
so we can keep developing.

190
00:07:24,967 --> 00:07:26,430
Just keep in mind that

191
00:07:26,430 --> 00:07:28,691
there are some differences between

192
00:07:28,691 --> 00:07:30,952
the "dev" and "production" server.

193
00:07:31,718 --> 00:07:33,742
In "dev" mode as we've seen

194
00:07:33,742 --> 00:07:36,515
the page is re-rendered by the server

195
00:07:36,515 --> 00:07:38,389
every time we request it.

196
00:07:39,038 --> 00:07:41,807
And by the way, we'll also talk more

197
00:07:41,807 --> 00:07:44,269
about how to run our Next.js app

198
00:07:44,269 --> 00:07:46,884
in production later in the course.

199
00:07:46,884 --> 00:07:48,960
The key point of this video

200
00:07:48,960 --> 00:07:51,499
was showing how Next.js generates

201
00:07:51,499 --> 00:07:53,960
static HTML pages at build time.