1
00:00:00,000 --> 00:00:02,000
[Maximilian Schwarzmuller] So we're now fetching data

2
00:00:02,000 --> 00:00:07,000
directly on the server inside of the React Server Component,

3
00:00:07,000 --> 00:00:10,000
and that's better than doing it on the client side.

4
00:00:10,000 --> 00:00:13,000
But if you have a situation as we have it here,

5
00:00:13,000 --> 00:00:17,000
where you also own that separate backend

6
00:00:17,000 --> 00:00:19,000
that provides the data,

7
00:00:19,000 --> 00:00:24,000
you have to ask yourself why you split your application

8
00:00:24,000 --> 00:00:27,000
into two servers in the first place.

9
00:00:27,000 --> 00:00:31,000
Why do we have a separate backend server here?

10
00:00:31,000 --> 00:00:35,000
Why don't we instead directly reach out to the database

11
00:00:35,000 --> 00:00:38,000
from inside our Next.js application?

12
00:00:39,000 --> 00:00:43,000
And of course, there might be reasons for that extra server,

13
00:00:43,000 --> 00:00:45,000
but here in our demo, in this scenario,

14
00:00:45,000 --> 00:00:48,000
there is no such reason.

15
00:00:48,000 --> 00:00:49,000
And hence, as a next step,

16
00:00:49,000 --> 00:00:53,000
we can even get rid of this fetch call here

17
00:00:53,000 --> 00:00:56,000
and of sending this extra HTTP request,

18
00:00:56,000 --> 00:00:59,000
and instead move that database

19
00:00:59,000 --> 00:01:04,000
from that separate backend server into our Next.js project.

20
00:01:04,000 --> 00:01:06,000
So I'll just move that data.db file

21
00:01:06,000 --> 00:01:09,000
into this Next.js project

22
00:01:09,000 --> 00:01:12,000
and add some code to that Next.js project

23
00:01:12,000 --> 00:01:16,000
that does allow us to directly reach out to that database.

24
00:01:17,000 --> 00:01:20,000
For that, I'll stop that backend server,

25
00:01:20,000 --> 00:01:24,000
and then go back into my root Next.js project folder.

26
00:01:24,000 --> 00:01:26,000
And I'll start by adding an extra dependency

27
00:01:26,000 --> 00:01:30,000
that will allow us to reach out to that database.

28
00:01:30,000 --> 00:01:33,000
And that dependency is called better-sqlite3.

29
00:01:34,000 --> 00:01:37,000
That's a package that allows us to easily interact

30
00:01:37,000 --> 00:01:39,000
with a SQLite database,

31
00:01:39,000 --> 00:01:42,000
as we have it here with that data.db file.

32
00:01:44,000 --> 00:01:48,000
Then as a next step, I'll go to this lib folder,

33
00:01:48,000 --> 00:01:50,000
and there, the news.js file,

34
00:01:50,000 --> 00:01:53,000
where we're currently using the dummy news.

35
00:01:54,000 --> 00:01:55,000
And I'll keep that around for now

36
00:01:55,000 --> 00:01:58,000
so that the entire app doesn't break suddenly.

37
00:01:58,000 --> 00:02:02,000
But I'll also add a new import here,

38
00:02:02,000 --> 00:02:06,000
and I'll name it SQL and import this better-sqlite3 package.

39
00:02:07,000 --> 00:02:11,000
And then here, I'll initialize access to my database

40
00:02:11,000 --> 00:02:14,000
by creating a db variable or a constant,

41
00:02:14,000 --> 00:02:17,000
and by calling this SQL thing I'm importing

42
00:02:17,000 --> 00:02:19,000
from better-sqlite3.

43
00:02:19,000 --> 00:02:21,000
And then we pass a path

44
00:02:21,000 --> 00:02:25,000
to our database file seen from the root project folder

45
00:02:25,000 --> 00:02:27,000
to this function.

46
00:02:27,000 --> 00:02:30,000
So my database file is called data.db,

47
00:02:30,000 --> 00:02:32,000
so it's data.db which I add here.

48
00:02:33,000 --> 00:02:37,000
And yes, it's not in the same folder as the news.js folder,

49
00:02:37,000 --> 00:02:39,000
but here, you add a path

50
00:02:39,000 --> 00:02:41,000
that is relative to the root project folder,

51
00:02:41,000 --> 00:02:45,000
and data.db is stored in that root project folder.

52
00:02:46,000 --> 00:02:49,000
This will then give us access to that database.

53
00:02:49,000 --> 00:02:54,000
And now I'll start with this getAllNews function here.

54
00:02:54,000 --> 00:02:56,000
And instead of returning my dummy news here,

55
00:02:56,000 --> 00:03:00,000
I wanna return news that are fetched from that database.

56
00:03:01,000 --> 00:03:05,000
And for that, we can use that db constant here

57
00:03:05,000 --> 00:03:09,000
and call prepare to prepare a new SQL statement

58
00:03:09,000 --> 00:03:11,000
that should be executed,

59
00:03:11,000 --> 00:03:14,000
and simply select everything from news.

60
00:03:15,000 --> 00:03:17,000
And of course, you don't need to know SQL

