1
00:00:00,000 --> 00:00:03,000
So revalidatePath

2
00:00:03,000 --> 00:00:05,000
is another way of making sure

3
00:00:05,000 --> 00:00:08,000
that cached data is thrown away.

4
00:00:08,000 --> 00:00:10,000
And a key difference compared

5
00:00:10,000 --> 00:00:12,000
to setting dynamic, force dynamic

6
00:00:12,000 --> 00:00:14,000
or using the noStore function

7
00:00:14,000 --> 00:00:18,000
or using the configuration on the fetch function

8
00:00:18,000 --> 00:00:20,000
is that all those settings

9
00:00:20,000 --> 00:00:23,000
either disable caching altogether

10
00:00:23,000 --> 00:00:26,000
or set a certain caching time period.

11
00:00:27,000 --> 00:00:30,000
When calling revalidatePath,

12
00:00:30,000 --> 00:00:34,000
we instead revalidate some piece of the cache

13
00:00:34,000 --> 00:00:38,000
on demand when we tell NextJS to do it.

14
00:00:38,000 --> 00:00:41,000
And that can be more efficient than disabling

15
00:00:41,000 --> 00:00:46,000
the cache forever or setting a timeframe for caching.

16
00:00:46,000 --> 00:00:51,000
Because with that timeframe, we of course would get NextJS

17
00:00:51,000 --> 00:00:55,000
to re-fetch data every five seconds, for example,

18
00:00:55,000 --> 00:00:57,000
which is redundant if the data

19
00:00:57,000 --> 00:00:59,000
didn't change within those five seconds.

20
00:00:59,000 --> 00:01:01,000
So that's a bit inefficient then.

21
00:01:02,000 --> 00:01:05,000
That's the advantage of explicitly telling NextJS

22
00:01:05,000 --> 00:01:09,000
to revalidate the cache, because if we

23
00:01:09,000 --> 00:01:12,000
as a Next developer know that some data changed,

24
00:01:12,000 --> 00:01:15,000
we can simply tell NextJS about that and, therefore,

25
00:01:15,000 --> 00:01:17,000
get the best of both worlds:

26
00:01:17,000 --> 00:01:19,000
as much caching as possible,

27
00:01:19,000 --> 00:01:21,000
but updated data when we need it.

28
00:01:21,000 --> 00:01:26,000
Now, revalidatePath can be configured in different ways,

29
00:01:26,000 --> 00:01:27,000
and you can learn all about that

30
00:01:27,000 --> 00:01:30,000
in the official documentation.

31
00:01:30,000 --> 00:01:33,000
The main idea simply is that you define the path.

32
00:01:33,000 --> 00:01:35,000
So for example, '/messages'

33
00:01:35,000 --> 00:01:38,000
that users might visit on your website,

34
00:01:38,000 --> 00:01:40,000
and all the data related to that path

35
00:01:40,000 --> 00:01:45,000
and the route cache related to that path will be deleted.

36
00:01:45,000 --> 00:01:47,000
What's important to note, though,

37
00:01:47,000 --> 00:01:50,000
is that any nested paths and nested pages

38
00:01:50,000 --> 00:01:54,000
will not have their data and route cache deleted

39
00:01:54,000 --> 00:01:58,000
and revalidated, unless you also specify

40
00:01:58,000 --> 00:02:00,000
a second argument here and set this to 'layout'.

41
00:02:01,000 --> 00:02:04,000
If you do that, you essentially tell NextJS

42
00:02:04,000 --> 00:02:09,000
that it should revalidate this cache for this path

43
00:02:09,000 --> 00:02:13,000
and also revalidate the cache of all nested pages.

44
00:02:14,000 --> 00:02:16,000
If you instead set this setting to 'page'

45
00:02:16,000 --> 00:02:19,000
or omit it, since 'page' is the default,

46
00:02:19,000 --> 00:02:22,000
only the cache of this specific page

47
00:02:22,000 --> 00:02:25,000
will be revalidated and cleared.

48
00:02:26,000 --> 00:02:29,000
Hence, if you would want to clear all the cached data

49
00:02:29,000 --> 00:02:32,000
of all pages of your page, you would have to set the path

50
00:02:32,000 --> 00:02:37,000
to just '/', so to the root path of the application

51
00:02:37,000 --> 00:02:41,000
and add 'layout', and that would now clear the cache data

52
00:02:41,000 --> 00:02:45,000
and the route cache of all pages on your site.

53
00:02:46,000 --> 00:02:49,000
That's how revalidatePath works.

54
00:02:50,000 --> 00:02:53,000
Of course, you can also call it multiple time

55
00:02:53,000 --> 00:02:56,000
if you would want to revalidate the path

56
00:02:56,000 --> 00:02:58,000
of different pages like this.

57
00:02:58,000 --> 00:03:00,000
That would be possible as well.

