Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
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.
14486
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.