Now with that,
we're almost done with this application.
As you see, we can now update the data,
we can add new posts.
This all works, but here's something that won't work.
Let's say we're done and we wanna deploy this application.
What we would do then
is that we would build the application for deployment.
We would trigger a process that's provided by NextJS
that prepares the application for deployment
and that performs the various optimizations
and preparation steps.
To start that process you can simply run a script
that's part of the NextJS project by running npm run build.
That's what you would typically always do
before deploying the application.
Now this will then go through that build process,
and once it's done, it will give you a folder,
next folder, which you can deploy.
For now I don't wanna deploy it.
Instead, what I wanna do here
is I wanna preview that deployable application.
So now I wanna run this application,
not in development mode, but in production mode,
still on my computer here to test it,
but without all those extra development mode features.
And we can do that
after running npm run build by running npm start.
That will start a production Server
of this NextJS application.
Now this Server will still be available on local host 3000,
and therefore I can simply reload here,
but it will now be the production version.
And one thing you can immediately see here
is that as I switch those pages,
that loading text doesn't appear here.
Instead the data is there instantly.
Great. It's faster.
Yeah, but this comes with a price
and you can see that price if I create a new post.
Let's say I wanna share a post about a great vacation I had,
I prepare the image for that, like this,
and I click create post.
That's all looking good.
I'm redirected to the feed page and where's my post?
It's not there.
And it's also not there if I reload.
It's also not on the starting page.
And that is something we did not encounter
during development,
but we do encounter now in production mode.
Because I did mention before
that NextJS performs some pretty aggressive caching.
And again, I'll get back to that in the next section again.
But what NextJS does in the end
when preparing this page for production
is it pre renders all your pages during that build process
and caches those pre-rendered pages.
And it's then never re-renders them thereafter then,
unless there are dynamic pages with dynamic segments,
which we don't have here though.
So these pages were pre-rendered and they stay that way.
So any changes to the data aren't picked up.
And that's of course not great.
Now what can we do about that?
Well, we have to tell NextJS
that it should re-render some of these pages
whenever we change the data.
And we can do that
with help of the revalidatePath function here.
We are already using that for changing the likes status.
And for that reason, for example, liking does work
and those changes are picked up.
And you see that now after I liked this,
suddenly my new post also appeared.
because when I liked this, I called revalidatePath
and that revalidates all those pages
and tells NextJS to throw them out of the cache
and recreate them.
But of course, the idea is not that I have to like
or unlike a post in order to get any new posts.
Instead, what we should do
is we should also revalidate the data
here inside of our createPost Server Action.
Before I redirect, I wanna call revalidatePath,
and I wanna make sure that all my pages are revalidated
and get their latest data.
Now, revalidating all pages
is actually not necessary here though,
because the new post page, for example,
does not need to be revalidated and recreated.
But we'll dive deeper into caching
and how you can control in greater detail
which parts of the cached data will be revalidated
in the next section.
For now, I'll just do it like this.
And therefore with that change made,
if we stop that production server
and we rebuild the project
so that the latest code is picked up,
and we then thereafter start that production server again.
If I now reload this and create another new post
and I share my experience with the delicious paella I had,
you'll see that now I'm redirected
after this was uploaded and created,
and I now see that data right from the start.
And I don't have to like or unlike something
for it to appear
because now we are revalidating our pages
and our paths there whenever we create a new post.
By the way, on the starting page I only see two,
because there I have some code
to only fetch the latest two posts.
So that's not a bug,
but instead working the way it should work.
And with that, we now finished this application
and you learned a lot about data mutations in NextJS apps
and how to perform them with Server Actions
and with a couple of utility hooks and extra features
you also might need quite a lot.