61
00:03:17,000 --> 00:03:20,000
to follow along with this course.

62
00:03:20,000 --> 00:03:23,000
We'll just write some basic statements and commands here,

63
00:03:23,000 --> 00:03:26,000
and you can simply copy and paste them.

64
00:03:26,000 --> 00:03:28,000
You don't need to know SQL.

65
00:03:28,000 --> 00:03:30,000
Using it is, of course, absolutely optional

66
00:03:30,000 --> 00:03:32,000
when working with Next.js.

67
00:03:32,000 --> 00:03:33,000
And I'm just using it here

68
00:03:33,000 --> 00:03:38,000
because I chose to use SQLite as a demo database.

69
00:03:39,000 --> 00:03:41,000
Now, we then have to call the all method

70
00:03:41,000 --> 00:03:42,000
on this prepared statement

71
00:03:42,000 --> 00:03:47,000
to essentially return and store all the returned data

72
00:03:47,000 --> 00:03:49,000
in that news constant.

73
00:03:49,000 --> 00:03:51,000
So that will then be an array of news items

74
00:03:51,000 --> 00:03:53,000
that are fetched from that database.

75
00:03:55,000 --> 00:03:57,000
And these news items will have the same structure

76
00:03:57,000 --> 00:04:01,000
as the news we had in the dummy news constant,

77
00:04:01,000 --> 00:04:04,000
because in that backend code where I had the code

78
00:04:04,000 --> 00:04:06,000
for initializing that database,

79
00:04:06,000 --> 00:04:09,000
I made sure that the same structure was set up there.

80
00:04:11,000 --> 00:04:12,000
So with that, I'm getting all the news,

81
00:04:12,000 --> 00:04:14,000
and now we can return them

82
00:04:14,000 --> 00:04:19,000
because the nice thing about this better-sqlite3 package

83
00:04:19,000 --> 00:04:23,000
is that it's actually giving us asynchronous API.

84
00:04:23,000 --> 00:04:26,000
So this does not even yield a promise

85
00:04:26,000 --> 00:04:27,000
which we have to await.

86
00:04:27,000 --> 00:04:30,000
Instead, we can just execute the code like this

87
00:04:30,000 --> 00:04:33,000
and will instantly get the news that were fetched,

88
00:04:33,000 --> 00:04:34,000
which of course is pretty convenient

89
00:04:34,000 --> 00:04:38,000
because that means that this is all we have to do here

90
00:04:38,000 --> 00:04:39,000
in order to fetch our news.

91
00:04:41,000 --> 00:04:45,000
And in page.js where we need those news,

92
00:04:45,000 --> 00:04:49,000
we can now get rid of all this data fetching code here,

93
00:04:49,000 --> 00:04:52,000
and instead just get our news by calling getAllNews,

94
00:04:52,000 --> 00:04:55,000
which is imported from that news file.

95
00:04:57,000 --> 00:04:59,000
And if we now save that,

96
00:04:59,000 --> 00:05:01,000
and we reload,

97
00:05:01,000 --> 00:05:04,000
boom, our news are there again.

98
00:05:04,000 --> 00:05:06,000
And of course, hopefully, unsurprisingly,

99
00:05:06,000 --> 00:05:09,000
they are there in the code that was rendered

100
00:05:09,000 --> 00:05:10,000
on the server as well.

101
00:05:10,000 --> 00:05:13,000
And now we skip that extra backend

102
00:05:13,000 --> 00:05:16,000
and that extra HTTP round-trip.

103
00:05:16,000 --> 00:05:20,000
And instead, we directly fetch data from the data source,

104
00:05:20,000 --> 00:05:22,000
which in this case is a database,

105
00:05:22,000 --> 00:05:25,000
but which could also be a file or whatever.

106
00:05:25,000 --> 00:05:27,000
And we directly fetch data from there

107
00:05:27,000 --> 00:05:29,000
and use that in our components.

108
00:05:29,000 --> 00:05:32,000
And that's, of course, a really nice feature

109
00:05:32,000 --> 00:05:34,000
which we can only use

110
00:05:34,000 --> 00:05:37,000
because we have those React Server Components,

111
00:05:37,000 --> 00:05:41,000
because that database, of course, lives on our server.

112
00:05:41,000 --> 00:05:45,000
This code would not work on the client side

113
00:05:45,000 --> 00:05:47,000
because the client side doesn't have access

114
00:05:47,000 --> 00:05:48,000
to that database.

115
00:05:48,000 --> 00:05:51,000
And it shouldn't for security reasons.

116
00:05:51,000 --> 00:05:54,000
But since we're in the React Server Component,

117
00:05:54,000 --> 00:05:59,000
this code will only ever execute on the server,

118
00:05:59,000 --> 00:06:00,000
unlike client components

119
00:06:00,000 --> 00:06:02,000
which also execute on the client.

120
00:06:02,000 --> 00:06:05,000
But this code only executes on the server,

121
00:06:05,000 --> 00:06:08,000
and therefore we can safely reach out

122
00:06:08,000 --> 00:06:12,000
to that server site database and get our data from there.