1
00:00:03,000 --> 00:00:06,192
In this section we'll see how to load data,

2
00:00:06,192 --> 00:00:09,090
that we can then display in our pages.

3
00:00:09,090 --> 00:00:12,854
If we take the Stardew Valley review for example,

4
00:00:12,854 --> 00:00:16,667
this page currently shows some placeholder text,

5
00:00:16,667 --> 00:00:19,833
that simply says "This will be the review".

6
00:00:19,833 --> 00:00:22,882
Now, we could write the full review text

7
00:00:22,882 --> 00:00:25,397
directly in this React component,

8
00:00:25,473 --> 00:00:28,683
with "p" tags to separate each paragraph,

9
00:00:28,683 --> 00:00:29,429
and so on.

10
00:00:29,504 --> 00:00:32,702
But that's not really the most convenient

11
00:00:32,702 --> 00:00:34,730
way to write long content.

12
00:00:34,808 --> 00:00:37,308
Let's say we want to keep everything

13
00:00:37,308 --> 00:00:39,182
inside our project for now,

14
00:00:39,251 --> 00:00:41,803
without using an external Content

15
00:00:41,803 --> 00:00:43,194
Management System.

16
00:00:43,272 --> 00:00:47,172
A simple approach is to use Markdown files.

17
00:00:47,172 --> 00:00:50,468
Let's create a new folder, at the top of our project,

18
00:00:50,468 --> 00:00:51,526
called "content",

19
00:00:51,588 --> 00:00:54,312
and also a nested folder inside it,

20
00:00:54,312 --> 00:00:55,712
for the "reviews".

21
00:00:55,790 --> 00:00:58,114
At this point we can create a new file,

22
00:00:58,114 --> 00:01:00,369
for the "stardew-valley" game,

23
00:01:00,369 --> 00:01:02,844
with "md" as the extension,

24
00:01:02,844 --> 00:01:05,376
that stands for Markdown.

25
00:01:05,376 --> 00:01:07,193
Some of you will be familiar

26
00:01:07,193 --> 00:01:08,814
with the Markdown format;

27
00:01:08,879 --> 00:01:11,311
it's used by most projects for

28
00:01:11,311 --> 00:01:13,580
the README file for example.

29
00:01:13,661 --> 00:01:16,247
It allows you to write rich text,

30
00:01:16,247 --> 00:01:19,337
including some formatting, like "bold",

31
00:01:19,337 --> 00:01:21,503
denoted by wrapping the text

32
00:01:21,503 --> 00:01:23,514
inside double underscores,

33
00:01:23,591 --> 00:01:27,366
or "italic", that uses a single underscore.

34
00:01:27,366 --> 00:01:29,528
Visual Studio Code supports

35
00:01:29,528 --> 00:01:31,450
Markdown out of the box.

36
00:01:31,530 --> 00:01:33,824
If we open the Command Palette,

37
00:01:33,824 --> 00:01:37,136
which I normally do using the keyboard shortcut,

38
00:01:37,136 --> 00:01:39,229
here you can search among all the

39
00:01:39,229 --> 00:01:41,132
possible operations available,

40
00:01:41,196 --> 00:01:43,561
and for Markdown there is "Open

41
00:01:43,561 --> 00:01:45,163
Preview to the Side".

42
00:01:45,239 --> 00:01:48,496
This will show another panel on the right side

43
00:01:48,496 --> 00:01:51,033
displaying the rendered Markdown.

44
00:01:51,033 --> 00:01:53,171
So we can edit our document, and

45
00:01:53,171 --> 00:01:55,041
see a preview straight away.

46
00:01:55,108 --> 00:01:57,831
We can write multiple paragraphs, simply

47
00:01:57,831 --> 00:02:00,417
by separating them with an empty line.

48
00:02:00,485 --> 00:02:02,441
You can also add headings,

49
00:02:02,525 --> 00:02:06,824
starting with a "#" symbol for a level 1 heading,

50
00:02:06,824 --> 00:02:10,948
or two "#" symbols for level 2, and so on.

51
00:02:10,948 --> 00:02:12,496
You can create a list,

52
00:02:12,888 --> 00:02:16,307
simply by putting an "*" before each item,

53
00:02:16,307 --> 00:02:19,271
and it will be rendered as bullet points.

54
00:02:19,271 --> 00:02:21,408
So, it's a good format for

55
00:02:21,408 --> 00:02:23,381
writing structured text.

56
00:02:23,463 --> 00:02:26,191
It's more readable than HTML,

57
00:02:26,191 --> 00:02:29,731
where you have lots of tags in angle brackets.

58
00:02:29,731 --> 00:02:32,954
And it allows us to keep the content separate

59
00:02:32,954 --> 00:02:34,959
from the final presentation,

60
00:02:35,031 --> 00:02:37,809
that will be done by our React component.

