All language subtitles for 015 _getStaticPaths_ & Link Prefetching_ Behind The Scenes_Downloadly.ir_en

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.