1
00:00:02,000 --> 00:00:03,000
Now to write some code.

2
00:00:03,000 --> 00:00:07,000
I'm back here in an empty Next.js project,

3
00:00:07,000 --> 00:00:11,000
which you again find attached to this lecture

4
00:00:11,000 --> 00:00:15,000
so that we all start with exactly the same starting state.

5
00:00:16,000 --> 00:00:18,000
It's very similar to the starting projects

6
00:00:18,000 --> 00:00:20,000
from the last core sections,

7
00:00:20,000 --> 00:00:23,000
but I did already add an index.js file

8
00:00:23,000 --> 00:00:28,000
in the pages folder, which lists some dummy content.

9
00:00:28,000 --> 00:00:32,000
Now if we run NPM installed here to install all dependencies

10
00:00:32,000 --> 00:00:34,000
and then we run NPM run dev,

11
00:00:34,000 --> 00:00:37,000
we bring up that development server again.

12
00:00:37,000 --> 00:00:38,000
And once I do that,

13
00:00:38,000 --> 00:00:40,000
we see product one, product two, product three,

14
00:00:40,000 --> 00:00:44,000
and that's just the dummy content I have in there.

15
00:00:44,000 --> 00:00:48,000
Now before we add this get static props function,

16
00:00:48,000 --> 00:00:51,000
I already want to show you something important.

17
00:00:51,000 --> 00:00:55,000
If we view the page source of this page here,

18
00:00:55,000 --> 00:00:59,000
so of this page generated by Next.js,

19
00:00:59,000 --> 00:01:01,000
then we see that it looks very different

20
00:01:01,000 --> 00:01:04,000
than what we had a look at before

21
00:01:04,000 --> 00:01:06,000
with the Standard React App.

22
00:01:06,000 --> 00:01:08,000
And while this is a bit hard to read,

23
00:01:08,000 --> 00:01:11,000
we see that in there, indeed,

24
00:01:11,000 --> 00:01:15,000
we do have the unordered list with the list items here.

25
00:01:15,000 --> 00:01:16,000
Here it is.

26
00:01:16,000 --> 00:01:21,000
We do have that in here in this page.

27
00:01:21,000 --> 00:01:24,000
And keep in mind that this page source we're seeing here

28
00:01:24,000 --> 00:01:28,000
is the actual response we got back from the server,

29
00:01:28,000 --> 00:01:30,000
in this case from the development server,

30
00:01:30,000 --> 00:01:32,000
when this page was loaded.

31
00:01:32,000 --> 00:01:35,000
When this request was initially sent.

32
00:01:35,000 --> 00:01:37,000
And that is the kind of content

33
00:01:37,000 --> 00:01:40,000
a search engine would see as well.

34
00:01:40,000 --> 00:01:41,000
And that's of course great.

35
00:01:41,000 --> 00:01:44,000
It already contains the content.

36
00:01:44,000 --> 00:01:46,000
Of course, this is not content

37
00:01:46,000 --> 00:01:49,000
that was fetched with use effect or anything like that,

38
00:01:49,000 --> 00:01:52,000
but before in the React app, we didn't see any content,

39
00:01:52,000 --> 00:01:56,000
not just the content that was fetched with use effect.

40
00:01:56,000 --> 00:01:59,000
We also didn't see an empty unordered list.

41
00:01:59,000 --> 00:02:01,000
We saw no content at all.

42
00:02:01,000 --> 00:02:04,000
Now, we see all the HTML code,

43
00:02:04,000 --> 00:02:08,000
all the JSX code, returned by our component.

44
00:02:08,000 --> 00:02:10,000
We see that here.

45
00:02:10,000 --> 00:02:13,000
And that already shows us that there is a difference.

46
00:02:13,000 --> 00:02:15,000
This page, which we're getting here,

47
00:02:15,000 --> 00:02:20,000
with Next.js was already pre-rendered by Next.js

48
00:02:21,000 --> 00:02:23,000
without us doing anything.

49
00:02:23,000 --> 00:02:27,000
It was already pre-rendered because by default,

50
00:02:27,000 --> 00:02:32,000
Next.js pre-renders all pages that have no dynamic data.

51
00:02:34,000 --> 00:02:37,000
And this page of course does not have any dynamic data,

52
00:02:37,000 --> 00:02:40,000
everything here is just hard coded.

53
00:02:40,000 --> 00:02:41,000
And if you have a page like this,

54
00:02:41,000 --> 00:02:45,000
Next.js will automatically pre-render it for you.

55
00:02:46,000 --> 00:02:49,000
Which is great because now any content

56
00:02:49,000 --> 00:02:51,000
which you encode in your component

57
00:02:51,000 --> 00:02:53,000
will be visible to search engines,

58
00:02:53,000 --> 00:02:57,000
and to your website visitors, right from the start.

59
00:02:57,000 --> 00:03:00,000
So that's not even the main thing of this section,

60
00:03:00,000 --> 00:03:01,000
but it's already important.

61
00:03:02,000 --> 00:03:06,000
However, let's now get back to get static props.