1
00:00:01,000 --> 00:00:03,000
Now when it comes to loading data

2
00:00:03,000 --> 00:00:05,000
in a NextJS application,

3
00:00:05,000 --> 00:00:08,000
we get a couple of different options.

4
00:00:08,000 --> 00:00:10,000
We could fetch the data

5
00:00:10,000 --> 00:00:15,000
as we would do it in any vanilla React application.

6
00:00:15,000 --> 00:00:19,000
We could, for example, use the useEffect hook like this,

7
00:00:19,000 --> 00:00:22,000
and then in there use the fetch function

8
00:00:22,000 --> 00:00:25,000
to send a request to a backend.

9
00:00:25,000 --> 00:00:27,000
And on that backend, we could then reach out

10
00:00:27,000 --> 00:00:30,000
to that database, which we just set up

11
00:00:30,000 --> 00:00:31,000
and get the data from here.

12
00:00:32,000 --> 00:00:35,000
Now, in a NextJS application,

13
00:00:35,000 --> 00:00:37,000
we actually already have a backend.

14
00:00:37,000 --> 00:00:40,000
We have backend and frontend combined,

15
00:00:40,000 --> 00:00:43,000
blended seamlessly together.

16
00:00:43,000 --> 00:00:45,000
So we don't need a separate backend.

17
00:00:46,000 --> 00:00:50,000
And as you also learned in NextJS, all your components are

18
00:00:50,000 --> 00:00:55,000
by default server components that only execute on the server

19
00:00:55,000 --> 00:00:58,000
unless you're using a feature that requires them

20
00:00:58,000 --> 00:01:02,000
to be a client component like useEffect.

21
00:01:02,000 --> 00:01:05,000
But actually, because we have those server components

22
00:01:05,000 --> 00:01:08,000
as a default, we don't need useEffect

23
00:01:08,000 --> 00:01:12,000
and we don't need to send a fetch request to get data.

24
00:01:12,000 --> 00:01:15,000
Instead, since this component by default runs on the server

25
00:01:15,000 --> 00:01:19,000
and only there, we can directly reach out

26
00:01:19,000 --> 00:01:21,000
to the database from here.

27
00:01:21,000 --> 00:01:24,000
And that's definitely not something you're used

28
00:01:24,000 --> 00:01:26,000
to from other React apps.

29
00:01:26,000 --> 00:01:30,000
But that's absolutely fine in Next apps

30
00:01:30,000 --> 00:01:32,000
because this is a server component

31
00:01:32,000 --> 00:01:34,000
that only runs on the server.

32
00:01:34,000 --> 00:01:37,000
So reaching out to a database is safe here.

33
00:01:39,000 --> 00:01:42,000
Now, in order to keep things separated,

34
00:01:42,000 --> 00:01:44,000
I'll not write my code in here though.

35
00:01:44,000 --> 00:01:49,000
Instead, I'll add a new folder in my root project folder,

36
00:01:49,000 --> 00:01:53,000
which I'll name lib, though that name is up to you

37
00:01:53,000 --> 00:01:55,000
and not some kind of reserved name.

38
00:01:56,000 --> 00:02:01,000
But in there I'll add a new file, which I'll name meals.js.

39
00:02:01,000 --> 00:02:05,000
And in here I wanna write the code that reaches out

40
00:02:05,000 --> 00:02:09,000
to a database and gets data from that database.

41
00:02:09,000 --> 00:02:10,000
For that in here,

42
00:02:10,000 --> 00:02:15,000
I'll import SQL from this better SQLite three package.

43
00:02:15,000 --> 00:02:17,000
And I'll then establish the database connection

44
00:02:17,000 --> 00:02:20,000
by executing SQL as a function

45
00:02:20,000 --> 00:02:23,000
and then passing the name of the database here

46
00:02:23,000 --> 00:02:25,000
as a string to that function.

47
00:02:26,000 --> 00:02:28,000
And then we can work on this DB object

