1
00:00:00,000 --> 00:00:02,000
[Maximilian Schwarzmuller] So we got this backend API,

2
00:00:02,000 --> 00:00:04,000
and in order to use it,

3
00:00:04,000 --> 00:00:08,000
we now have to start this backend API web server.

4
00:00:08,000 --> 00:00:12,000
Because again, it is a separate server, a separate project,

5
00:00:12,000 --> 00:00:16,000
just integrated into this NextJS project folder

6
00:00:16,000 --> 00:00:18,000
for simplicity reasons.

7
00:00:18,000 --> 00:00:20,000
So in your terminal,

8
00:00:20,000 --> 00:00:22,000
you should make sure that you're in that backend folder,

9
00:00:22,000 --> 00:00:25,000
that you navigated there with the cd command,

10
00:00:25,000 --> 00:00:28,000
and then you should run npm start

11
00:00:28,000 --> 00:00:32,000
to start that backend server and keep that up and running.

12
00:00:33,000 --> 00:00:36,000
And then in a separate terminal window,

13
00:00:36,000 --> 00:00:38,000
in a separate command-line window,

14
00:00:38,000 --> 00:00:42,000
you should navigate into the root project folder.

15
00:00:42,000 --> 00:00:43,000
And then there,

16
00:00:43,000 --> 00:00:47,000
run npm run dev to also start the NextJS server,

17
00:00:47,000 --> 00:00:51,000
so that both servers are up and running.

18
00:00:51,000 --> 00:00:55,000
The NextJS app is still served under this address here

19
00:00:55,000 --> 00:00:58,000
and the backend application will be served

20
00:00:58,000 --> 00:00:59,000
under localhost 8080.

21
00:01:00,000 --> 00:01:01,000
And with that,

22
00:01:01,000 --> 00:01:05,000
we can therefore now adjust our NextJS code

23
00:01:05,000 --> 00:01:07,000
to fetch the news from the backend,

24
00:01:07,000 --> 00:01:11,000
and the question now is how we would do that.

25
00:01:12,000 --> 00:01:17,000
Now, one way of fetching data from a backend,

26
00:01:17,000 --> 00:01:20,000
from a separate API in a NextJS app,

27
00:01:20,000 --> 00:01:22,000
like in any other React app,

28
00:01:22,000 --> 00:01:25,000
would be to do it on the client-side.

29
00:01:25,000 --> 00:01:28,000
So here in the content route group,

30
00:01:28,000 --> 00:01:32,000
on the news page, for example, where we need our news,

31
00:01:32,000 --> 00:01:34,000
instead of importing the Dummy_News

32
00:01:34,000 --> 00:01:36,000
from the dummy-news file,

33
00:01:36,000 --> 00:01:39,000
which we now assume doesn't exist anymore.

34
00:01:39,000 --> 00:01:40,000
And instead now,

35
00:01:40,000 --> 00:01:43,000
we're simulating that we have a real backend

36
00:01:43,000 --> 00:01:46,000
with a real database that contains all that data.

37
00:01:46,000 --> 00:01:50,000
So instead of using that Dummy_News from that file,

38
00:01:50,000 --> 00:01:52,000
the goal now is to fetch the data from the backend.

39
00:01:53,000 --> 00:01:57,000
And we could do that here in that NewsPage component

40
00:01:57,000 --> 00:02:02,000
by using the fetch function that's built into the browser.

41
00:02:02,000 --> 00:02:03,000
And we could use that function

42
00:02:03,000 --> 00:02:05,000
with help of the useEffect Hook,

43
00:02:05,000 --> 00:02:09,000
which is how you typically would send requests

44
00:02:09,000 --> 00:02:10,000
and handle side effects like,

45
00:02:10,000 --> 00:02:14,000
such as HTTP request in React apps.

46
00:02:14,000 --> 00:02:17,000
And you do learn about that in my separate React course,

47
00:02:17,000 --> 00:02:19,000
for example.

48
00:02:19,000 --> 00:02:23,000
Alternatively, we could also use a third-party library

49
00:02:23,000 --> 00:02:27,000
like TanStack Query, which I also cover in my React course,

50
00:02:27,000 --> 00:02:30,000
to fetch data from some backend,

51
00:02:30,000 --> 00:02:33,000
and this package would then make this process

52
00:02:33,000 --> 00:02:36,000
of fetching data and also caching data

53
00:02:36,000 --> 00:02:38,000
and so on a bit simpler.

54
00:02:38,000 --> 00:02:40,000
But to keep the code simple here,

55
00:02:40,000 --> 00:02:41,000
I will actually use

56
00:02:41,000 --> 00:02:44,000
the standard built-in fetch function here inside

57
00:02:44,000 --> 00:02:47,000
of a useEffect function, like this,

