So now we had a look at
getStaticProps and getStaticPaths.
And these two are working together.
You don't always need both.
In the case of index.js, we only needed getStaticProps.
But for dynamic pages, that should be pre-generated,
you do need both.
Now you might recall that earlier in this module,
at the beginning of this course section,
I showed you this slide
and I referred to two forms of pre-rendering:
static generation and server-side rendering.
Now what we had a look at thus far,
that's static generation
because we statically pre-generate pages.
Even though it's not fully static
because of incremental static generation,
which I also explained,
but generally pages are pre-generated.
And that is really important.
Inside of getStaticProps and also inside of getStaticPaths,
we don't have access to the actual request
which is incoming.
Because these functions are not called
for the actual request, at least not only.
With incremental static generation,
they are also called for incoming requests
at least sometimes if they need to be re-validated
but they are generally called when your project is built.
So inside of getStaticProps,
you don't have access to the actual incoming request.
Now, very often, you also don't need access.
For example, here in the examples I showed you thus far,
we don't need access to the actual request,
which is reaching the server.
But sometimes static generation is not enough
and instead, you need real server-side rendering,
which means that you do need to pre-render a page
for every incoming request.
So not at most every second
but really for every incoming request
and/or you need access to the concrete request object
that is reaching the server.
Because, for example, you need to extract cookies.
And that is something we're also going to see later
in the course when we talk about authentication
but I already want to introduce you
to real server-side rendering here.
The idea is simple.
NextJS also supports this run real server-side code use case
which means it gives you a function
which you can add to your page component files,
which is then really executed
whenever a request for this page reaches the server.
So that's then not pre-generated in advance
during build time or every couple of seconds
but it's really code that runs on the server only,
so only after you deployed it,
and which is then re-executed for every incoming request.
And that code is added to a function called
getServerSideProps.
Just like getStaticProps, it's a async function.
It needs to be called exactly like this
and it needs to be exported.
And you can only add it to your page component files.
But then if you do have such a function
in a page component file,
NextJS will execute that function and it will execute it
whenever a request for this page is made.
And therefore, you should only use either getStaticProps,
what we saw thus far,
or getServerSideProps because they kind of clash.
They fulfill the same purpose.
They get props for the component
so that NextJS is then able to render that component
but they run at different points of time.