So in the previous lecture,
we used client site data fetching to load the news data.
And as a result, if you go to the news page
and you inspect the source code,
you will see that in there, you see a lot of content,
but you won't see the actual news content here.
If we search for Beaver,
which is part of one of the news headlines,
we don't have any match in here,
because the content that's generated on the server,
the page content that's generated there
does not include those news
because we fetch them on the client side
with help of useEffect.
Now, as you see, of course, that works,
but as I mentioned at the end of the last lecture already,
this is not the best way of fetching data when using NextJS
because even though that is
how you can fetch data in any React app,
NextJS offers better ways of fetching data,
because in NextJS, all those components,
including all those page components
as you learned by default, are React server components.
So React components that are meant to execute on the server.
And as it turns out,
those React server components
got some nice tricks up their sleeve.
Most importantly, you can fetch data
directly inside of them and decorate the component functions
with async in order to use async/await.
So put in other words,
React server components can return promises
instead of just JSX,
and that's something traditional client side
React components can't do.
But React server components can do that.
And since NextJS supports them,
you can therefore fetch data directly inside
of those components when working with NextJS.
Therefore, what we can do here
is get rid of that use client directive again,
to convert this back to a server component,
get rid of useEffect here,
and move this code here
where we sent that request out of the fetch news function
directly into the component function.
We can and should now also get rid of all these states
and of all that code here
that updates those different states.
I'll just keep this line of code
where I parse the response data,
but I'll get rid of all that other code.
That of course,
also means that I'll get rid of these if checks
and I'll show you how to still show error
and loading fallbacks a little bit later.
For now, we'll get rid of that.
So now we have much simpler code here
and we're sending that request
from directly inside the component function,
since it's such a server component.
It's worth noting that this fetch function
is available here, even though that code runs on the server
because A, it's supported by Node.js
which executes that server side code anyways.
And B, NextJS extends this fetch function
and adds some extra caching related features to it,
though that's not too important here.
We'll take a closer look at caching
and what NextJS does for you in the next course sections.
So for now, it's just important to understand
that you can use fetch
directly inside of a component function.
Of course, now we can and should also remove the useEffect
and useState imports.
Now the request could still fail,
so I still wanna check if not response okay,
and in that case, I'll just throw a new error
where I'll say, failed to fetch news,
and we'll handle that error a little bit later.
For the moment, let's focus on outputting the news.
How would that work?
Well, we don't need to check whether they're defined or not
because now since we have a async component,
we wait until the response data is there anyways.
No JSX code gets generated before that data is there.
So we won't have a scenario where news is undefined
unless the backend returns undefined,
which my dummy backend here doesn't do though.
It always returns this array of news.
So therefore, this check is not required anymore.
And hence, we can again move that news list component
down into the returned JSX code
and get rid of that extra variable.
And that's therefore,
all the code it takes when using NextJS features
to fetch data directly on the server
inside of the component function and to output it.
And therefore, now if we save that
and reload that news page,
you see, the news data is there directly on the page.
But now if we take a look at the page source code,
we will also see that all the news content is in there.
So it was rendered on the server.
And that of course, for example, gives us an SEO advantage.
And hence, fetching data directly inside of the component
is the standard approach you should use when using NextJS.