All language subtitles for 004 Introducing Static Generation with _getStaticProps__Downloadly.ir_en

So, let's explore

this first form of pre-rendering,

or of data fetching with Next.js.

And that would be the Static Generation,

which I did mention is typically recommended,

but of course, I will explain all the details now

and throughout this section.

Now, with Static Generation,

there is a simple idea.

The idea is that you pre-generate a page during build time.

And pre-generate means that all the HTML code

and all the data that makes up the content,

is prepared in advance.

So, on the server side though,

that can be confusing here.

With that I really mean,

during the build process,

where you are allowed to execute code

that would normally only run on the server side, though.

Code that interacts with the file system, for example.

And you're going to see it in action very soon.

So, data and pages are prepared during build time

when you build your application before you deploy it.

Now, because pages are then pre-built during build time,

once you deploy them,

they can be cached by the server,

by the CDN that might be serving your app.

And therefore, incoming requests

can be served instantly with those pre-built pages.

Now, then, as I mentioned before,

those pages after they were served,

are still hydrated with your React app.

So, you still have a regular React app in the end.

The only difference is that the pages

which are sent to your clients,

are not empty initially

but pre populated with content.

Thereafter, you can still do whatever you want to do.

It's still a regular React app.

So, therefore, now, one main question, of course is,

how do we tell Next.js

that a certain page should be pre-generated?

And how do we tell Next.js

which data is needed to pre-generate a page?

And the answer is,

there is a specific function

which we can export from inside our page components.

And that's important only from inside our page components,

not from our React components,

but only from inside the component files

that live in our pages folder.

From in there,

we can export the special async function, getStaticProps.

Now, that name matters.

It must be written exactly like this, getStaticProps,

because that is then a function Next.js will watch out for.

Its async, which means it returns a promise,

and you can use the await keyword in there.

And then, the special thing is that in this function,

you can run any code

that would normally run on the server side only.

So, in that function,

you don't run the client side code,

you're not restricted to that

and you don't have access to certain client side API,

you don't have access to the window object, for example,

but instead, you can run any code you want,

that normally would only run on the server side.

And even better than that,

code that you write inside of this getStaticProps function,

will not be included in the code bundle

that's sent back to your clients.

So, any code you put in there,

will never be seen by your clients.

So, if you for example have code in there

that contains database credentials,

you typically wouldn't want to expose those credentials

on the client side.

You can safely write it inside of getStaticProps

because that code will never end up on the client side.

And therefore, let's now take a closer look at that

and let's start writing some code there,

so that we fully understand this function and how it works.