Now, this is now the best way
of fetching data in a NextJS application
if you own the data source, so if you own the database.
If you have an external API, you, of course,
will need to send an HTTP request,
but if you own the database,
you can move it into your NextJS project
and reach out to it like we're doing it here.
Now, as I mentioned, the nice thing about SQLite
and the package we're using
is that it's actually a synchronous package
and we don't even need to use async await,
but I actually wanna simulate a slower response here,
and therefore, I will actually turn this
into an async function,
even though the SQL package we're using would not need it,
but I'll add async here
so that I can then await a new promise,
which I only add here so that I can add a short delay,
because I also wanna show you
how to handle loading states, for example.
So this promise constructor gets a function as an argument
which automatically receives a resolve function,
and then here, I'll simply call set timeout,
and I'll set a timeout of two seconds,
and resolve should be triggered after these two seconds,
and I await this promise then.
So this will make sure
that we simply add a two-second delay here
to simulate a slower backend process
or simulate a database that's slower, because again,
I wanna show you how to handle loading states.
With that, now that we're using async await here,
get all news does no longer directly return
an array of news, but instead, it'll now return a promise,
which will eventually yield an array of news.
Therefore, the code in the page.js file must be adjusted
because we can no longer call get all news like this.
But that's no problem, because as I mentioned
and showed you before already,
you can decorate your component functions
with async if they're React server components,
which this one is.
So hence, we can simply add await here, and we're good.
That's all we have to do to fetch those news.
If we now save that and reload,
we still get that page with the news, but actually,
you will see that if you're on a different page
and you reload there to make sure
that NextJS loses its cache and you click on news again,
nothing seems to happen initially,
and then only once the data is there
do we navigate to this page.
This does not happen thereafter
because NextJS actually caches this page,
but it happens during development
if you reload some other page
and then try to go back to news.
And that's, of course, not a great user experience,
because it seems as if nothing's happening
after clicking on news
until we suddenly switch to that page.
It would be better to show some loading fallback,
some loading spinner or loading text
or some skeleton loader until the data is there,
and adding such a loading fallback, thankfully,
is pretty straightforward in NextJS.
You can add a special file called loading.js
next to the page that is loading data or on a higher level,
and NextJS will automatically show the content
of the component defined in this loading.js file
until the data is there.
So here, I can export my new function,
news loading or whatever you wanna call it,
and maybe just return this fallback text,
though you could, of course, return any JSX content here,
a loading spinner, whatever you need.
Here, I'll keep it simple and just return this loading text,
and with this loading.js file added here,
it'll take care of showing us this loading text
if a sibling or child page is loading.
So therefore, now with that,
if I go back to archive and reload and then click on news,
we go there instantly, and we see that loading fallback.
And that's, of course, now a better user experience,
because now we got that instant navigation
and we know what's going on.
We understand that we're simply waiting for data,
and that is how easy it is
to add a loading fallback with NextJS.