1
00:00:03,000 --> 00:00:06,320
We have a few different pages in our application,

2
00:00:06,320 --> 00:00:09,005
but we didn't put any links yet, to

3
00:00:09,005 --> 00:00:11,612
navigate from one page to another.

4
00:00:11,689 --> 00:00:15,346
Before we get to that, we need to understand

5
00:00:15,346 --> 00:00:18,919
a bit better how Next.js renders our pages.

6
00:00:19,002 --> 00:00:22,534
So in this video I'll explain "prerendering",

7
00:00:22,534 --> 00:00:24,888
focusing on the HomePage only.

8
00:00:24,966 --> 00:00:27,526
Like all React function components,

9
00:00:27,526 --> 00:00:30,652
this HomePage function will be called every

10
00:00:30,652 --> 00:00:33,632
time the framework renders the component.

11
00:00:33,704 --> 00:00:35,940
Let's add a log statement here,

12
00:00:35,964 --> 00:00:38,126
printing a message to the console

13
00:00:38,126 --> 00:00:40,288
any time this function is called.

14
00:00:40,354 --> 00:00:42,688
In the terminal, we always have

15
00:00:42,688 --> 00:00:44,421
our dev server running,

16
00:00:44,496 --> 00:00:46,961
and it already printed a message there,

17
00:00:46,961 --> 00:00:48,752
but let me clear the logs,

18
00:00:48,752 --> 00:00:50,954
and see what happens when we load

19
00:00:50,954 --> 00:00:52,555
the page in the browser.

20
00:00:52,622 --> 00:00:55,541
You can see that the HomePage component

21
00:00:55,541 --> 00:00:57,488
is rendered on the server.

22
00:00:57,563 --> 00:00:59,231
And only on the server.

23
00:00:59,231 --> 00:01:02,413
There is no message in the browser console.

24
00:01:02,413 --> 00:01:05,108
This is different from a traditional

25
00:01:05,108 --> 00:01:07,356
React Single Page Application,

26
00:01:07,430 --> 00:01:10,783
where components are rendered in the browser.

27
00:01:10,783 --> 00:01:13,611
Now, since we're running in dev mode,

28
00:01:13,611 --> 00:01:16,578
the component will be re-rendered by the

29
00:01:16,578 --> 00:01:19,397
server every time we request the page.

30
00:01:19,471 --> 00:01:21,554
As we'll see later in this section,

31
00:01:21,554 --> 00:01:23,799
it works a bit differently when

32
00:01:23,799 --> 00:01:25,754
running in production mode.

33
00:01:25,826 --> 00:01:29,153
Anyway, let's see in more detail what's going on,

34
00:01:29,153 --> 00:01:31,517
by looking at the network traffic

35
00:01:31,517 --> 00:01:33,666
in the Chrome Developer Tools.

36
00:01:33,738 --> 00:01:36,368
This panel shows all the requests

37
00:01:36,368 --> 00:01:37,963
sent by the browser.

38
00:01:38,043 --> 00:01:39,891
When we load our home page,

39
00:01:39,891 --> 00:01:42,516
the browser sends an HTTP request

40
00:01:42,516 --> 00:01:43,948
to our web server,

41
00:01:44,028 --> 00:01:47,734
that's running on localhost on port 3000.

42
00:01:47,734 --> 00:01:51,669
For the home page, as we know the path is "/".

43
00:01:51,669 --> 00:01:54,183
The server returns a response

44
00:01:54,183 --> 00:01:56,350
that is an HTML document.

45
00:01:56,437 --> 00:01:59,771
And the browser will then display that HTML.

46
00:01:59,771 --> 00:02:01,983
If we look at the Response tab,

47
00:02:01,983 --> 00:02:04,033
here we can see the full data

48
00:02:04,033 --> 00:02:05,659
returned by the server.

49
00:02:05,730 --> 00:02:08,353
It's all in one line, but we can click

50
00:02:08,353 --> 00:02:10,907
this button to format it more nicely.

