Now, one way of improving the user experience
here would be to go to the Server Action
and await these database updates,
to which I again added some delay
to simulate a slower connection.
And then thereafter, we should call the revalidatePath
function, which must be imported from next/cache.
Now, what's this function about?
Well, by default,
NextJS caches data pretty aggressively.
And we'll take a closer look at how NextJS caches data
and what that means for you in the next section.
But what you should know here is
that NextJS does indeed cache page data
and therefore by default,
it will not pick up changes to data
that's reflected on the page.
So of course, those changes are stored in the database,
but the page doesn't update
just because some database data changed.
Instead, NextJS by default will show you
that cached page, which is based on old data potentially,
and that's why this change isn't picked up.
Now, revalidatePath then is an important function
which you should call whenever you are changing some data
that is shown on some page.
And indeed later we will also need to call it
after adding a new post.
But I'll get back to this later.
So for now, we should call it here to tell NextJS
that some data of some page changed,
and we need to tell NextJS which page's data changed.
Now attached you find a link
to the official revalidatePath documentation
because it turns out
that there are quite a few different ways
of configuring this function or of calling this function
and of defining the path of the page
or pages that should be revalidated.
So that should be removed from the cache
so that an updated version is shown,
because that's the main task of this function.
It tells NextJS that some page
or pages need to be revalidated,
that it should not continue showing the cached versions,
but instead create updated versions.
And for that, you can, for example, define the path
to one of your pages, for example, to the feed route.
With that, we would make sure that
whenever the user visits that feed route,
an updated version is served.
And indeed, if that's called whilst the user
is on the feed route, NextJS will update the page
behind the scenes and show an updated version
of the page automatically.
And therefore, by just adding this code here
to togglePostLikeStatus, if we go back and reload
and I now click here, you see initially nothing changes,
but after a short while, this does change magically,
and I did not reload the page or anything like that.
Instead, NextJS found out
that this feed page on which I was here was updated,
or that I told it that it should revalidate that page.
And since I was on that page,
it automatically updated it behind the scenes.
Now here you actually also might wanna make sure
that NextJS is not just revalidating the feed route,
but actually maybe all pages of the application,
which you can do by using just a slash here.
And then passing a second argument where you set a string
of layout, that essentially means that all the pages
that are wrapped by the root layout should be revalidated,
which in this case are all the pages of this application.
And again, you can learn about all the details
of configuring different paths, including paths
to dynamic segments here in that official documentation.
But that's one way of revalidating that will make sure
that all pages pick up the latest data.
So that's an important improvement here,
but it's not the only improvement I want to make
because of course with that, we still have the problem
that if I change that status, it takes a short while until
that change is reflected here.
And that's not ideal.