All language subtitles for 024 Working with Params for SSG Data Fetching_en

Now that was a lot of talking

about getStaticProps and getServerSideProps.

But these are two key concepts,

two key functions built into next JS,

which you need all the time.

As you'll see in my full course, for example

when we work on that full block project,

we use those functions everywhere.

They are super important.

And hence, let's also use them

for the MeetupDetail page now.

For the new Meetup page, as explained earlier

we don't need them because here we don't need any data

and therefore there is no need to add getStaticProps.

It's really only there to fetch data

for the pre-generated page

if that page needs any data

and therefore we don't need it here

but on the MeetupDetail page of course.

We do have data that is needed

for the moment hard-coded data, but that will change.

And hence, here on MeetupDetails,

we also want to use getStaticProps or getServerSideProps.

Now, which one is better?

It depends on how often your data changes

and if you need access to the request object.

And here it's probably fair to assume

that the meetupData does not change very often.

Indeed this app doesn't even have a feature

for changing the meetupData.

We can only add Meetups

but even if it would have a change feature,

it would probably not be the case

that a Meetup changes multiple times every second.

And therefore, for to MeetupDetails

I would argue that again,

getStaticProps is better than getServerSideProps.

So here we export getStaticProps

and we can turn it into an async function

if we want to use async await.

And then here we could fetch the data for a single meetup.

And then we can of course return as object with the props.

And here we could have our meetupData prop

or however you want to name it,

which could again be a nested object

where we then have this data here,

so where we have that image.

So we have image set to the string

where we have ID if we needed, M1.

Where we have the title,

First Meetup here.

Where we have the address and that's this address

and where we then also have the description here,

this description.

That could be the props data

which we send to this component function.

But here we'll actually have a slight problem.

Keep in mind that this is a dynamic page.

So when we reach out to an API to fetch the data

for a single meetup,

we need a way of identifying that meetup.

We need its ID for example.

Now the ID thankfully is encoded into URL.

And therefore, we did learn

that we can use stead use router hook to get access

to this router object and then use the query property there.

That's what we did earlier in this course.

But the problem with that is

that the use router hook can only be used

in the component function, not in geStaticProps.

That's not a function where you can use react hooks.

So we can't get to the meetup ID

from the URL with help of use router in here.

But we also don't need to.

Because you might remember this context parameter,

which I mentioned.

I showed it to you on getServerSideProps,

but I mentioned that it also actually exists

on getStaticProps.

Now, when we accept it on getStaticProps,

context will not hold request and response,

but it will, for example, have a parans key.

So there will be context.parans,

and that will be an object where our identifiers

between the square brackets will be properties

and the values will be the actual values

encoded in the URL.

So our meetup ID, for example, could be accessed

with context.parans.meetupid.

Meetup ID because that's the identifier I have

between the square brackets.

And that would then be the concrete meetup ID

for which we're displaying this meetup.

I can console log this here inside of getStaticProps

so that we can see that this really works.

And then it's this meetup ID, which we could set as ID here

if we want to expose it to the component function.

With that if we saved this

and visit the detailed page of a single meetup,

we get an error though, getStaticProps is required.

Now, what's this error about?