51
00:02:10,977 --> 00:02:13,821
So this is the HTML returned

52
00:02:13,821 --> 00:02:16,461
by the Next.js dev server,

53
00:02:16,563 --> 00:02:19,029
and you can see that, inside the body,

54
00:02:19,029 --> 00:02:23,069
it contains all the elements defined in our RootLayout,

55
00:02:23,069 --> 00:02:25,053
like "header" and "footer".

56
00:02:25,126 --> 00:02:28,790
And also the elements from our HomePage component,

57
00:02:28,790 --> 00:02:31,266
that are the heading and the paragraph.

58
00:02:31,266 --> 00:02:34,245
So, Next.js rendered all our React

59
00:02:34,245 --> 00:02:36,348
components on the server

60
00:02:36,436 --> 00:02:40,234
and returned the resulting HTML to the browser.

61
00:02:40,234 --> 00:02:42,673
This is called "pre-rendering",

62
00:02:42,673 --> 00:02:45,484
and it is in fact the main feature

63
00:02:45,484 --> 00:02:47,054
provided by Next.js

64
00:02:47,137 --> 00:02:49,472
compared to a traditional React

65
00:02:49,472 --> 00:02:51,280
Single Page Application.

66
00:02:51,356 --> 00:02:53,858
To show you this difference in action,

67
00:02:53,858 --> 00:02:57,604
I have prepared a simple React project here,

68
00:02:57,604 --> 00:02:59,795
with a page that's similar to

69
00:02:59,795 --> 00:03:01,607
our Next.js application.

70
00:03:01,683 --> 00:03:03,855
I set up the React project

71
00:03:03,855 --> 00:03:05,943
using "Create React App",

72
00:03:06,027 --> 00:03:08,941
that for many years was the recommended

73
00:03:08,941 --> 00:03:11,482
way to initialize a React project.

74
00:03:11,556 --> 00:03:13,676
Although that's no longer the case,

75
00:03:13,676 --> 00:03:17,445
because even the official React documentation now

76
00:03:17,445 --> 00:03:20,984
recommends using Next.js or similar framework.

77
00:03:21,061 --> 00:03:24,425
Anyway, a traditional React project

78
00:03:24,425 --> 00:03:26,540
has a single HTML file

79
00:03:26,636 --> 00:03:30,514
that simply contains an empty "div" with an "id",

80
00:03:30,514 --> 00:03:32,672
where React will dynamically

81
00:03:32,672 --> 00:03:34,677
insert all our components.

82
00:03:34,754 --> 00:03:38,137
This is done in the "index.jsx" file.

83
00:03:38,137 --> 00:03:41,192
This code gets the element with that "id",

84
00:03:41,192 --> 00:03:44,635
and then renders the "App" component inside it.

85
00:03:44,635 --> 00:03:48,192
Where the "App" component is defined in this file,

86
00:03:48,192 --> 00:03:51,398
and I made it similar to the RootLayout

87
00:03:51,398 --> 00:03:53,288
in our Next.js project.

88
00:03:53,371 --> 00:03:55,525
It has a "header" and a "footer",

89
00:03:55,525 --> 00:03:58,209
then the HomePage component in the middle,

90
00:03:58,209 --> 00:04:00,424
which is basically the same

91
00:04:00,424 --> 00:04:02,394
as our Next.js HomePage,

92
00:04:02,476 --> 00:04:05,797
except it says "React SPA" in the heading,

93
00:04:05,797 --> 00:04:09,624
where "SPA" is short for Single Page Application.

94
00:04:09,624 --> 00:04:11,911
Note that it also logs a console

95
00:04:11,911 --> 00:04:14,126
message any time it's rendered.

96
00:04:14,198 --> 00:04:16,884
Now, let's go and run this application.

97
00:04:16,884 --> 00:04:20,185
This project uses the "react-scripts" command,

98
00:04:20,185 --> 00:04:23,593
that's the one provided by Create React App.

