1
00:00:00,000 --> 00:00:02,000
So we got this next project,

2
00:00:02,000 --> 00:00:05,000
and how does this project now lead

3
00:00:05,000 --> 00:00:07,000
to this being visible on the screen?

4
00:00:08,000 --> 00:00:09,000
Well, to understand that,

5
00:00:09,000 --> 00:00:11,000
let's take a look at that app folder

6
00:00:11,000 --> 00:00:15,000
because that is the most important folder

7
00:00:15,000 --> 00:00:18,000
in a modern NextJS project.

8
00:00:18,000 --> 00:00:23,000
It's this app folder where you set up your different pages

9
00:00:23,000 --> 00:00:26,000
that you want to have on your overall website,

10
00:00:26,000 --> 00:00:31,000
and that's why in there, you also find a Page.js file.

11
00:00:32,000 --> 00:00:37,000
Page.js is a reserved filename just as Layout.js

12
00:00:37,000 --> 00:00:39,000
and a couple of other filenames

13
00:00:39,000 --> 00:00:42,000
you'll encounter throughout this section.

14
00:00:42,000 --> 00:00:46,000
And a file named Page.js simply tells NextJS

15
00:00:46,000 --> 00:00:48,000
that it should render a page.

16
00:00:50,000 --> 00:00:52,000
However, if you take a look at that file,

17
00:00:52,000 --> 00:00:53,000
you see that in there,

18
00:00:53,000 --> 00:00:56,000
it's in the end a React component function

19
00:00:56,000 --> 00:00:58,000
that's stored in the file,

20
00:00:58,000 --> 00:01:01,000
something you of course know as a React developer.

21
00:01:02,000 --> 00:01:05,000
The special thing about this component here

22
00:01:05,000 --> 00:01:09,000
just is that it's a so-called server component,

23
00:01:09,000 --> 00:01:11,000
a type of component

24
00:01:11,000 --> 00:01:16,000
that's not really easily built with just React,

25
00:01:16,000 --> 00:01:19,000
but that is embraced and supported by NextJS.

26
00:01:20,000 --> 00:01:24,000
Now, on the surface, it's a regular component.

27
00:01:24,000 --> 00:01:26,000
There's nothing special about it,

28
00:01:26,000 --> 00:01:29,000
but NextJS ensures that this component

29
00:01:29,000 --> 00:01:32,000
is actually rendered on the server,

30
00:01:32,000 --> 00:01:35,000
that this component function is executed on the server.

31
00:01:36,000 --> 00:01:38,000
Hence, if you, for example,

32
00:01:38,000 --> 00:01:42,000
add a console lock statement here where you say executing,

33
00:01:43,000 --> 00:01:46,000
you will not see that here on the client side.

34
00:01:46,000 --> 00:01:48,000
If you open your developer tools

35
00:01:48,000 --> 00:01:50,000
and the JavaScript console,

36
00:01:50,000 --> 00:01:53,000
you can refresh as often as you want,

37
00:01:53,000 --> 00:01:55,000
you will not see that log statement here.

38
00:01:57,000 --> 00:01:59,000
Instead, you can see it on the backend.

39
00:01:59,000 --> 00:02:01,000
There, if you open the terminal

40
00:02:01,000 --> 00:02:04,000
where you started the development server,

41
00:02:04,000 --> 00:02:06,000
you see all these executing logs

42
00:02:07,000 --> 00:02:10,000
and that proves that it's executing on the server

43
00:02:10,000 --> 00:02:11,000
because this process

44
00:02:11,000 --> 00:02:14,000
and the terminal is running the server,

45
00:02:14,000 --> 00:02:17,000
all the logs here are coming from the server side.

46
00:02:18,000 --> 00:02:21,000
So it's a regular React component,

47
00:02:21,000 --> 00:02:24,000
but treated in a special way by NextJS.

48
00:02:24,000 --> 00:02:27,000
It is treated as a server component

49
00:02:27,000 --> 00:02:29,000
and executed on the server,

50
00:02:30,000 --> 00:02:32,000
and it's then the returned JSX code

51
00:02:32,000 --> 00:02:36,000
that's sent over the wire to the browser to be rendered

52
00:02:36,000 --> 00:02:39,000
as HTML, so to say,

53
00:02:39,000 --> 00:02:41,000
and that's why we can see what we see here,

54
00:02:41,000 --> 00:02:43,000
thanks to this component.