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:05,992
We learned that Next.js pre-renders
2
00:00:05,992 --> 00:00:08,471
our components on the server.
3
00:00:08,557 --> 00:00:11,617
We can see that with a simple log message:
4
00:00:11,617 --> 00:00:14,691
when we request the HomePage in the browser,
5
00:00:14,691 --> 00:00:17,220
the "rendering" message is printed
6
00:00:17,220 --> 00:00:19,006
only in the server logs,
7
00:00:19,081 --> 00:00:21,340
and not in the browser console.
8
00:00:21,340 --> 00:00:24,808
This is also different from how Next.js
9
00:00:24,808 --> 00:00:27,832
works with the older Pages Router.
10
00:00:27,921 --> 00:00:30,584
The new App Router by default
11
00:00:30,584 --> 00:00:33,247
uses React Server Components.
12
00:00:33,339 --> 00:00:36,524
This is a feature recently added to React
13
00:00:36,524 --> 00:00:39,162
that allows us to create components that
14
00:00:39,162 --> 00:00:41,272
are rendered only on the server,
15
00:00:41,338 --> 00:00:43,681
without sending any JavaScript
16
00:00:43,681 --> 00:00:45,243
code to the browser.
17
00:00:45,321 --> 00:00:48,400
That's what "Zero-Bundle-Size" means:
18
00:00:48,400 --> 00:00:50,741
they're components that add zero
19
00:00:50,741 --> 00:00:52,936
code to the JavaScript bundle.
20
00:00:53,009 --> 00:00:55,700
Let me show you how this is different
21
00:00:55,700 --> 00:00:58,245
from the previous Next.js approach.
22
00:00:58,318 --> 00:01:01,014
I have prepared another project here,
23
00:01:01,014 --> 00:01:03,696
that is still based on Next.js,
24
00:01:03,696 --> 00:01:06,032
but using the Pages Router.
25
00:01:06,119 --> 00:01:09,485
Note how, rather than having an "app" folder,
26
00:01:09,485 --> 00:01:12,748
in this project there is a "pages" folder.
27
00:01:12,748 --> 00:01:15,502
But the dependencies are exactly the
28
00:01:15,502 --> 00:01:18,102
same as our first Next.js project.
29
00:01:18,179 --> 00:01:21,037
Using the Pages Router there
30
00:01:21,037 --> 00:01:23,896
is a file called "_app.jsx",
31
00:01:23,998 --> 00:01:26,618
that plays a similar role to the
32
00:01:26,618 --> 00:01:29,074
RootLayout for the App Router.
33
00:01:29,156 --> 00:01:33,224
And the HomePage is in "index.jsx".
34
00:01:33,224 --> 00:01:36,533
It's very similar to our other HomePage.
35
00:01:36,533 --> 00:01:38,943
Now, we can start the server
36
00:01:38,943 --> 00:01:41,354
with "npm run dev" as usual,
37
00:01:41,440 --> 00:01:44,540
and it's running on port 3001.
38
00:01:44,540 --> 00:01:47,589
You can see that the page is almost the same.
39
00:01:47,589 --> 00:01:50,689
Now, let's see what happens if we clear the logs
40
00:01:50,689 --> 00:01:53,004
and reload the page in the browser.
41
00:01:53,004 --> 00:01:55,632
You can see that the HomePage component
42
00:01:55,632 --> 00:01:57,384
is rendered on the server,
43
00:01:57,451 --> 00:01:59,694
just like with the App Router,
44
00:01:59,694 --> 00:02:03,042
but then it's also rendered in the browser.
45
00:02:03,042 --> 00:02:05,938
This is in fact the main difference
46
00:02:05,938 --> 00:02:08,255
between the old Pages Router
47
00:02:08,336 --> 00:02:10,314
and the new App Router.
48
00:02:10,314 --> 00:02:14,175
The Pages Router always renders all components
49
00:02:14,175 --> 00:02:17,364
both on the server and in the browser.
50
00:02:17,448 --> 00:02:20,301
While the App Router by default only
51
00:02:20,301 --> 00:02:22,441
renders them on the server.
52
00:02:22,520 --> 00:02:25,159
But why does the Pages Router render
53
00:02:25,159 --> 00:02:27,212
them in the browser as well?
54
00:02:27,285 --> 00:02:30,487
The reason is that in a React component we
55
00:02:30,487 --> 00:02:33,459
may use some client-side functionality.
56
00:02:33,535 --> 00:02:35,253
Just as a quick example,
57
00:02:35,253 --> 00:02:38,442
suppose we want to display a pop up window
58
00:02:38,442 --> 00:02:40,719
as soon as the page is loaded.
59
00:02:40,795 --> 00:02:44,126
We could do that by calling the "useEffect" hook,
60
00:02:44,126 --> 00:02:46,884
that lets us execute a function after
61
00:02:46,884 --> 00:02:48,822
the component is rendered.
62
00:02:48,896 --> 00:02:52,321
If we pass an empty array as the dependency list,
63
00:02:52,321 --> 00:02:54,208
that's the second argument,
64
00:02:54,278 --> 00:02:57,258
our effect function will only run once,
65
00:02:57,258 --> 00:02:59,349
after the component is rendered
66
00:02:59,349 --> 00:03:00,630
for the first time.
67
00:03:00,698 --> 00:03:03,098
Now, to keep this simple I'll
68
00:03:03,098 --> 00:03:05,167
call "window.alert" here,
69
00:03:05,250 --> 00:03:08,783
and show a message saying "Welcome to my site!!!".
70
00:03:09,250 --> 00:03:10,834
If we save this change,
71
00:03:10,834 --> 00:03:14,223
you can see that we get this alert straight away.
72
00:03:14,223 --> 00:03:17,659
And this will show up any time we load the page.
73
00:03:17,659 --> 00:03:20,681
Obviously, this is a rather silly example.
74
00:03:20,681 --> 00:03:23,482
Displaying a popup as soon as the page
75
00:03:23,482 --> 00:03:26,135
loads is a horrible user experience.
76
00:03:26,209 --> 00:03:28,961
But sometimes you do need to display
77
00:03:28,961 --> 00:03:31,636
a cookie consent banner or similar.
78
00:03:31,713 --> 00:03:34,781
Anyway, the point is that the code that
79
00:03:34,781 --> 00:03:37,850
shows the alert must run in the client,
80
00:03:37,929 --> 00:03:40,458
it cannot run on the server, because
81
00:03:40,458 --> 00:03:42,707
there's no browser window there.
82
00:03:42,777 --> 00:03:46,235
That's why Next.js re-renders the HomePage
83
00:03:46,235 --> 00:03:48,293
component in the browser.
84
00:03:48,376 --> 00:03:51,519
Let me show you in more detail how this works.
85
00:03:51,519 --> 00:03:54,889
When we load the page, the browser requests
86
00:03:54,889 --> 00:03:57,005
the HTML document as usual.
87
00:03:57,083 --> 00:04:00,305
And, even when using the Pages Router,
88
00:04:00,305 --> 00:04:04,509
you can see that Next.js pre-renders the HTML.
89
00:04:04,509 --> 00:04:07,853
That's why it renders the component on the server.
90
00:04:07,853 --> 00:04:10,629
But then it will also send some JavaScript
91
00:04:10,629 --> 00:04:12,017
files to the browser,
92
00:04:12,083 --> 00:04:14,569
including our code that triggers
93
00:04:14,569 --> 00:04:16,045
the "window.alert".
94
00:04:16,123 --> 00:04:19,748
Which is part of our HomePage component function.
95
00:04:19,748 --> 00:04:22,312
So, Next.js first renders our
96
00:04:22,312 --> 00:04:24,346
component on the server
97
00:04:24,435 --> 00:04:27,096
to generate the pre-rendered HTML
98
00:04:27,096 --> 00:04:29,113
returned in the response.
99
00:04:29,194 --> 00:04:32,343
But then it also sends the same component
100
00:04:32,343 --> 00:04:34,417
code in a JavaScript bundle
101
00:04:34,493 --> 00:04:37,987
so that we can run client-side functionality,
102
00:04:37,987 --> 00:04:41,185
like displaying an annoying popup to the user.
103
00:04:41,185 --> 00:04:44,575
The limitation of the old Pages Router
104
00:04:44,575 --> 00:04:47,600
is that it always sends to the browser
105
00:04:47,600 --> 00:04:50,465
all the code for all our components.
106
00:04:50,545 --> 00:04:53,114
If you remember, it was re-rendering
107
00:04:53,114 --> 00:04:55,042
the HomePage in the browser
108
00:04:55,113 --> 00:04:58,200
even before we added the popup window,
109
00:04:58,200 --> 00:05:01,660
when the HomePage was entirely static.
110
00:05:01,660 --> 00:05:03,260
That was unnecessary.
111
00:05:03,260 --> 00:05:06,500
As we've seen, the new App Router uses
112
00:05:06,500 --> 00:05:09,143
React Server Components instead
113
00:05:09,228 --> 00:05:11,943
that are only rendered on the server,
114
00:05:11,943 --> 00:05:14,116
without sending any JavaScript
115
00:05:14,116 --> 00:05:15,564
code to the browser.
116
00:05:15,636 --> 00:05:17,682
And that's a lot more efficient.
117
00:05:17,682 --> 00:05:19,919
But, it also begs the question:
118
00:05:19,919 --> 00:05:21,851
what happens if we need some
119
00:05:21,851 --> 00:05:23,575
client-side functionality
120
00:05:23,644 --> 00:05:26,914
in a project that uses the App Router?
121
00:05:26,914 --> 00:05:29,292
Let's try, and we'll find out.
122
00:05:29,374 --> 00:05:32,359
I just need to import "useEffect" here.
123
00:05:32,359 --> 00:05:33,415
And if we save,
124
00:05:33,799 --> 00:05:34,959
it doesn't work!
125
00:05:34,959 --> 00:05:38,245
We get a "ReactServerComponentError".
126
00:05:38,245 --> 00:05:41,154
There are some more details in the console.
127
00:05:41,154 --> 00:05:43,688
It says "You're importing a component
128
00:05:43,688 --> 00:05:45,194
that needs useEffect."
129
00:05:45,263 --> 00:05:48,426
"It only works in a Client Component"
130
00:05:48,426 --> 00:05:50,841
"but none of its parents are
131
00:05:50,841 --> 00:05:52,824
marked with use client"
132
00:05:52,910 --> 00:05:56,335
"so they're Server Components by default".
133
00:05:56,335 --> 00:05:58,242
Let's unpack this message.
134
00:05:58,242 --> 00:06:01,854
It contains three useful pieces of information.
135
00:06:01,854 --> 00:06:04,323
First: our HomePage is currently
136
00:06:04,323 --> 00:06:05,789
a Server Component,
137
00:06:05,866 --> 00:06:07,659
because that's the default.
138
00:06:07,659 --> 00:06:11,454
Second: to use client-side functionality
139
00:06:11,454 --> 00:06:12,972
(like useEffect)
140
00:06:13,067 --> 00:06:16,773
it needs to be a Client Component instead.
141
00:06:16,773 --> 00:06:20,248
And third: we can make it a Client Component
142
00:06:20,248 --> 00:06:23,561
by marking it with "use client",
143
00:06:23,561 --> 00:06:25,742
that is a special directive we
144
00:06:25,742 --> 00:06:27,851
can add at the top of a file.
145
00:06:27,923 --> 00:06:29,858
With this simple change, our
146
00:06:29,858 --> 00:06:31,378
page is working again,
147
00:06:31,447 --> 00:06:33,910
and it's displaying the popup window,
148
00:06:33,910 --> 00:06:37,606
so the client-side functionality also works.
149
00:06:37,606 --> 00:06:41,649
So, simply by adding "use client" at the top,
150
00:06:41,649 --> 00:06:44,777
this is now a Client Component rather
151
00:06:44,777 --> 00:06:46,805
than a Server Component.
152
00:06:46,890 --> 00:06:49,754
But, what does this mean exactly?
153
00:06:49,754 --> 00:06:52,450
Let's clear the logs, and see how
154
00:06:52,450 --> 00:06:54,983
a Client Component is rendered.
155
00:06:55,064 --> 00:06:57,423
You can see that it's rendered both
156
00:06:57,423 --> 00:06:59,647
on the server and in the browser.
157
00:06:59,714 --> 00:07:04,064
So it works pretty like with the old Pages Router.
158
00:07:04,064 --> 00:07:07,338
The difference is that with the new App Router
159
00:07:07,338 --> 00:07:10,064
we need to explicitly declare if we
160
00:07:10,064 --> 00:07:12,400
need client-side functionality
161
00:07:12,478 --> 00:07:16,663
by adding the "use client" directive at the top.
162
00:07:16,663 --> 00:07:18,986
Without it, it will be treated
163
00:07:18,986 --> 00:07:20,690
as a Server Component,
164
00:07:20,768 --> 00:07:22,483
meaning that it will only be
165
00:07:22,483 --> 00:07:23,893
rendered on the server,
166
00:07:23,954 --> 00:07:26,712
without sending unnecessary JavaScript
167
00:07:26,712 --> 00:07:28,164
code to the browser.
168
00:07:28,236 --> 00:07:32,008
To recap, in Next.js with the App Router
169
00:07:32,008 --> 00:07:34,742
there are two different kinds of
170
00:07:34,742 --> 00:07:37,305
components: Server and Client.
171
00:07:37,391 --> 00:07:40,246
Server Components are the default,
172
00:07:40,246 --> 00:07:42,847
which means that all our components
173
00:07:42,847 --> 00:07:44,779
will be Server Components,
174
00:07:44,854 --> 00:07:47,280
unless we specify otherwise.
175
00:07:47,280 --> 00:07:50,297
If we want a Client Component instead,
176
00:07:50,297 --> 00:07:53,381
we need to put the "use client" directive
177
00:07:53,381 --> 00:07:55,112
at the top of the file.
178
00:07:55,187 --> 00:07:58,770
Server Components are only rendered on the server,
179
00:07:58,770 --> 00:08:02,338
so their code is not sent to the browser,
180
00:08:02,338 --> 00:08:04,434
making them more efficient, which
181
00:08:04,434 --> 00:08:06,150
is why they're the default.
182
00:08:06,213 --> 00:08:09,066
Client Components on the other hand are
183
00:08:09,066 --> 00:08:11,406
still pre-rendered on the server
184
00:08:11,479 --> 00:08:14,617
but then they are also rendered in the browser.
185
00:08:14,617 --> 00:08:16,624
This allows them to include
186
00:08:16,624 --> 00:08:18,556
client-side functionality,
187
00:08:18,631 --> 00:08:20,942
something that's not possible
188
00:08:20,942 --> 00:08:22,775
with Server Components.
189
00:08:22,854 --> 00:08:27,176
So in a Server Component we cannot use React hooks,
190
00:08:27,176 --> 00:08:28,447
like useEffect,
191
00:08:28,532 --> 00:08:31,052
nor event handlers, like the
192
00:08:31,052 --> 00:08:33,030
"onClick" on a button,
193
00:08:33,121 --> 00:08:36,674
nor any browser APIs, like accessing
194
00:08:36,674 --> 00:08:38,649
the "window" object.
195
00:08:38,746 --> 00:08:40,333
On the other hand, as we'll
196
00:08:40,333 --> 00:08:41,745
see later in the course,
197
00:08:41,803 --> 00:08:44,307
Server Components can potentially
198
00:08:44,307 --> 00:08:46,584
use server-side functionality,
199
00:08:46,660 --> 00:08:50,423
like Node.js built-in modules for example.
200
00:08:50,423 --> 00:08:52,333
Something that's obviously not
201
00:08:52,333 --> 00:08:53,860
possible in the browser.
14680
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.