All language subtitles for 004 Loading Data & Paths For Dynamic Pages_Downloadly.ir_en

Now the starting page is working.

What about the event detail page here?

This page currently still fetches it's data

from the dummy-data file.

It's this eventId this dynamic page here.

And of course here

we now also want to get our concrete event

the individual event for which we wanna display data

we wanna get that from our firebase backend.

Now for this, first of all, we can go to dummy-data

and copy the getEventById function

and add this to the api-utiljs file.

Export it there but turn it into an async function

and instead of DUMMY_EVENTS here

we again wanna use AllEvents.

So just as in getfeaturedevents,

I'll get access to all events await this

and then find my single event on the,

well, overall events which I got here.

Now that's step one.

Step two is to use that in the dynamic event ID page.

And again, the question is

how do we wanna fetch the data?

Now we could fetch it on the client side

but that wouldn't make more sense here

than it does on the homepage.

It's still unlikely that it changes a lot.

And this page for an individual event is even more important

when it comes to search engines than the starting page.

After all it's the single event page

that has all the details for an event.

So this should absolutely be crawlable.

We definitely wanna have some data on this page

right from the start.

So therefore here,

I definitely also want to pre-render this page with data.

Again, the question is static generation

with get static props

or server-side rendering with get service props.

And as often the answer probably is get static props.

Because this again is not really a page

where we need users specific data

which changes all the time or anything like that.

So, pre-generating, it sounds good to me.

So in this event, ID page here in this page file

we therefore also wanna export the async

getStaticProps function again.

Here however, we'll need the context

because we'll need to know

for which specific event Id we wanna load the event data.

So we can get the event ID from context

and they are the params and then their event Id

because this here is the identifier

I encoded in the file name.

This gives us access to the event Id.

Once we have the event Id,

we wanna fetch these single event

and therefore I remove the import of getEventById

from dummy-data

and instead import getEventsById from going up one level

and another level helpers/api-util.

So from this api-util file,

which sends requests to Firebase.

And now we wanna use this in getStaticProps

to get that single event.

For this we await getEventById

because that's an async function returning a promise

and we still pass the event Id to that function.

And then here in the end we'll get that event

for which we're looking.

Now, once we get to that,

we can return our object as we always do with the props key

and then there, my props object will have an event

or selected event key totally up to you

which holds that single event, which was identified here.

So now inside of my component function

we can now work with that selected event prop.

So we should accept props here,

and then my event here,

which I use throughout this component

is actually props.selected event.

Now, in this component function

we now no longer need to use the router,

they useRouter hook because we no longer need access

to the event Id in there

because data fetching doesn't happen

inside of this component function anymore.

So the concrete event Id doesn't matter to us here,

and if it would,

we could get it from this selected event prop

because that holds the entire event, which we identified.

So we no longer need useRouter here

and we can therefore get rid of the import of course.

Now with that, it wouldn't work though.

And do you remember why?

Because this is a dynamic page

and there is an infinite amount of possible pages

that could be generated.

Next.js doesn't know which event Ids it should pre generate.

And as a developer,

we typically also don't know that in advance.

If we have a dynamic page

maybe with user generated content,

then as a developer, we also can't anticipate

which Ids we'll eventually have.

That's why we need another function here.

We need to also export another async function,

the getStaticPaths function.

This function will tell Next.js for which parameter values.

So for which event Ids, it should pre-render this page

and for which Ids, it shoould therefore call

getStaticProps and this component function.

For this in getStaticPaths, we have to return an object,

an object with a paths key

which holds an array full of objects

where we specify our param values.

So the first page which we wanna generate for example,

should have a value for the event Id param of e1

that's something we could add here.

And now this single page for the event with e1 as an Id,

would be pre-generated.

But as I just said,

we typically don't know all Ids in advance.

So that's typically not what we wanna do.

Instead, we wanna fetch the event Ids here

dynamically as well, and derive this pops array dynamically.

So for this, what we can do

is we can go to api-util and use, getAllEvents,

to get all events,

then extract their Ids

and derive the to be generated paths from that.

So for this, I'll go back here to event Id

and from the helpers/api-util file,

I will also import getAllEvents.

And now here in getStaticPaths,

I will have all my events here by a waiting, getAllEvents

and then all construct my paths array

by taking my events and mapping this array of events

into an array of objects

where every object has a params key

which holds another object

where I then set the event Id to events.Id event.

Event is the single event

for which we're going through that events array here.

So now paths is exactly the kind of array we need

and hence I'll set paths: paths here.

With that if we save this all,

if we reload this events page for event e2,

we get an error regarding the fallback key.

And you might remember that we need to add this fallback key

to let Next.js know

if there are more possible event Id values

which we did not pre generate here.

So which it should then maybe generate dynamically

on the fly, or if we did specify all possible paths here.

Now here, I did specify all paths

so we can set fall back to false

letting Next.js know

that if we try to load this page for an unknown Id,

it should show the 404 page.

And with that, if we set this and reload again,

now it correctly loads the page for e2

and that works for the April event as well.

Now, if I try e5, which is an invalid Id,

I get the 404 page instead, which also makes sense.

So with that we're also handling this dynamic page

successfully here.

Before we now also dive into the slug page

and this index page here for all events,

before we do that, let's pause for a second

and think about the two pages we worked on.

Index.js here on the root level of the pages folder

and dynamic event Id page.

Maybe there's something we can optimize

or where we could at least consider optimizations.