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.