All language subtitles for 019 Introducing _getServerSideProps_ for Server-side Rendering (SSR)_Downloadly.ir_en

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

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.