Original subtitles

So let's say we have

a dummy user profile js file here in the pages folder.

So a user profile page for which I'll add a component here,

the UserProfilePage component.

And in here, we want to get some users specific data

and show that on the screen.

So of course we export that like this,

but now that's a page, which we can't pre-render

because we need to know for which user

we are rendering this.

Now we could expect a user ID as part of the URL.

So we could make this kind of dynamic

and expect to use the ID instead.

But then everyone who enters this ID in the browser

is able to see some data for that given user ID.

So that's not what I want here.

Instead, we wanna identify the user making the request,

let's say with help of a cookie which we set before.

Now at the moment we don't have that here.

We didn't add any authentication,

we're not placing any cookies on the user's machine

and therefore, we don't really have to use case here,

but it hopefully is a scenario that's easy to imagine.

And the later in the course we'll dive into authentication

and we'll then have this actual scenario.

So therefore here, we wanna return

some user specific data,

let's say to user name, but again, we need to get access

to the request object

which carries the cookies and the headers

to find out which users sent this request.

That would be a typical use case for getServerSideProps.

We can't pre-rendered as page

because we don't know which users will have in advance

and we don't get access to their cookies in advance.

Therefore, we want to export an async function here,

an async function called getServerSideProps.

Now, we get a context object here

at which we'll take a closer look in a second,

and we also need to return an object here,

and the object which be returned

actually needs to have the same format

as it does in getStaticProps.

So that return object does not change.

It should have a props key,

it can have a not found key

and it can have a redirect key.

The only difference is the revalidate key.

That is not required here and the debts can't be set here

because getStaticProps per definition

runs for every incoming request.

So there's no need to revalidate

after a certain amount of seconds

because it will always run again.

So therefore we return an object with props,

which makes sense Since, I guess,

since it's called getServerSideProps,

and these props

will then be made available to this function,

which will still be called by Next.js.

But as mentioned before,

it will not be called in advance when we built the project,

but really for every incoming request.

So here we could then have a username prop

which I afforded moment hard code to Max.

And then here we output prop props.username

in the component function.

And if we do all of that

and we then visit slash user profile page,

so this page which we just added,

we see Max here at the moment.

So that works and that proofs

that getsServerSideProps works

because that's where the value Max is coming from.

But the important thing now really is

that this only executes on the server after deployment

and also on our development server here,

but it's not statically pre-generated.

And that has a couple of important implications.