61
00:02:37,809 --> 00:02:39,812
So, the question now is:

62
00:02:39,812 --> 00:02:42,658
how can we read that Markdown file

63
00:02:42,658 --> 00:02:45,966
and use its content inside this component?

64
00:02:45,966 --> 00:02:49,374
If you remember from our section on Rendering,

65
00:02:49,374 --> 00:02:52,362
this is a React Server Component.

66
00:02:52,362 --> 00:02:54,905
That's the default with Next.js

67
00:02:54,905 --> 00:02:56,464
and the App Router.

68
00:02:56,546 --> 00:02:59,653
Unlike Client Components, a Server

69
00:02:59,653 --> 00:03:01,755
Component can be async.

70
00:03:01,846 --> 00:03:04,693
Since it's only rendered on the server,

71
00:03:04,693 --> 00:03:07,280
Next.js can wait for the Promise

72
00:03:07,280 --> 00:03:09,382
returned by this function,

73
00:03:09,462 --> 00:03:12,140
before generating the HTML that's

74
00:03:12,140 --> 00:03:13,763
sent to the browser.

75
00:03:13,844 --> 00:03:17,162
Another thing we can do in Server Components,

76
00:03:17,162 --> 00:03:20,318
is import server-side functionality,

77
00:03:20,318 --> 00:03:22,773
like the "readFile" function

78
00:03:22,861 --> 00:03:26,059
provided by the Node "fs" module.

79
00:03:26,059 --> 00:03:28,267
Let's use the "promises" variant,

80
00:03:28,267 --> 00:03:29,805
that's more convenient.

81
00:03:29,872 --> 00:03:33,380
"fs" stands for File System by the way.

82
00:03:33,380 --> 00:03:37,162
But the point is that we can use this "readFile"

83
00:03:37,162 --> 00:03:39,526
function inside our component.

84
00:03:39,605 --> 00:03:42,484
So, we can get the Markdown "text"

85
00:03:42,484 --> 00:03:45,363
by "awaiting" the "readFile" call.

86
00:03:45,448 --> 00:03:48,705
As argument we need to pass the file path,

87
00:03:48,705 --> 00:03:51,257
that is inside "content/reviews".

88
00:03:51,257 --> 00:03:53,742
So the path will be "./",

89
00:03:53,742 --> 00:03:56,048
which in this case means relative

90
00:03:56,048 --> 00:03:57,585
to the project folder,

91
00:03:57,655 --> 00:04:00,105
because when we run the "next

92
00:04:00,105 --> 00:04:02,471
dev" or "next build" command

93
00:04:02,555 --> 00:04:05,160
we do that inside the project folder,

94
00:04:05,160 --> 00:04:07,412
so that's the working directory.

95
00:04:07,482 --> 00:04:09,631
Anyway, the file path is

96
00:04:09,631 --> 00:04:13,655
"content/reviews/stardew-valley.md".

97
00:04:13,655 --> 00:04:16,598
That's the Markdown file we want to read.

98
00:04:16,598 --> 00:04:19,058
We also need to pass a second argument,

99
00:04:19,058 --> 00:04:21,524
that is the character encoding,

100
00:04:21,524 --> 00:04:23,196
and should be "utf8".

101
00:04:23,275 --> 00:04:26,668
Ok, so this way the "text" variable will

102
00:04:26,668 --> 00:04:29,721
contain what's in the Markdown file.

103
00:04:29,806 --> 00:04:32,731
Let's just display that "text" directly

104
00:04:32,731 --> 00:04:34,906
inside the paragraph for now.

105
00:04:34,981 --> 00:04:37,223
You can see its value in the page.

106
00:04:37,223 --> 00:04:40,695
Now, we should really convert the Markdown

107
00:04:40,695 --> 00:04:43,093
to HTML before displaying it,

108
00:04:43,175 --> 00:04:45,883
and in fact we'll do that in the next video.

109
00:04:45,883 --> 00:04:48,907
But this already shows that our component

110
00:04:48,907 --> 00:04:51,266
is displaying the data loaded

111
00:04:51,266 --> 00:04:53,219
from this Markdown file.

112
00:04:53,300 --> 00:04:55,852
And we're reading that file directly

113
00:04:55,852 --> 00:04:57,979
inside our component function.

114
00:04:58,050 --> 00:05:00,367
If you used React in the past,

115
00:05:00,367 --> 00:05:03,776
you'll know that normally this is not possible.

116
00:05:03,776 --> 00:05:07,439
It only works with React Server Components,

117
00:05:07,439 --> 00:05:10,449
because they are rendered only on the server,

118
00:05:10,449 --> 00:05:12,562
and therefore they can access

119
00:05:12,562 --> 00:05:14,384
Node.js built-in modules,

120
00:05:14,457 --> 00:05:16,373
and also be async.