Original subtitles

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.