1
00:00:03,000 --> 00:00:06,307
Now that we have a Next.js project set up,

2
00:00:06,307 --> 00:00:08,276
with a simple index page,

3
00:00:08,276 --> 00:00:10,323
we can see what is perhaps

4
00:00:10,323 --> 00:00:13,158
the main feature provided by Next.js

5
00:00:13,158 --> 00:00:15,914
compared to a normal React project.

6
00:00:15,914 --> 00:00:18,749
And that feature is "pre-rendering".

7
00:00:19,643 --> 00:00:21,887
To show you exactly what that means

8
00:00:21,887 --> 00:00:24,453
I have created a standard React project,

9
00:00:24,453 --> 00:00:26,633
using the "create-react-app" tool.

10
00:00:27,262 --> 00:00:29,073
So in my "Projects" folder,

11
00:00:29,073 --> 00:00:31,355
along with the "next-blog" project

12
00:00:31,355 --> 00:00:33,301
we created in the last video,

13
00:00:33,301 --> 00:00:35,582
I now have a "react-blog" as well.

14
00:00:36,283 --> 00:00:38,450
And if I open that "react-blog" folder

15
00:00:38,450 --> 00:00:39,704
in Visual Studio Code,

16
00:00:41,317 --> 00:00:43,195
this is the initial project

17
00:00:43,195 --> 00:00:45,492
as generated by Create React App.

18
00:00:46,061 --> 00:00:47,574
What I'm going to do now

19
00:00:47,574 --> 00:00:48,835
is remove everything

20
00:00:48,835 --> 00:00:50,347
from this App component.

21
00:00:51,128 --> 00:00:52,581
Then I'm going back to

22
00:00:52,581 --> 00:00:53,902
our Next.js project,

23
00:00:54,993 --> 00:00:56,793
and copy exactly the same

24
00:00:56,793 --> 00:00:57,729
JSX elements.

25
00:00:59,027 --> 00:01:00,797
So our plain React page

26
00:01:00,797 --> 00:01:02,798
will look exactly the same

27
00:01:02,798 --> 00:01:04,337
as our Next.js page,

28
00:01:04,337 --> 00:01:06,416
and we can compare the two.

29
00:01:07,147 --> 00:01:08,652
Now I'm going to open a terminal

30
00:01:10,213 --> 00:01:11,604
and run "npm start"

31
00:01:11,604 --> 00:01:13,873
to launch the React dev server.

32
00:01:13,873 --> 00:01:16,143
It's not starting straight away

33
00:01:16,143 --> 00:01:17,900
because it detected that

34
00:01:17,900 --> 00:01:21,122
"Something is already running on port 3000",

35
00:01:21,122 --> 00:01:24,050
and that "something" is our Next.js app.

36
00:01:24,917 --> 00:01:27,452
But that's ok, we just need to type "yes"

37
00:01:27,452 --> 00:01:29,802
and it will start on a different port.

38
00:01:30,364 --> 00:01:32,703
In fact it's running on port 3001,

39
00:01:32,703 --> 00:01:34,355
and here's our React app

40
00:01:34,355 --> 00:01:36,075
displayed in the browser.

41
00:01:36,713 --> 00:01:37,992
Now I'm going to open

42
00:01:37,992 --> 00:01:39,577
the Chrome Developer Tools

43
00:01:39,577 --> 00:01:41,588
and look at the Network requests.

44
00:01:42,210 --> 00:01:44,207
Let me select only "Doc",

45
00:01:44,207 --> 00:01:46,843
or documents, that is HTML files.

46
00:01:47,423 --> 00:01:49,329
Then I'm going to reload the app,

47
00:01:49,829 --> 00:01:52,143
and we can see a request for

48
00:01:52,143 --> 00:01:54,292
"localhost" and port 3001.

49
00:01:54,875 --> 00:01:56,981
Now, if we look at the response

50
00:01:56,981 --> 00:01:59,904
we can see the HTML returned by the server.

51
00:02:00,472 --> 00:02:01,776
If we scroll to the "body"

52
00:02:02,672 --> 00:02:04,112
here you can see that