58
00:02:47,000 --> 00:02:50,000
to fetch data from a backend.

59
00:02:50,000 --> 00:02:55,000
And then we can send a request to localhost 8080,

60
00:02:55,000 --> 00:02:56,000
which is the address

61
00:02:56,000 --> 00:02:59,000
of that separate backend server we started a couple

62
00:02:59,000 --> 00:03:00,000
of minutes ago.

63
00:03:00,000 --> 00:03:03,000
And then this will give us back a Promise.

64
00:03:03,000 --> 00:03:06,000
Now, it's not considered a good practice

65
00:03:06,000 --> 00:03:09,000
to decorate this effect function with async

66
00:03:09,000 --> 00:03:12,000
in order to use async/await, and therefore,

67
00:03:12,000 --> 00:03:14,000
I'll create a separate function in there, fetchNews,

68
00:03:16,000 --> 00:03:18,000
and move the fetch function in there,

69
00:03:18,000 --> 00:03:20,000
and decorate that with async

70
00:03:20,000 --> 00:03:22,000
so that we then can use await here.

71
00:03:22,000 --> 00:03:25,000
And then outside of this function

72
00:03:25,000 --> 00:03:27,000
but still inside of the effect function,

73
00:03:27,000 --> 00:03:30,000
we can call fetchNews to trigger this request.

74
00:03:33,000 --> 00:03:35,000
Now what we'll get back is a response

75
00:03:36,000 --> 00:03:38,000
and that response, of course, might fail.

76
00:03:38,000 --> 00:03:40,000
So we could check if (!response.ok),

77
00:03:41,000 --> 00:03:44,000
so if we got an error or status code,

78
00:03:44,000 --> 00:03:48,000
in which case we might want to update some error or state

79
00:03:48,000 --> 00:03:50,000
so that we can show some error message here.

80
00:03:51,000 --> 00:03:54,000
So we can add the useStatus Hook here

81
00:03:54,000 --> 00:03:56,000
to the NewsPage component,

82
00:03:57,000 --> 00:04:00,000
and then manage some error state here

83
00:04:00,000 --> 00:04:03,000
and set the error

84
00:04:03,000 --> 00:04:06,000
if we got an erroneous response,

85
00:04:06,000 --> 00:04:08,000
and maybe set this to a error message

86
00:04:08,000 --> 00:04:12,000
like Failed to fetch news or something like this.

87
00:04:14,000 --> 00:04:17,000
If we make it past this,

88
00:04:17,000 --> 00:04:20,000
we also might want to show some loading state

89
00:04:20,000 --> 00:04:21,000
whilst we're fetching,

90
00:04:21,000 --> 00:04:24,000
so therefore, we could also add another state here,

91
00:04:26,000 --> 00:04:27,000
isLoading state,

92
00:04:29,000 --> 00:04:33,000
which we wanna set to true

93
00:04:34,000 --> 00:04:37,000
before we start sending that request.

94
00:04:37,000 --> 00:04:39,000
And maybe set it to false initially here.

95
00:04:40,000 --> 00:04:44,000
But if we got an error, we wanna set it to false again

96
00:04:44,000 --> 00:04:46,000
because even though we have an error,

97
00:04:46,000 --> 00:04:49,000
we're not loading data anymore.

98
00:04:49,000 --> 00:04:51,000
And of course, if we make it past this if check,

99
00:04:51,000 --> 00:04:55,000
we will have our news and we're also not loading anymore.

100
00:04:55,000 --> 00:04:59,000
So here we also might want to set setIsLoading to false,

101
00:04:59,000 --> 00:05:03,000
and then introduce a third state into this component,

102
00:05:05,000 --> 00:05:09,000
a news state with a setNews updating function

103
00:05:09,000 --> 00:05:14,000
where we then set our news to the response data.

104
00:05:14,000 --> 00:05:17,000
And actually that data must be parsed first,

105
00:05:17,000 --> 00:05:20,000
so our news from the backend can be retrieved

106
00:05:20,000 --> 00:05:22,000
by calling response.json,

107
00:05:22,000 --> 00:05:24,000
and that will give us a Promise which we need to await.

108
00:05:24,000 --> 00:05:28,000
So it's then those parsed news which we wanna set

109
00:05:28,000 --> 00:05:31,000
as our news state in that component.

110
00:05:33,000 --> 00:05:35,000
And with that, we would be sending a request

111
00:05:35,000 --> 00:05:37,000
and handle those different states.

112
00:05:37,000 --> 00:05:40,000
And now of course, we should use these different states

113
00:05:40,000 --> 00:05:42,000
to update the UI.

114
00:05:42,000 --> 00:05:47,000
For example, we can check if we're loading,

115
00:05:47,000 --> 00:05:47,000
and in that case,