48
00:02:28,000 --> 00:02:31,000
to perform actions on that database.

49
00:02:33,000 --> 00:02:37,000
Now for that, I'll add a new exported function here,

50
00:02:37,000 --> 00:02:40,000
which I'll name getMeals,

51
00:02:40,000 --> 00:02:42,000
which should do what the name implies.

52
00:02:42,000 --> 00:02:45,000
It should get all the meals from that database.

53
00:02:46,000 --> 00:02:49,000
And for that we can now use this DB object

54
00:02:50,000 --> 00:02:55,000
and then prepare a new statement, a new SQL statement

55
00:02:55,000 --> 00:02:56,000
that should be executed.

56
00:02:57,000 --> 00:02:59,000
And here it's a pretty simple statement.

57
00:02:59,000 --> 00:03:04,000
I want to select all columns from the meals table.

58
00:03:07,000 --> 00:03:10,000
Then we just have to run this though,

59
00:03:10,000 --> 00:03:14,000
you actually don't do that with the run method here,

60
00:03:14,000 --> 00:03:15,000
but with the all method.

61
00:03:16,000 --> 00:03:19,000
Run would be used if you were inserting data,

62
00:03:19,000 --> 00:03:22,000
for example, if you were changing data,

63
00:03:22,000 --> 00:03:24,000
all is used if you are fetching data

64
00:03:24,000 --> 00:03:26,000
and you want to get back all the rows

65
00:03:26,000 --> 00:03:28,000
that are fetched by that statement.

66
00:03:30,000 --> 00:03:33,000
If you were looking for a single row,

67
00:03:33,000 --> 00:03:35,000
you could use get instead.

68
00:03:35,000 --> 00:03:38,000
But here it's multiple rows, so it's all,

69
00:03:39,000 --> 00:03:42,000
and then we just have to return this result.

70
00:03:42,000 --> 00:03:45,000
This also doesn't yield a promise or anything like that.

71
00:03:45,000 --> 00:03:48,000
Instead, you can just return it like this.

72
00:03:48,000 --> 00:03:51,000
But speaking of promises, it's worth knowing

73
00:03:51,000 --> 00:03:54,000
and understanding that even though we're not working

74
00:03:54,000 --> 00:03:55,000
with promises here

75
00:03:55,000 --> 00:03:59,000
because the better SQLite three package doesn't use them,

76
00:03:59,000 --> 00:04:01,000
even though we're not using them here,

77
00:04:01,000 --> 00:04:04,000
we could use them in our component here with ease

78
00:04:04,000 --> 00:04:08,000
because server component functions can actually be converted

79
00:04:08,000 --> 00:04:10,000
to async functions.

80
00:04:10,000 --> 00:04:13,000
You can use the async keyword here,

81
00:04:13,000 --> 00:04:16,000
something you normally also can't do

82
00:04:16,000 --> 00:04:18,000
on your React components,

83
00:04:18,000 --> 00:04:21,000
but you can do it on server components.

84
00:04:21,000 --> 00:04:24,000
And if you then had some code that would use a promise,

85
00:04:24,000 --> 00:04:26,000
you could use await here.

86
00:04:27,000 --> 00:04:31,000
And to simulate this, I'll actually go back to Meals.js

87
00:04:31,000 --> 00:04:35,000
and turn, getMeals into async function,

88
00:04:35,000 --> 00:04:37,000
and therefore, it will return a promise

89
00:04:37,000 --> 00:04:41,000
even though this code here doesn't normally produce one,

90
00:04:41,000 --> 00:04:43,000
but now it will be wrapped into a promise,

91
00:04:43,000 --> 00:04:45,000
that is what async does.

92
00:04:45,000 --> 00:04:48,000
And I'll actually await another promise here,

93
00:04:48,000 --> 00:04:51,000
which simply adds an arbitrary delay,

94
00:04:51,000 --> 00:04:55,000
just to simulate an action that takes a bit longer,

