1
00:00:00,000 --> 00:00:04,000
So we have this first starting project here,

2
00:00:04,000 --> 00:00:07,000
and what's really important about this project is

3
00:00:07,000 --> 00:00:12,000
that if you inspect the page source in your browser,

4
00:00:12,000 --> 00:00:14,000
you'll see a bunch of code in there.

5
00:00:14,000 --> 00:00:17,000
But most importantly, if you take a closer look,

6
00:00:18,000 --> 00:00:20,000
you'll see the actual page content

7
00:00:20,000 --> 00:00:22,000
somewhere in that source code.

8
00:00:23,000 --> 00:00:25,000
And that's important

9
00:00:25,000 --> 00:00:28,000
because that means that the actual content

10
00:00:28,000 --> 00:00:30,000
that's visible on the screen,

11
00:00:30,000 --> 00:00:35,000
so this text here in this case, was part of the HTML code

12
00:00:35,000 --> 00:00:38,000
that was sent back from the server.

13
00:00:38,000 --> 00:00:42,000
And that's special because that's not the case

14
00:00:42,000 --> 00:00:45,000
in a standard client site React app.

15
00:00:48,000 --> 00:00:50,000
There, if you inspect the source code,

16
00:00:50,000 --> 00:00:53,000
you will just see basically empty page

17
00:00:53,000 --> 00:00:55,000
and some script imports,

18
00:00:55,000 --> 00:00:57,000
but you won't see the actual content

19
00:00:57,000 --> 00:01:01,000
that's visible on the screen in that source code.

20
00:01:01,000 --> 00:01:03,000
And the reason for that is that

21
00:01:03,000 --> 00:01:07,000
a standard React app is manipulated on the client

22
00:01:07,000 --> 00:01:09,000
site in the browser.

23
00:01:09,000 --> 00:01:14,000
React.js by default is a client site JavaScript library,

24
00:01:15,000 --> 00:01:18,000
which means it runs in the browser and it edits

25
00:01:18,000 --> 00:01:21,000
and manipulates the page in the browser.

26
00:01:21,000 --> 00:01:22,000
And that's amazing

27
00:01:22,000 --> 00:01:25,000
because that means that the page can be edited

28
00:01:25,000 --> 00:01:26,000
after it's been loaded.

29
00:01:26,000 --> 00:01:29,000
We can update the state of that page

30
00:01:29,000 --> 00:01:33,000
after it's been loaded without having to fetch a new page.

31
00:01:33,000 --> 00:01:36,000
But the disadvantage is that, for example,

32
00:01:36,000 --> 00:01:41,000
search engine crawlers don't see the actual page content

33
00:01:41,000 --> 00:01:43,000
if they visit the page for the first time.

34
00:01:44,000 --> 00:01:48,000
And that's the difference here with NextJS.

35
00:01:48,000 --> 00:01:49,000
Here, we got all the content,

36
00:01:49,000 --> 00:01:52,000
not just visually on the screen,

37
00:01:52,000 --> 00:01:54,000
but in the actual source code.

38
00:01:54,000 --> 00:01:56,000
Because with NextJS,

39
00:01:56,000 --> 00:01:59,000
you no longer have a client-side application.

40
00:01:59,000 --> 00:02:03,000
Instead you have a full stack application

41
00:02:03,000 --> 00:02:07,000
with NextJS projects, you have code that runs on the client

42
00:02:07,000 --> 00:02:10,000
and you have a lot of code that runs on the server.

43
00:02:10,000 --> 00:02:13,000
NextJS simply is both.

44
00:02:13,000 --> 00:02:17,000
It's not just client-side, not just backend, it's both.

45
00:02:17,000 --> 00:02:20,000
And NextJS seamlessly blends client

46
00:02:20,000 --> 00:02:23,000
and server-side so that you can use React

47
00:02:23,000 --> 00:02:26,000
to build amazing full stack applications.

48
00:02:26,000 --> 00:02:28,000
And that's what we'll do now.