Now before,
I also always had a look at the production build
to really show you what Next.js does under the hood.
And I wanna do the same here for getServerSideProps.
So for this, I will add a console log statement here,
where I log server side code.
So that we see when this function runs
and now if we save that file,
and we again run npm run build
to build this for production,
we'll see when that code gets executed.
Now, here, if I make this a bit bigger
we see that we again
pre-generated a couple of pages and importantly
it's the same number of pages as we generated before.
It's still the starting page slash nothing
with the revalidation recognized,
it's then 404 page.
And it stands the product pages for P1,
P2, P3 and so on.
Now the user profile page was not pre-generated
as is in the end signaled by this Lambda symbol here.
The UID file also wasn't pre-generated.
So this Lambda symbol here
shows you that these pages are not pre-generated
but instead will be pre-rendered on the server only.
And that makes sense because in user profile
we're using get Server Side Props
and then UID we're using get Server Side Props.
That's why, those pages are not pre-generated
So, now with that
If we, again, start our server with npm start here
If you load, local host to three thousands,
we're on this page here,
but if I now visit the user dash profile page here
and we see Max,
if we go back to that terminal
where I started this production server with npm start,
we see server side code being logged here.
So this output here, we see that log here,
and that proves that this does code now executed,
but as shown before that this page was not pre-generated
With that, I'm going to get rid of that
console log statement
but I hope it's crystal clear when which code runs now.
And that is it for a get Server Side Props
and get static props
and also for get Static Paths.
I hope the differences are clear,
especially between static pre generation
and server side code
that only runs there.
I hope it's also clear why we use that.
Simply so that we can prepare data for our component
ahead of time or on the server
so that we can serve a finished page to the client,
that can offer a better user experience to our users
since they get the finished page
and all the content is there right from the start
but it can also help us with search engines
since search engine crawlers also see the finished page.
And with that, there's only one thing left
which I also want to take a look at in this module
and that's client site data fetching,
what that is, and when we still might need that.