All language subtitles for 008 A Look Behind The Scenes_Downloadly.ir_en

Now, up to this point,

I explained a lot about pre-rendering

and how next.js does that.

But we haven't really seen it in action

other than on the running website in development mode.

But I do want to show you what exactly next.js

does do for you when you build the application.

Now, I did mention this build script before,

this build script, that's a script you execute

when you are ready to deploy your next application,

your next.js project and this build step here,

this next build command which has executed in the end

this will then pre-generate your pages.

And to show this to you, here I quit my development server

and I'll run npm run build here.

So I'll execute this build script

and therefore next build, in this project folder.

And what you'll see now is that

it's now creating that optimized production build.

And that can take a couple of seconds,

and after a while, this build process will complete.

Now we got a couple of pieces of information here.

We see that it was successful in the end

because we have no error here.

And we see that it generated two static pages here.

And we see the detailed output down there.

We also have a ledger here at the bottom

telling us that a filled dot

stands for static site generation.

So for a pre-generated page, that was pre-generated

during development or during the build process

because it uses get static props

a Lambda symbol would stand for us server side only page

something we're going to see later,

an empty dots stands for static.

So all's up page pre-generated

but a page that doesn't even need any data

and therefore doesn't use get static props

or anything like that.

And if I scroll back up again, we see that in the end

the two pages that were pre-generated,

is to starting page so slash nothing.

So in next.js and then a 404 page.

We haven't added one but you get one for free automatically.

We can ignore this underscore app thing here.

Now the 404 page has an empty dot

which means it was pre-generated without any data,

which makes sense, we didn't add our own one

and the default one is not fetching any data.

And index.js, so slash nothing was statically pre-generated

with help of get static props.

That's why we have that filled dot here.

That's how we can read this.

And we can also see this, if we have a look

at the .next folder, which was generated now

which holds this production ready code.

Which holds the output of the npm run build command.

Then in there we do have a server folder

into which we can dive.

And in there we see those pre-generated HTML files.

The two pre-generated HTML files and in index HTML,

if you open that, you also find that product data

in the end in there

because that's the pre-generated page,

which we also see if we would visit this page

in the browser.

And that's that pre-generated page,

which is sent back on the initial request

to the search engine crawler

or to the visitors off our page.

And we can even previewed this production ready page here

by running npm start, npm starts the production ready page

with a nodejs server,

and whilst we typically would do that

on some remote computer to expose it to the world,

we can also do that locally on our machine.

And then again, it starts on local host 3000

but this now is not the development server

but the real server serving the production ready page.

So if I visit local hosts 3000

if I entered this into browser, I still see this page

with the pre-rendered products,

because we just saw that in the pages folder,

in this .next folder

which holds is production ready site.

Side note, in the page source,

you'll also see there is some script tag injected by next.js

which in the end includes that data,

with which the data was populated.

That is needed for this hydration

where the pre-rendered HTML code is then connected

with the react application and that data

which was pre-fetched is handed off

to that react application

so that the react application

knows that this was dynamic data

and which kind of data should be rendered.

So that if you continued working with that data

and you would be updating that data through react.js

react would know which kind of data was received originally.

That's just a side note, it's all done automatically.

We don't need to do anything for that

but that is how next.js does work here

and how it pre renders pages for you.