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.