We've seen that, if we add
a new review in the CMS,
Next.js generates a new page for it on demand,
as long as we request the right URL,
passing the new slug in the path.
However, the Reviews page will
not show the new entry,
and nor will the Home page.
Because these pages are statically
generated at build time,
and therefore will always stay the same.
Not only that, but adding a new review
is not the only way we can modify
the data in the CMS.
What if we change the content
of an existing review?
We can click this button to edit an entry.
Suppose we modify the title,
and add "update 1", just as an example.
If we Save,
the data returned by the API will be different.
However, our review page will never update,
because it's only generated the first
time we request the new path,
and then it's treated as a static
page like all the others.
So, how can we get our pages to display
the latest data from the CMS?
Next.js provides an option called "dynamic",
that lets us configure the
behavior for each route.
By default "dynamic" is set to "auto",
which means the page will "cache
as much as possible".
So, by default Next.js decides
what to do automatically,
based on our code.
If it is at all possible to generate
the page statically,
then that's what the build will do,
and that's in fact what's currently
happening with our pages.
We can change this behavior
by setting it to "force-dynamic".
As the name suggests, this will force the page
to effectively be re-rendered on demand,
every time it's requested.
There are a couple of other possible
values: "error" and "force-static".
But they're not that useful in practice,
so we can ignore them for the moment.
Anyway, this gives us a possible solution
to make our pages display fresh data from the CMS.
We could force them to be "dynamic".
Let's try this approach on the ReviewPage first.
We can export that "dynamic" property from here,
but we want to set its value to "force-dynamic".
And in that case we don't need
"generateStaticParams",
because the whole point of this function was
to tell Next.js which slugs
to statically generate.
But we now want dynamic pages, not static ones.
To test this we'll need to do
another production build,
and I'll clear the ".next" folder first,
to make sure it doesn't use any
old data from the fetch cache.
Ok, you can see that
there's a lambda symbol next to
the "/reviews/[slug]" route
which means it "server-side renders at runtime".
Or, in other words, it's a dynamic page.
Let's see how our app works now,
and I'll restart from the Home page.
We can see straight away that
it rendered 3 review pages dynamically.
That's because of link prefetching.
In fact they are the 3 slugs
for which we have links in the Home page.
But note that it didn't render
the Home page itself,
because that's still static.
It should be the same for the Reviews page:
this one is also static.
What we set as dynamic is the ReviewPage.
Let's see what this means,
if we go in the CMS and change the "title" again,
this time to "update 2".
We should see that change reflected in our page.
Let me add a separator in the logs,
so we can more easily see what happens
when we reload the page.
You can see that
the "cuphead-2" ReviewPage re-rendered
and in fact we see "update 2" in the page heading.
Since it's now a dynamic page
it will re-render
every time we reload it in the browser.
This way we can be sure that
it will always display the
latest data from the CMS.
Now, if we go to the Reviews page,
this still shows "Cuphead 2 update 1",
and the same will be true for the Home page.
Once again, these other pages are still static
and therefore will always show the old data,
that is, the data fetched during the last build.
This is shows how
each route can use a different configuration.
We only set "force-dynamic" in the ReviewPage,
so it doesn't affect the other routes.
But if we want all our pages to show fresh data
then we should set the same option
in the HomePage as well,
and also in the ReviewsPage.
All the pages were we fetch any
data should now be dynamic.
Let's see how our app works at this stage,
if we rebuild it again for production.
You can see that the Home and "/reviews" routes
also have the lambda symbol next to them,
showing that they are dynamic.
Let's start the server,
and see how things work now.
You can see that both "HomePage" and "ReviewsPage"
were rendered at runtime.
The ReviewsPage because of link prefetching.
Let's do the same experiment as before,
and go and update the title for this review.
This time it will be "update 3".
If we reload this page,
we see the new title straight away,
because, as before, this route is dynamic.
But, if we go to the Reviews page,
this time you can see that it
also shows the new data,
because it's also dynamic.
And the same applies to the Home page.
Note that HomePage and ReviewsPage were rerendered
right after we reloaded the ReviewPage.
That's always because of link prefetching.
But if we reload the Home page directly
the server renders it again.
So, by using "force-dynamic"
we can be sure that our pages always
display the latest data.
But this comes at a cost,
in that every time we request a page
the server will generate it at runtime.
And this is slower than returning a static file.
That applies to every page,
and no matter whether the data
in the CMS has changed or not.
So, "force-dynamic" is something
of a quick and dirty solution.
It does solve the problem of
displaying the latest data,
but at the cost of making response times slower,
and increasing the server load.
Later in this section we'll look at
some more sophisticated approaches,
that will let us generate static pages,
but also update them when the data changes.