We added the ProductPage,
So when we click on a product in the list
we'll see a page with the details for that product.
And the ProductPage is a dynamic route,
very similar to the PostPage in our Blog example.
But in this case there's something else
we need to think about.
If you remember, in the HomePage
we set the "revalidate" option,
to enable Incremental Static Regeneration.
But in the ProductPage we have no such option.
So, what do you think will happen to this page
if we change the product data in the CMS?
Let's go and test it, because
there's nothing like seeing it in action.
I'll change this setting back to 30 seconds,
otherwise we'd need to wait for too long.
I'm also going to add a log statement
whenever our ProductPage is rendered.
This way we can see if it gets re-rendered.
Now, to test Incremental Static Regeneration
we need to run the app in production mode,
so let's do a new build.
And as usual let's quickly check the build output.
We can see that the HomePage uses ISR,
configured to 30 seconds.
While the ProductPage is a dynamic route,
so it generates multiple pages,
one for each product.
But it doesn't use ISR.
Now, let's start the application
in production mode.
I'll clear the logs,
so it's easier to see new messages.
If we load a product page,
the title is currently "Aloe Vera".
Now, let's go to the CMS admin panel
and modify that product title.
I'll add "Updated!" at the end of it,
like we did in a previous experiment.
Now, if we reload this HomePage,
and wait for 30 seconds,
eventually we see something happening
in the server logs.
We can see that "getStaticProps" was called
for the HomePage,
and this loaded new data,
including the "Updated!" title.
We know that the first request
that triggers the revalidation
still receives the old page,
so we need to reload once more
to see the "Updated!" title.
If we open the ProductPage however,
this still shows the old title.
And we can try reloading this page
as many times as we want,
but it will always show the old data,
because this page will never be regenerated.
In fact there are no new message in the server logs.
If we want the ProductPage to be regenerated
we'll need to use the same "revalidate" setting
that we have in the HomePage.
And this again goes inside "getStaticProps".
Let's re-test our application now.
Which means we'll need to re-build it first.
If we look at the output,
there is actually nothing telling us that
the ProductPage now uses ISR.
But that's just a limitation of the build output.
There's probably not enough space
to show all the information.
Let's start our app anyway.
And at this point we can test it again.
Note how the first title now says "Updated!",
and it's the same if we open the ProductPage,
because it was regenerated by the build.
Now, let's change the title again,
back to the original text.
And let's refresh this page
until it changes.
Something's happened on the server:
we can see here that
the HomePage was regenerated.
But if we scroll down,
Here you can see that the ProductPage
was also re-rendered,
and with the new title for the first product.
In fact it re-rendered the ProductPage multiple times,
once for each product.
So that's Next.js being clever.
Even though we only requested the HomePage,
Next.js detected that the HomePage
contains links to all the products,
so it revalidated the ProductPage as well.
Anyway, if we reload the HomePage
we can see the latest title.
And if we open the ProductPage
this time it also shows the latest data.
So, the moral of the story is that
if you use Incremental Static Regeneration
on one page, like the HomePage in this case,
then you should use the same setting
on any other page that displays the same data.
Otherwise you can end up in a situation where
one page shows the new data
and another page shows the old data,
making your website inconsistent,
and confusing for your users.