So revalidatePath
is another way of making sure
that cached data is thrown away.
And a key difference compared
to setting dynamic, force dynamic
or using the noStore function
or using the configuration on the fetch function
is that all those settings
either disable caching altogether
or set a certain caching time period.
When calling revalidatePath,
we instead revalidate some piece of the cache
on demand when we tell NextJS to do it.
And that can be more efficient than disabling
the cache forever or setting a timeframe for caching.
Because with that timeframe, we of course would get NextJS
to re-fetch data every five seconds, for example,
which is redundant if the data
didn't change within those five seconds.
So that's a bit inefficient then.
That's the advantage of explicitly telling NextJS
to revalidate the cache, because if we
as a Next developer know that some data changed,
we can simply tell NextJS about that and, therefore,
get the best of both worlds:
as much caching as possible,
but updated data when we need it.
Now, revalidatePath can be configured in different ways,
and you can learn all about that
in the official documentation.
The main idea simply is that you define the path.
So for example, '/messages'
that users might visit on your website,
and all the data related to that path
and the route cache related to that path will be deleted.
What's important to note, though,
is that any nested paths and nested pages
will not have their data and route cache deleted
and revalidated, unless you also specify
a second argument here and set this to 'layout'.
If you do that, you essentially tell NextJS
that it should revalidate this cache for this path
and also revalidate the cache of all nested pages.
If you instead set this setting to 'page'
or omit it, since 'page' is the default,
only the cache of this specific page
will be revalidated and cleared.
Hence, if you would want to clear all the cached data
of all pages of your page, you would have to set the path
to just '/', so to the root path of the application
and add 'layout', and that would now clear the cache data
and the route cache of all pages on your site.
That's how revalidatePath works.
Of course, you can also call it multiple time
if you would want to revalidate the path
of different pages like this.
That would be possible as well.
In addition to revalidatePath,
there also is a revalidateTag function you can call
that's also imported from 'next/cache'.
And revalidateTag then takes a tag like 'msg' as an input.
But how does this function work now?
Well, you can assign tags to requests
that fetch data that will be cached.
For example, here, when sending that fetch request,
I can add that configuration object with that next key.
And then there, besides setting that revalidate option
you saw before, I can set up some tags,
and that will be an array of strings.
And here you can set up any tags you want,
for example, 'msg'.
And you can assign multiple tags
to one request if you want to.
Now, these tags will, under the hood,
be connected to the cached data,
and if you then call revalidateTag with a certain tag,
NextJS will revalidate and throw away
any cached data that has that tag.
So that would allow you to clear the cache
of multiple pages if those different pages
would assign the same tags to their requests.
So instead of calling revalidatePath multiple times
for different pages, you could just use one
and the same tag on different pages
and then just revalidate that tag
to clear all the cached data of those pages.
Now to show you how this works,
I'll call revalidate tag with 'msg' as a tag here
in this new message page component
when that form is submitted.
And I'm not doing anything else
with that submitted data right now,
but we'll change that soon.
I'll comment out this line here
so that I'm not storing anything in the database,
so that I really just use that as a dummy function
right now to show you revalidateTag.
And I did set the same tag here on my messages page.
And with that set up, if I restart
my development server here and I restart the backend server,
you will see that if I reload this messages page
multiple times, I got no logs here,
which hopefully makes sense
because we're caching and reusing data.
But because I assigned that tag and I revalidate that tag
after submitting the forum on the new message page,
if I go to the new message page
and enter some message here, doesn't matter,
we're not using it anyways, and I click send,
you will see that now I got some logs here;
because I revalidated the cached data connected
to my request, to my fetch request here,
and hence it was resent.
And that's the idea behind revalidateTag and revalidatePath.