53
00:02:04,112 --> 00:02:06,032
this page basically contains

54
00:02:06,032 --> 00:02:07,815
only a single empty "div".

55
00:02:08,453 --> 00:02:09,663
So how can we see

56
00:02:09,663 --> 00:02:11,159
the "My Blog" heading

57
00:02:11,159 --> 00:02:12,726
displayed in the page,

58
00:02:12,726 --> 00:02:14,506
if it's not in this HTML?

59
00:02:14,506 --> 00:02:16,571
As you probably know already,

60
00:02:16,571 --> 00:02:18,566
that's because after loading

61
00:02:18,566 --> 00:02:21,343
this initial HTML file from the server,

62
00:02:22,271 --> 00:02:23,750
the browser also loads

63
00:02:23,750 --> 00:02:25,296
these JavaScript files,

64
00:02:25,864 --> 00:02:28,118
and when that JavaScript code

65
00:02:28,118 --> 00:02:30,605
is executed, our React component

66
00:02:30,605 --> 00:02:32,626
is inserted into the page.

67
00:02:33,282 --> 00:02:35,410
In other words, React components

68
00:02:35,410 --> 00:02:38,137
are normally rendered on the client side,

69
00:02:38,137 --> 00:02:39,933
which means in the browser.

70
00:02:40,567 --> 00:02:42,042
We can further prove this

71
00:02:42,042 --> 00:02:43,516
if we go to the Settings,

72
00:02:44,075 --> 00:02:45,835
and down here there should be

73
00:02:45,835 --> 00:02:47,776
an option to disable JavaScript.

74
00:02:48,336 --> 00:02:50,178
Now, with JavaScript disabled,

75
00:02:50,178 --> 00:02:52,020
if we try reloading this page,

76
00:02:52,581 --> 00:02:54,257
it doesn't work any more.

77
00:02:54,257 --> 00:02:57,271
It just says "You need to enable JavaScript",

78
00:02:57,271 --> 00:02:59,483
which is the text that was inside

79
00:02:59,483 --> 00:03:01,560
the "noscript" tag in the HTML.

80
00:03:01,560 --> 00:03:02,832
Without JavaScript,

81
00:03:02,832 --> 00:03:05,378
our React component cannot be rendered

82
00:03:05,378 --> 00:03:06,383
by the browser.

83
00:03:07,286 --> 00:03:09,393
Now let me go and re-enable JavaScript,

84
00:03:11,252 --> 00:03:13,310
otherwise not many things will work.

85
00:03:13,810 --> 00:03:15,546
So that's what happens

86
00:03:15,546 --> 00:03:17,361
with a plain React app.

87
00:03:17,361 --> 00:03:20,281
Now let's go back to our Next.js app,

88
00:03:20,281 --> 00:03:22,964
that's still running on port 3000.

89
00:03:23,700 --> 00:03:25,160
What happens in this case

90
00:03:25,160 --> 00:03:27,203
if we look at the Network requests?

91
00:03:27,762 --> 00:03:29,784
Let's try and reload this page.

92
00:03:30,662 --> 00:03:32,367
We can see a "localhost" request,

93
00:03:32,867 --> 00:03:34,784
but the HTML for this page

94
00:03:34,784 --> 00:03:36,184
is all in one line,

95
00:03:36,184 --> 00:03:38,469
so it's a bit difficult to see.

96
00:03:39,116 --> 00:03:40,646
What I'm going to do is

97
00:03:40,646 --> 00:03:41,976
copy the whole HTML,

98
00:03:42,542 --> 00:03:43,495
and go and paste it

99
00:03:43,495 --> 00:03:44,297
into the editor,

100
00:03:44,297 --> 00:03:45,952
so we can look at it more easily.

101
00:03:47,542 --> 00:03:48,863
Let me set the file type

102
00:03:49,742 --> 00:03:50,812
to "HTML",

103
00:03:52,508 --> 00:03:54,485
and also format this document,

104
00:03:54,485 --> 00:03:57,056
so it's no longer all in a single line.

105
00:03:57,621 --> 00:03:58,893
If we look inside the "body"