99
00:04:23,593 --> 00:04:25,656
If we type "npm start" this

100
00:04:25,656 --> 00:04:27,719
will launch the dev server.

101
00:04:27,796 --> 00:04:30,868
We already have the Next.js server

102
00:04:30,868 --> 00:04:32,765
running on port 3000,

103
00:04:32,856 --> 00:04:35,243
so the React server will need to

104
00:04:35,243 --> 00:04:37,331
use a different port number.

105
00:04:37,406 --> 00:04:40,559
It's running on port 3001,

106
00:04:40,559 --> 00:04:43,147
and this is what the page looks like.

107
00:04:43,147 --> 00:04:45,973
Now, let me show the browser console, so

108
00:04:45,973 --> 00:04:48,587
we can see any messages logged there.

109
00:04:48,657 --> 00:04:51,276
And let's repeat the same experiment,

110
00:04:51,276 --> 00:04:53,231
by clearing the server logs,

111
00:04:53,231 --> 00:04:54,837
and reloading the page.

112
00:04:54,907 --> 00:04:57,810
You can see that, in this React application,

113
00:04:57,810 --> 00:05:01,584
our HomePage component is rendered in the browser.

114
00:05:01,584 --> 00:05:04,275
There are no log messages in the server.

115
00:05:04,275 --> 00:05:07,790
Let's go and inspect the network requests as well.

116
00:05:07,790 --> 00:05:09,939
Let me do a "hard reload",

117
00:05:09,939 --> 00:05:13,117
to make sure it's not using the browser cache.

118
00:05:13,117 --> 00:05:17,345
Again, the first request loads the HTML document.

119
00:05:17,345 --> 00:05:19,520
But in this case you can see that

120
00:05:19,520 --> 00:05:22,617
the body only contains an empty "div".

121
00:05:22,617 --> 00:05:24,870
It doesn't have any of the elements

122
00:05:24,870 --> 00:05:26,737
we see displayed on the page.

123
00:05:26,801 --> 00:05:30,853
After loading this initial HTML from the server,

124
00:05:30,853 --> 00:05:34,166
the browser will also load some JavaScript code,

125
00:05:34,166 --> 00:05:37,371
from a script called "bundle.js",

126
00:05:37,371 --> 00:05:39,549
and that code will insert the

127
00:05:39,549 --> 00:05:41,653
elements we see on the page.

128
00:05:41,728 --> 00:05:43,992
Let's do another little experiment.

129
00:05:43,992 --> 00:05:46,274
In the DevTools settings, we

130
00:05:46,274 --> 00:05:48,312
can "Disable JavaScript".

131
00:05:48,393 --> 00:05:51,339
This will prevent the browser from loading

132
00:05:51,339 --> 00:05:53,514
or running any JavaScript code.

133
00:05:53,584 --> 00:05:56,697
Let's see what happens if we load the page now.

134
00:05:56,697 --> 00:05:58,436
You can see that our React

135
00:05:58,436 --> 00:06:00,040
app simply doesn't work.

136
00:06:00,107 --> 00:06:02,470
We only see a message saying "You

137
00:06:02,470 --> 00:06:04,403
need to enable JavaScript".

138
00:06:04,474 --> 00:06:07,305
Without JavaScript, React cannot render

139
00:06:07,305 --> 00:06:09,482
our components in the browser.

140
00:06:09,554 --> 00:06:12,815
Let's see what happens in our Next.js app,

141
00:06:12,815 --> 00:06:15,043
if we try the same experiment,

142
00:06:15,043 --> 00:06:16,752
and disable JavaScript.

143
00:06:16,935 --> 00:06:19,898
What do you think will happen in this case?

144
00:06:19,898 --> 00:06:22,146
Let's try and reload the app.

145
00:06:22,298 --> 00:06:24,665
You can see that our Next.js page

146
00:06:24,665 --> 00:06:26,459
still displays correctly,

147
00:06:26,531 --> 00:06:28,435
even without JavaScript.

