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.