106
00:04:00,054 --> 00:04:00,857
you can see that

107
00:04:00,857 --> 00:04:02,011
there's a "div" element

108
00:04:02,561 --> 00:04:03,765
and inside that

109
00:04:03,765 --> 00:04:05,770
we can see our "main" tag

110
00:04:05,770 --> 00:04:07,534
with the "h1" heading.

111
00:04:07,534 --> 00:04:09,299
So the React component

112
00:04:09,299 --> 00:04:11,786
we wrote in our "index.js" file

113
00:04:11,786 --> 00:04:13,550
has been pre-rendered.

114
00:04:13,550 --> 00:04:16,438
The HTML file returned by the server

115
00:04:16,438 --> 00:04:19,646
already contains the component elements.

116
00:04:20,707 --> 00:04:22,295
Now, you may notice that

117
00:04:22,295 --> 00:04:23,816
this file also includes

118
00:04:23,816 --> 00:04:26,197
a bunch of JavaScript files as well,

119
00:04:26,197 --> 00:04:28,512
and that's because in a Next.js app

120
00:04:28,512 --> 00:04:30,893
we may still want some functionality

121
00:04:30,893 --> 00:04:32,811
that runs on the client side,

122
00:04:33,641 --> 00:04:35,953
for example if we want to do something

123
00:04:35,953 --> 00:04:37,960
when the user clicks on a button.

124
00:04:38,521 --> 00:04:40,399
But for this simple page

125
00:04:40,399 --> 00:04:41,730
the HTML actually

126
00:04:41,730 --> 00:04:44,313
already contains all the content.

127
00:04:44,970 --> 00:04:47,331
Let's do the same experiment as before

128
00:04:47,331 --> 00:04:48,574
and see what happens

129
00:04:48,574 --> 00:04:50,128
if we disable JavaScript.

130
00:04:50,753 --> 00:04:51,859
Let's reload the page,

131
00:04:53,053 --> 00:04:54,185
and as you can see,

132
00:04:54,185 --> 00:04:55,736
our page still works fine!

133
00:04:56,296 --> 00:04:57,644
It renders correctly

134
00:04:57,644 --> 00:04:59,668
even with JavaScript disabled.

135
00:04:59,668 --> 00:05:01,691
This proves that the rendering

136
00:05:01,691 --> 00:05:03,579
happened on the server side.

137
00:05:04,282 --> 00:05:05,917
Let me re-enabled JavaScript,

138
00:05:05,917 --> 00:05:07,835
so we can keep developing our app.

139
00:05:09,582 --> 00:05:12,079
But this is the main difference

140
00:05:12,079 --> 00:05:14,253
between a normal React app,

141
00:05:14,253 --> 00:05:15,703
and a Next.js app:

142
00:05:16,365 --> 00:05:17,773
whenever possible,

143
00:05:17,773 --> 00:05:20,982
Next.js pre-renders our React components.

144
00:05:20,982 --> 00:05:23,017
This has a few advantages.

145
00:05:23,017 --> 00:05:25,991
For a start, our app will feel faster,

146
00:05:25,991 --> 00:05:29,121
because the page content becomes visible

147
00:05:29,121 --> 00:05:31,469
as soon as the HTML is loaded,

148
00:05:31,469 --> 00:05:34,521
without waiting for any JavaScript code

149
00:05:34,521 --> 00:05:36,556
to be loaded and executed.

150
00:05:36,556 --> 00:05:38,904
But also, this helps with SEO,

151
00:05:38,904 --> 00:05:41,252
or Search Engine Optimization,

152
00:05:41,252 --> 00:05:43,052
because pages that have

153
00:05:43,052 --> 00:05:45,008
all their content in HTML

154
00:05:45,008 --> 00:05:47,982
are easier for search engines to crawl

155
00:05:47,982 --> 00:05:51,269
compared to pages that require JavaScript.

156
00:05:51,269 --> 00:05:54,321
In other words, thanks to pre-rendering

157
00:05:54,321 --> 00:05:56,356
your pages may rank higher

158
00:05:56,356 --> 00:05:59,095
in Google and other search results.