Original subtitles

So now we learned about getStaticPaths.

At the moment

the way we use it is still a bit unrealistic though

because I have hard coded my PID values here

into this function.

And in reality, we would be fetching

this kind of information

from a database or a file as well.

So therefore in reality, we would basically

just repeat this code here

and would wrap that code

and just outsource it into a separate function.

Async function called get data

where I then returned data.

And since it's async, we can use a weight in there

and then we can just get our data here

by calling get data

and waiting this here in getStatic prompts.

And we can do the same in getStaticPaths.

So a little bit of refactoring

to have no code duplication.

With that we get the data.

And now here in getStaticPaths.

We want to use the data to read all the IDs

we want to support.

So for this, we could get our IDs array here

by going through all the data pieces.

Now the data we get back here

by the way will already be parsed json

since we do that and get data.

So it will be a JavaScript object.

So here IDs then should be an array.

And in dummy backend, we have this products array.

So in the end

what we want to do is you want to access data.products

and then just map this array of complete product objects

into an array of just product IDs.

Just like this, for example.

Just extracting the ID

for every product and then having such an IDs array here.

And then we need to translate this IDs array

into an array of such objects.

So here we could then create another object params

which has a number array.

But we create this array

by going through the ideas and mapping these IDs

such that every ID is mapped into an object.

And we need to wrap this

in extra brackets here, extra parentheses,

so that this is not considered as the function body

but that we instead inline return a new object

for every ID and object with a parent's key

which then holds another object with a PID key

which has this ID as a value.

And that's then repeated for every ID.

So we end up with an array full off such objects

which have exactly that structure we need down there

so that we can set paths equal to params here

where we name this paths with params,

maybe whoops

paths with params just like this.

And of course we could perform these two operations

in one single step as well.

I'm just using two steps here to hopefully

make this a bit easier to understand.

And then with that, if I now saved this

it still works as before.

Everything still works as before

now also all the pages are pre-generated again, by the way

because I am going through all the products here.

So now we can also set fallback to false again

because we are loading all possible IDs anyways

and that's of course, a bit more realistic here

because typically you would not pre hard code

all supported values here.

Typically you don't know all dynamic values

in advance as a developer

but instead you would fetch them from the same data source

as the actual data is then fetched from later.