So getStaticProps is a very useful function
which you can export in your page components to ensure
that your pre-rendered pages contain data
you might need to wait for.
Now with revalidate, you can ensure
that this page is also updated regularly after deployment.
But sometimes even a regular update is not enough.
Sometimes you really want to regenerate this page
for every incoming request.
So you want to pre-generate the page dynamically
on the fly after deployment on the server.
Not during the build process
and not every couple of seconds,
but for every request.
And if that's your goal,
then there is an alternative to getStaticProps.
Now, I will comment out getStaticProps,
because it is the better choice here
and I wanna use it later again.
But I want to show you this alternative as well.
And that would be another function which you can export.
A function that can also be async if you want to.
And that's the getServerSideProps function.
Just like getStaticProps, that is a reserved name,
which NextJS will be looking for.
And the difference to getStaticProps
is that this function will now not run
during the build process,
but instead always on the server after deployment.
Now you will still return an object here,
an object with a props property,
because after all, this function still is
about getting the props for this page component.
And you can still then fetch data from an API here,
or from the file system, whatever you want to do.
Any code you write in here will always run on the server,
never in the client.
So you can run the server side code in here,
you can also perform operations that use credentials
that should not be exposed to your users,
because this code only runs on the server.
And then ultimately, you return your props object.
So here an object with a meetups key,
which holds my dummy meetups, for example.
Now you can't set revalidate here,
because it doesn't make any sense here.
This getServerSideProps function runs
for every incoming requests anyways,
so there is no need to revalidate every x seconds.
Now what you can do in here,
is you can work with a parameter,
which you'll receive. The context parameter.
You actually also get this and getStaticProps,
but I will come back to it there, later.
You do get it here and getServerSideProps as well.
And there in this context argument,
in this context parameter.
You also get access to the request object
under direct key, and the response object
that will be sent back.
And if you worked with NodeJS and Express before,
this might look familiar to you.
There, you also get request and response objects
in your middleware to then work with those.
And especially having access
to the concrete request object can be helpful.
For example, when you're working with authentication,
and you need to check some session cookie
or anything like this.
This is something which I show in my full NextJS course,
it's a little too advanced here.
But you do have access to the incoming request
and all its headers and the request body if you need to.
And that then might give you extra data or information,
which you need for the code that executes
in getServerSideProps.
Ultimately, you then don't return a response
by working on that response object here,
but instead, you return this object with the props key,
which holds the props for this page component function.
So that is how you then can use getServerSideProps
for preparing that data for your page.
And if we do use getServerSideProps here,
if we save everything, if I reload the starting page,
you see it works just as before,
and if we view the page source,
we also see all the data in there again.
The unordered list with all the list items.
That works exactly as we learned it,
but now their page is really pre-generated
for every incoming request.
Now, which one of the two should you use?
Is getServerSideProps better or getStaticProps?
getServerSideProps might sound better
because it's guaranteed to run for every request.
But that actually can be a disadvantage,
because that means that you need to wait for your page
to be generated on every incoming request.
Now if you don't have data that changes all the time,
and with that, I really mean
that it changes multiple times every second.
And if you don't need access to the request object,
let's say for authentication,
getStaticProps is actually better.
Because there you pre-generate an HTML file,
that file can then be stored and served by a CDN.
And that simply is faster than regenerating
and fetching that data for every incoming request.
So your page will be faster when working
with getStaticProps, because then it can be cached
and reused, instead of regenerated all the time.
Hence, you should really only use getServerSideProps
if you need access to that concrete request object,
because you don't have access to request
and response in getStaticProps.
Or if you really have data
that changes multiple times every second,
then therefore even revalidate won't help you,
then getServerSideProps is a great choice.
Now here for our meetup list, though,
it's not a great choice, because that is not data,
which changes frequently.
And here I also don't need to work
with the incoming request.
And therefore I will comment getServerSideprops out again,
and comment getStaticProps in.
Because with that, we can take advantage of the caching
and we're not regenerating the page multiple times,
unnecessarily.