Now, before we dig deeper,
I again want to show this pre-rendering
of multiple instances of this page, inaction.
And for this again,
we can run this NPM run build command here
to build this for production.
So NPM run build,
and what this will do is it
will create an optimized production build again,
pre-rendering all the pages it needs to pre-render.
And then we see what it did here again.
We see that it pre-rendered a couple of pages.
It generated five pages in the end here.
We see that for the starting page for a slash nothing.
So for this index JS file,
it recognized this 10 seconds revalidation period.
And we see that for this dynamic page here
it generated three instances
for P one, P two, P three
which makes a lot of sense
because these are the parent values I'm returning here
in get static pulse.
It also pre-generated the 404 page
just as it did before already.
Now we can also see this
if we dive into the next folder again,
into server pages.
Here we see the HTML files for those different parameters.
We also see the json files for pre-loading that data
if we would navigate to such a page through a link.
So after we already are on the page.
Not for the initial page load.
And if we have a look at those HTML files,
in there, of course, ultimately
somewhere we will see our product one text.
Here it is.
So we see that here as well.
Now I can also show you that pre fetching of data though
because in index JS, we do render some links.
So now if I do run NPM, start here.
If I do that to start that production server
on our local machine,
with that build project. If I reload
we get these clickable links.
And if you now open the developer tools here
and go to the network tab.
If I now reload, local host 3000
you'll see something interesting.
You see here, are requests to P one JSON,
P two JSON and P three JSON.
And if you click on them, you see what was fetched.
And in the end here, it pre fetched the props for the
that would need to be loaded
if you click on one of these links.
So in the end here, it pre fetched that data
even before I hovered over the links
just because I'm on this page.
Now the exact point of time when data is pre fetched,
that's something figured out and done by next to JS.
The important part for us here is that
it does that pre fetching for us.
Now, when we now click on a link,
we're not sending a new request
to the server and load the pre-rendered HTML file.
Instead we stay in this single page application now.
We stay here in this react application
which was loaded and hydrated after this initial request.
So in the end now Java script will render a new page for uS.
Just as it would do in a regular react app without next JS.
But the data needed for this page is coming
from the pre fetched JSON file, which it loaded and
read under the hood on our behalf.
So that it doesn't need to fetch the data
after we navigated to that page.
But so that the data is already there
when we do navigate.
To show this final product one page even faster.
And that's another neat feature built
into next JS, which we get for free.
So to say.
Now let's again explore this fallback key here
in greater detail.