95
00:04:55,000 --> 00:04:58,000
which is something that will help us later once we explore

96
00:04:58,000 --> 00:05:01,000
how we can handle loading states and so on

97
00:05:01,000 --> 00:05:03,000
in Next applications.

98
00:05:03,000 --> 00:05:06,000
And this is of course not code you would normally add

99
00:05:06,000 --> 00:05:09,000
because you would not want to slow things down,

100
00:05:09,000 --> 00:05:12,000
but here for this demo app, I'll add it

101
00:05:12,000 --> 00:05:14,000
to add this extra delay.

102
00:05:14,000 --> 00:05:16,000
And this also allows me to show you

103
00:05:16,000 --> 00:05:19,000
that you can use async await here, of course,

104
00:05:19,000 --> 00:05:21,000
because it's a regular function,

105
00:05:21,000 --> 00:05:25,000
but you can also use it here in this component function.

106
00:05:25,000 --> 00:05:28,000
And that's not something you can normally do in React,

107
00:05:28,000 --> 00:05:32,000
but you can do it with server components.

108
00:05:32,000 --> 00:05:36,000
So here we can then await the call to get meals,

109
00:05:36,000 --> 00:05:38,000
to get the meals data,

110
00:05:38,000 --> 00:05:42,000
and we'll get back our meals here just like

111
00:05:42,000 --> 00:05:43,000
that without useEffect,

112
00:05:43,000 --> 00:05:47,000
without any unnecessary fetch request being sent.

113
00:05:48,000 --> 00:05:49,000
And with that done, we can

114
00:05:49,000 --> 00:05:52,000
therefore then use these meals down here

115
00:05:52,000 --> 00:05:54,000
where we have that MealsGrid.

116
00:05:54,000 --> 00:05:58,000
We can simply pass meals to MealsGrid.

117
00:05:59,000 --> 00:06:02,000
And with all that done, if you save everything

118
00:06:02,000 --> 00:06:07,000
and you restart that development server, you should be able

119
00:06:07,000 --> 00:06:12,000
to reload this meals page and see all those meals here.

120
00:06:13,000 --> 00:06:16,000
Now, just a brief note, at this point,

121
00:06:16,000 --> 00:06:19,000
I had a tiny error in my styles when I recorded

122
00:06:19,000 --> 00:06:22,000
these videos, which is why for me,

123
00:06:22,000 --> 00:06:25,000
the meals look the way they do on the screen.

124
00:06:26,000 --> 00:06:28,000
For you, they should look like this

125
00:06:28,000 --> 00:06:32,000
because I fixed that styling error in the attachment.

126
00:06:32,000 --> 00:06:34,000
Now, besides that, nothing changes.

127
00:06:34,000 --> 00:06:36,000
It was just a styling error.

128
00:06:36,000 --> 00:06:38,000
I just wanted to mention it here so

129
00:06:38,000 --> 00:06:41,000
that you're not wondering why you have

130
00:06:41,000 --> 00:06:44,000
those extra titles here and I don't have them.

131
00:06:46,000 --> 00:06:49,000
Now navigating to their details will work,

132
00:06:49,000 --> 00:06:51,000
but will not show you anything of course,

133
00:06:51,000 --> 00:06:53,000
because we haven't added that logic.

134
00:06:53,000 --> 00:06:55,000
But you can see those meals here,

135
00:06:55,000 --> 00:06:58,000
and that's now data being fetched from the databases

136
00:06:58,000 --> 00:07:01,000
and images being fetched from that public folder

137
00:07:01,000 --> 00:07:04,000
because that's where we're storing them.

138
00:07:04,000 --> 00:07:06,000
And that's in the end where the paths

139
00:07:06,000 --> 00:07:09,000
that are stored in the database will point to,

140
00:07:09,000 --> 00:07:12,000
and those images work the way they do

141
00:07:12,000 --> 00:07:15,000
because of that setup we got in that meal item JS file.