116
00:05:47,000 --> 00:05:52,000
we might want to return a simple loading fallback like this.

117
00:05:54,000 --> 00:05:58,000
If we have an error, so if that is truthy,

118
00:05:58,000 --> 00:06:01,000
we might wanna return the error message

119
00:06:01,000 --> 00:06:03,000
on the screen and show that.

120
00:06:04,000 --> 00:06:07,000
And only if you make it past these two if checks,

121
00:06:07,000 --> 00:06:10,000
only in that case, we wanna output the news,

122
00:06:10,000 --> 00:06:14,000
though news might be undefined initially,

123
00:06:14,000 --> 00:06:17,000
because initially there is no news state here,

124
00:06:17,000 --> 00:06:19,000
and therefore we should also check

125
00:06:19,000 --> 00:06:21,000
whether we really have some news.

126
00:06:21,000 --> 00:06:26,000
So the newsContent here initially is undefined,

127
00:06:27,000 --> 00:06:29,000
and then we check if we have news,

128
00:06:29,000 --> 00:06:32,000
in which case I'll set the newsContent variable

129
00:06:32,000 --> 00:06:34,000
to that NewsList,

130
00:06:34,000 --> 00:06:37,000
to which I passed the news, which I now know exist.

131
00:06:39,000 --> 00:06:41,000
And down here, we output the newsContent,

132
00:06:41,000 --> 00:06:45,000
which is either nothing or that NewsList here.

133
00:06:47,000 --> 00:06:51,000
And that is how we could fetch the data

134
00:06:51,000 --> 00:06:55,000
in our NextJS application when we have a separate backend,

135
00:06:55,000 --> 00:06:56,000
because of course,

136
00:06:56,000 --> 00:07:00,000
that is how we could fetch data in any React application,

137
00:07:00,000 --> 00:07:02,000
and NextJS is no exception.

138
00:07:03,000 --> 00:07:05,000
So with all that code added,

139
00:07:05,000 --> 00:07:07,000
if we reload on that news page,

140
00:07:07,000 --> 00:07:11,000
we get an error that we're using useEffect

141
00:07:11,000 --> 00:07:15,000
and that this only works in Client Components,

142
00:07:15,000 --> 00:07:19,000
because indeed the useEffect Hook is a hook that needs

143
00:07:19,000 --> 00:07:21,000
to run on the client-side.

144
00:07:21,000 --> 00:07:25,000
So therefore, we should add the use client directive here,

145
00:07:25,000 --> 00:07:29,000
which of course is already a small disadvantage

146
00:07:29,000 --> 00:07:33,000
to what we had before when this was a Server Component,

147
00:07:33,000 --> 00:07:37,000
because now it's not a pure Server Component.

148
00:07:37,000 --> 00:07:38,000
And therefore,

149
00:07:38,000 --> 00:07:41,000
we have to execute some code on the client-side,

150
00:07:41,000 --> 00:07:43,000
which is not always a big problem,

151
00:07:43,000 --> 00:07:46,000
but which is less ideal than running all the code

152
00:07:46,000 --> 00:07:47,000
on the server-side.

153
00:07:48,000 --> 00:07:51,000
With that though, if we save that and we reload,

154
00:07:51,000 --> 00:07:53,000
I get an error here.

155
00:07:53,000 --> 00:07:56,000
So this error fallback is shown

156
00:07:56,000 --> 00:07:59,000
because in the end I got a 404 error.

157
00:07:59,000 --> 00:08:00,000
The reason for that simply

158
00:08:00,000 --> 00:08:05,000
is that I'm sending my request just to the backend domain,

159
00:08:05,000 --> 00:08:10,000
but if we take a look at the backend code here,

160
00:08:10,000 --> 00:08:13,000
we can actually see that it is /news

161
00:08:13,000 --> 00:08:15,000
to which we should send the request.

162
00:08:16,000 --> 00:08:18,000
So therefore, we should adjust this

163
00:08:18,000 --> 00:08:19,000
and send it to /news.

164
00:08:21,000 --> 00:08:24,000
And with that done, if we reload,

165
00:08:24,000 --> 00:08:28,000
you can see the news are popping in.

166
00:08:28,000 --> 00:08:31,000
And that's therefore one way of loading data

167
00:08:31,000 --> 00:08:33,000
in a NextJS application.

168
00:08:33,000 --> 00:08:34,000
And of course,

169
00:08:34,000 --> 00:08:38,000
it is a way that we could use in any React application,

170
00:08:38,000 --> 00:08:39,000
and therefore,

171
00:08:39,000 --> 00:08:43,000
it's a generally absolutely fine way of loading data.

172
00:08:43,000 --> 00:08:47,000
But it's not the best way of loading data

173
00:08:47,000 --> 00:08:48,000
when using NextJS.