[Maximilian Schwarzmuller] So we got this backend API,
and in order to use it,
we now have to start this backend API web server.
Because again, it is a separate server, a separate project,
just integrated into this NextJS project folder
for simplicity reasons.
So in your terminal,
you should make sure that you're in that backend folder,
that you navigated there with the cd command,
and then you should run npm start
to start that backend server and keep that up and running.
And then in a separate terminal window,
in a separate command-line window,
you should navigate into the root project folder.
And then there,
run npm run dev to also start the NextJS server,
so that both servers are up and running.
The NextJS app is still served under this address here
and the backend application will be served
under localhost 8080.
And with that,
we can therefore now adjust our NextJS code
to fetch the news from the backend,
and the question now is how we would do that.
Now, one way of fetching data from a backend,
from a separate API in a NextJS app,
like in any other React app,
would be to do it on the client-side.
So here in the content route group,
on the news page, for example, where we need our news,
instead of importing the Dummy_News
from the dummy-news file,
which we now assume doesn't exist anymore.
And instead now,
we're simulating that we have a real backend
with a real database that contains all that data.
So instead of using that Dummy_News from that file,
the goal now is to fetch the data from the backend.
And we could do that here in that NewsPage component
by using the fetch function that's built into the browser.
And we could use that function
with help of the useEffect Hook,
which is how you typically would send requests
and handle side effects like,
such as HTTP request in React apps.
And you do learn about that in my separate React course,
for example.
Alternatively, we could also use a third-party library
like TanStack Query, which I also cover in my React course,
to fetch data from some backend,
and this package would then make this process
of fetching data and also caching data
and so on a bit simpler.
But to keep the code simple here,
I will actually use
the standard built-in fetch function here inside
of a useEffect function, like this,
to fetch data from a backend.
And then we can send a request to localhost 8080,
which is the address
of that separate backend server we started a couple
of minutes ago.
And then this will give us back a Promise.
Now, it's not considered a good practice
to decorate this effect function with async
in order to use async/await, and therefore,
I'll create a separate function in there, fetchNews,
and move the fetch function in there,
and decorate that with async
so that we then can use await here.
And then outside of this function
but still inside of the effect function,
we can call fetchNews to trigger this request.
Now what we'll get back is a response
and that response, of course, might fail.
So we could check if (!response.ok),
so if we got an error or status code,
in which case we might want to update some error or state
so that we can show some error message here.
So we can add the useStatus Hook here
to the NewsPage component,
and then manage some error state here
and set the error
if we got an erroneous response,
and maybe set this to a error message
like Failed to fetch news or something like this.
If we make it past this,
we also might want to show some loading state
whilst we're fetching,
so therefore, we could also add another state here,
isLoading state,
which we wanna set to true
before we start sending that request.
And maybe set it to false initially here.
But if we got an error, we wanna set it to false again
because even though we have an error,
we're not loading data anymore.
And of course, if we make it past this if check,
we will have our news and we're also not loading anymore.
So here we also might want to set setIsLoading to false,
and then introduce a third state into this component,
a news state with a setNews updating function
where we then set our news to the response data.
And actually that data must be parsed first,
so our news from the backend can be retrieved
by calling response.json,
and that will give us a Promise which we need to await.
So it's then those parsed news which we wanna set
as our news state in that component.
And with that, we would be sending a request
and handle those different states.
And now of course, we should use these different states
to update the UI.
For example, we can check if we're loading,
and in that case,
we might want to return a simple loading fallback like this.
If we have an error, so if that is truthy,
we might wanna return the error message
on the screen and show that.
And only if you make it past these two if checks,
only in that case, we wanna output the news,
though news might be undefined initially,
because initially there is no news state here,
and therefore we should also check
whether we really have some news.
So the newsContent here initially is undefined,
and then we check if we have news,
in which case I'll set the newsContent variable
to that NewsList,
to which I passed the news, which I now know exist.
And down here, we output the newsContent,
which is either nothing or that NewsList here.
And that is how we could fetch the data
in our NextJS application when we have a separate backend,
because of course,
that is how we could fetch data in any React application,
and NextJS is no exception.
So with all that code added,
if we reload on that news page,
we get an error that we're using useEffect
and that this only works in Client Components,
because indeed the useEffect Hook is a hook that needs
to run on the client-side.
So therefore, we should add the use client directive here,
which of course is already a small disadvantage
to what we had before when this was a Server Component,
because now it's not a pure Server Component.
And therefore,
we have to execute some code on the client-side,
which is not always a big problem,
but which is less ideal than running all the code
on the server-side.
With that though, if we save that and we reload,
I get an error here.
So this error fallback is shown
because in the end I got a 404 error.
The reason for that simply
is that I'm sending my request just to the backend domain,
but if we take a look at the backend code here,
we can actually see that it is /news
to which we should send the request.
So therefore, we should adjust this
and send it to /news.
And with that done, if we reload,
you can see the news are popping in.
And that's therefore one way of loading data
in a NextJS application.
And of course,
it is a way that we could use in any React application,
and therefore,
it's a generally absolutely fine way of loading data.
But it's not the best way of loading data
when using NextJS.