So we have these messages here, which are loaded
from that dummy backend, which is a separate process,
a separate server running in the background.
Now, if you open the terminal
and you go to that window where you start
at the backend server
and you reload this messages page
where we see those messages,
you should see some log messages here.
If you don't, delete this .next folder
in your NextJS project,
then quit that backend server
and restart it.
And most importantly, quit the NextJS
development server and also restart that.
And then thereafter, in the terminal
where you start at the backend server,
if you then reload, you should definitely
see those log messages.
And you should see two log messages here,
because in my NextJS application,
I actually got two requests to that backend.
In the messages folder, I have that layout JS file.
And in there, I have one request to the backend
where I fetched the messages.
And in the page JS file, I got one request.
So two requests sent to the backend.
And as you see, these two requests lead
to two request logs.
Now, if you paid close attention,
this might sound a bit weird
because I did mention this request memorization,
which was a mechanism built into NextJS
to avoid duplicate requests to the same data source.
And indeed, here I have one and the same data source,
one and the same backend server,
and I'm sending a request to that server
from two different places.
And that seems to lead to two different requests,
as we can tell by these backend logs.
And that's exactly what should be avoided.
And indeed NextJS has a mechanism
that avoids duplicate requests as we see it here.
But that mechanism is only active
if those requests are sent with exactly
the same configuration.
And here, I'm talking about requests sent
with the fetch function.
Later, I will also show you how to avoid
duplicate requests to other data sources
like your own database
to which you reach out directly from
inside the NextJS application.
We can also avoid duplicate requests to that,
as you will see later.
But for now, it's about duplicate requests
to a separate backend, which we clearly have here.
And we have those duplicate requests
because the request I sent here
in the messages page component
and the request I send in the messages layout
are not exactly the same.
They have a different headers configuration,
and I set up this different configuration
so that on the backend,
I can log which exact
place in the front end did send the request.
I'm extracting that headers data here,
and I'm logging it here, but therefore,
I have different requests with different configurations.
Now, what you will see is that if I get rid
of this headers configuration in my NextJS application
here in the messages page,
and then also, in the messages layout,
and I then save the code,
I have exactly the same
request signature in both places.
And if I do that and I then go to my backend code,
again, you can already see that only one
new request was added to it here.
Now, if I reload this messages page,
you will see that actually no new request is sent here.
And I'll get back to why that's the case later.
You can always delete this .next folder though
to reset the NextJS application essentially,
because that .next folder holds some temporary data,
some cache data that's used by the next application.
And if you delete that folder
and then restart the next development server,
it will be recreated with fresh data.
And if you do that
and you go to that backend page again,
you will see that now,
if I maybe also restart that to clear the logs here,
that now, if I reload that messages page,
only one new request is added here.
And keep in mind that earlier we had two requests,
one from the layout, one from the page.
Now, since I'm not sending those extra headers,
which were different anymore, I can't tell
where this request is coming from, but I can tell
that it's only one request instead of two.
So that's that request memorization in action here.
And that's one key mechanism built into NextJS,
which you get for free.
Whenever you have two requests
with exactly the same configuration.
In this case here, fetch requests sent to a backend,
NextJS avoids unnecessary requests,
and instead just sends one request
and then reuses the response in all the places
of the application that needs the response.