148
00:06:28,435 --> 00:06:32,151
That's because the Next.js server returns

149
00:06:32,151 --> 00:06:34,780
a pre-rendered HTML document.

150
00:06:34,870 --> 00:06:37,130
The browser simply needs to display

151
00:06:37,130 --> 00:06:38,873
these elements on the page,

152
00:06:38,937 --> 00:06:41,550
without the need to load and run

153
00:06:41,550 --> 00:06:44,000
some separate JavaScript code.

154
00:06:44,081 --> 00:06:46,769
Pre-rendering has a few advantages.

155
00:06:46,769 --> 00:06:49,200
The main one is that our page will

156
00:06:49,200 --> 00:06:51,059
be displayed more quickly,

157
00:06:51,130 --> 00:06:54,104
precisely because the browser just needs

158
00:06:54,104 --> 00:06:56,930
to display what's in the initial HTML.

159
00:06:57,004 --> 00:07:00,337
Loading some separate JavaScript code, and

160
00:07:00,337 --> 00:07:02,719
executing it to do client-side

161
00:07:02,719 --> 00:07:04,861
rendering takes extra time.

162
00:07:05,020 --> 00:07:09,456
So, a Next.js app will typically load faster

163
00:07:09,456 --> 00:07:11,621
compared to a traditional React

164
00:07:11,621 --> 00:07:13,297
Single Page Application.

165
00:07:13,366 --> 00:07:17,403
It's also better for search engines like Google,

166
00:07:17,403 --> 00:07:18,748
Bing, and so on.

167
00:07:18,832 --> 00:07:22,325
In the past, search bots simply couldn't see

168
00:07:22,325 --> 00:07:25,739
any dynamic content inserted by JavaScript.

169
00:07:25,818 --> 00:07:28,602
These days at least the most important

170
00:07:28,602 --> 00:07:31,312
search engines do support JavaScript,

171
00:07:31,386 --> 00:07:35,855
but they still work better with pre-rendered HTML.

172
00:07:35,855 --> 00:07:38,743
If you're interested in learning more about this,

173
00:07:38,743 --> 00:07:42,197
I recommend watching the YouTube video on "How

174
00:07:42,197 --> 00:07:45,200
Google Search indexes JavaScript sites".

175
00:07:45,275 --> 00:07:47,081
You'll find the link in the

176
00:07:47,081 --> 00:07:48,887
Resources for this lecture.

177
00:07:48,953 --> 00:07:51,985
As we've seen, pre-rendering also means that

178
00:07:51,985 --> 00:07:55,414
our website can work even without JavaScript.

179
00:07:55,414 --> 00:07:57,722
Although if you want interactive

180
00:07:57,722 --> 00:07:59,669
functionality in your pages

181
00:07:59,741 --> 00:08:02,188
you'll still need JavaScript for that.

182
00:08:02,188 --> 00:08:04,595
By the way, you may have noticed that

183
00:08:04,595 --> 00:08:07,278
the page generated by Next.js still

184
00:08:07,278 --> 00:08:09,655
includes some JavaScript files.

185
00:08:09,732 --> 00:08:13,424
This is partly because we're using the dev server,

186
00:08:13,424 --> 00:08:15,970
which injects some JavaScript code

187
00:08:15,970 --> 00:08:18,366
to automatically reload the page

188
00:08:18,441 --> 00:08:21,558
whenever we modify the code in our project.

189
00:08:21,558 --> 00:08:24,067
But, as we'll see later in this section,

190
00:08:24,067 --> 00:08:26,952
Next.js also uses JavaScript to

191
00:08:26,952 --> 00:08:29,743
enable client-side navigation.

192
00:08:29,836 --> 00:08:32,927
Anyway, let me re-enable JavaScript now,

193
00:08:32,927 --> 00:08:36,003
otherwise we cannot really work on our project.

194
00:08:36,003 --> 00:08:38,570
In the next video we'll talk about

195
00:08:38,570 --> 00:08:40,383
React Server Components.