We've seen that if we use
Incremental Static Regeneration
in our HomePage,
we should use the same setting
on the ProductPage as well.
Otherwise if we modify a product in the CMS
the HomePage will show the new data,
but the ProductPage will still show the old data.
But modifying an exist product
is not the only case we need to think about.
What happens if we add a new product?
Let's go and try that out.
In Strapi we can duplicate an entry
by clicking on this icon.
So this creates a copy of our first product,
with all the same values.
Now, I'm going to change the title
to say "Aloe Vera" but "Large".
So this will be a new product,
that is the same plant
but maybe in a large pot.
And you can see that
there's now an "Aloe Vera - Large" entry.
Maybe I should have changed the price as well
because if it's large it should be more expensive.
Anyway, let's go back to our website,
and see what happens now.
Note that I still have the app
running in production mode here.
So let's go and refresh this page
until we see the new data.
There it is: something's logged on the server,
and in fact we can see
the new "Large" product in the list.
So the next time we reload the HomePage
the new product will be displayed on the page.
Now, the question is: what will happen
if we try clicking on that product?
Let's find out!
There you go: we get a 404 page not found.
Can you guess why this is happening?
And I may as well stop the server in the meantime.
What's happening is that
the new product is not included
in the list generated by "getStaticPaths".
Because "getStaticPaths" ran at build time
when the new product didn't exist.
And if we request this page
with a product id that wasn't
in the list returned by getStaticPaths
then Next.js will return a 404 page,
because here we set "fallback" to "false".
If you remember, "fallback" tells
the server what it should do
if the requested page doesn't exist.
If we want to try and generate a new page
when an unknown "id" is received
then "fallback" should not be false.
There are actually two possible values
we can use instead. One is "true"
and the other one is "blocking", as a string.
And in this example we'll use "blocking"
because it's more appropriate in this case,
and also simpler to explain actually.
I'll explain the other option separately.
Now let's rebuild our app.
If we look at the build log
there's really nothing new here,
so let's go and start the app.
Now, let's go and test it again.
Let's start from the HomePage.
This is the initial list of products.
And by the way, if we try opening
the new product now, this will work
because we rebuilt the app
so at that stage it included the new product.
But now we want to go and add
another new product.
This time let's duplicate the Golden Pothos,
and create a "Large" version of this one.
So here's the new product in the list.
It's been assigned 8 as the "id".
And this is definitely the "Large" one.
The title was too long to be fully visible.
Let me clear the server logs.
And keep reloading the page again.
There are some new messages in the logs.
Let's reload one more time,
and the page now shows the new
"Golden Pothos - Large" entry.
If we click on it,
this time it works just fine.
If we look at the server logs
we can see a new call to ProductPage render,
that wasn't there before.
So what happened is that
the server received a request
for the ProductPage with id "8".
But there was no such page pre-generated.
However, because we set "fallback" to "blocking"
Next.js generated the new page
and returned it to the browser.
And by the way this "fallback" mode
is called "blocking"
because the new page is generated
while the client is waiting for the response.
So the response is "blocked"
until the new page is ready.
Anyway, the most important thing
to take away from this video is that,
if you enable Incremental Static Regeneration
because you want your website
to automatically reflect changes in your backend data
then you almost certainly want to also
enable a "fallback" mode in "getStaticPaths",
for any page that displays the details of an item,
otherwise you'll get a 404 not found page
for any items that didn't exist at build time.