58
00:03:01,000 --> 00:03:03,000
In addition to revalidatePath,

59
00:03:03,000 --> 00:03:07,000
there also is a revalidateTag function you can call

60
00:03:07,000 --> 00:03:10,000
that's also imported from 'next/cache'.

61
00:03:11,000 --> 00:03:16,000
And revalidateTag then takes a tag like 'msg' as an input.

62
00:03:19,000 --> 00:03:22,000
But how does this function work now?

63
00:03:22,000 --> 00:03:26,000
Well, you can assign tags to requests

64
00:03:26,000 --> 00:03:29,000
that fetch data that will be cached.

65
00:03:29,000 --> 00:03:32,000
For example, here, when sending that fetch request,

66
00:03:32,000 --> 00:03:36,000
I can add that configuration object with that next key.

67
00:03:36,000 --> 00:03:39,000
And then there, besides setting that revalidate option

68
00:03:39,000 --> 00:03:43,000
you saw before, I can set up some tags,

69
00:03:43,000 --> 00:03:44,000
and that will be an array of strings.

70
00:03:46,000 --> 00:03:48,000
And here you can set up any tags you want,

71
00:03:48,000 --> 00:03:49,000
for example, 'msg'.

72
00:03:51,000 --> 00:03:52,000
And you can assign multiple tags

73
00:03:52,000 --> 00:03:54,000
to one request if you want to.

74
00:03:56,000 --> 00:03:58,000
Now, these tags will, under the hood,

75
00:03:58,000 --> 00:04:01,000
be connected to the cached data,

76
00:04:01,000 --> 00:04:05,000
and if you then call revalidateTag with a certain tag,

77
00:04:05,000 --> 00:04:08,000
NextJS will revalidate and throw away

78
00:04:08,000 --> 00:04:11,000
any cached data that has that tag.

79
00:04:12,000 --> 00:04:14,000
So that would allow you to clear the cache

80
00:04:14,000 --> 00:04:17,000
of multiple pages if those different pages

81
00:04:17,000 --> 00:04:20,000
would assign the same tags to their requests.

82
00:04:20,000 --> 00:04:24,000
So instead of calling revalidatePath multiple times

83
00:04:24,000 --> 00:04:27,000
for different pages, you could just use one

84
00:04:27,000 --> 00:04:29,000
and the same tag on different pages

85
00:04:29,000 --> 00:04:32,000
and then just revalidate that tag

86
00:04:32,000 --> 00:04:35,000
to clear all the cached data of those pages.

87
00:04:36,000 --> 00:04:38,000
Now to show you how this works,

88
00:04:38,000 --> 00:04:42,000
I'll call revalidate tag with 'msg' as a tag here

89
00:04:42,000 --> 00:04:44,000
in this new message page component

90
00:04:44,000 --> 00:04:46,000
when that form is submitted.

91
00:04:46,000 --> 00:04:48,000
And I'm not doing anything else

92
00:04:48,000 --> 00:04:49,000
with that submitted data right now,

93
00:04:49,000 --> 00:04:51,000
but we'll change that soon.

94
00:04:51,000 --> 00:04:53,000
I'll comment out this line here

95
00:04:53,000 --> 00:04:56,000
so that I'm not storing anything in the database,

96
00:04:56,000 --> 00:04:59,000
so that I really just use that as a dummy function

97
00:04:59,000 --> 00:05:01,000
right now to show you revalidateTag.

98
00:05:02,000 --> 00:05:07,000
And I did set the same tag here on my messages page.

99
00:05:07,000 --> 00:05:11,000
And with that set up, if I restart

100
00:05:11,000 --> 00:05:15,000
my development server here and I restart the backend server,

101
00:05:16,000 --> 00:05:19,000
you will see that if I reload this messages page

102
00:05:19,000 --> 00:05:21,000
multiple times, I got no logs here,

103
00:05:21,000 --> 00:05:23,000
which hopefully makes sense

104
00:05:23,000 --> 00:05:26,000
because we're caching and reusing data.

105
00:05:27,000 --> 00:05:32,000
But because I assigned that tag and I revalidate that tag

106
00:05:32,000 --> 00:05:35,000
after submitting the forum on the new message page,

107
00:05:35,000 --> 00:05:36,000
if I go to the new message page

108
00:05:36,000 --> 00:05:38,000
and enter some message here, doesn't matter,

109
00:05:38,000 --> 00:05:42,000
we're not using it anyways, and I click send,

110
00:05:42,000 --> 00:05:46,000
you will see that now I got some logs here;

111
00:05:46,000 --> 00:05:50,000
because I revalidated the cached data connected

112
00:05:50,000 --> 00:05:53,000
to my request, to my fetch request here,

113
00:05:53,000 --> 00:05:55,000
and hence it was resent.

114
00:05:56,000 --> 00:06:00,000
And that's the idea behind revalidateTag and revalidatePath.