1
00:00:00,000 --> 00:00:02,000
So you did now learn

2
00:00:02,000 --> 00:00:06,000
how you can cache data from your own data source.

3
00:00:06,000 --> 00:00:08,000
However, now that we added this caching,

4
00:00:08,000 --> 00:00:11,000
we'll face a problem even during development.

5
00:00:11,000 --> 00:00:15,000
If I now add a new fourth message, it doesn't appear here.

6
00:00:15,000 --> 00:00:19,000
A problem we previously only faced in production

7
00:00:19,000 --> 00:00:21,000
due to that full route cache.

8
00:00:21,000 --> 00:00:24,000
Now, since we set up this cache here,

9
00:00:24,000 --> 00:00:28,000
and hence we got this data cache, we got the same problem,

10
00:00:28,000 --> 00:00:31,000
if you want to call it like this, during development.

11
00:00:31,000 --> 00:00:32,000
But it's not actually a problem.

12
00:00:32,000 --> 00:00:37,000
Instead, it's the behavior NextJS has out of the box,

13
00:00:37,000 --> 00:00:39,000
it caches aggressively.

14
00:00:39,000 --> 00:00:42,000
What we have to do to see our data again,

15
00:00:42,000 --> 00:00:44,000
is we have to tell NextJS

16
00:00:44,000 --> 00:00:48,000
that the data that's cached here did change.

17
00:00:48,000 --> 00:00:50,000
And how can we tell NextJS?

18
00:00:50,000 --> 00:00:54,000
Well, there are essentially two main ways.

19
00:00:54,000 --> 00:00:57,000
In the place where we create that new data

20
00:00:57,000 --> 00:01:01,000
we can call that revalidatePath function again,

21
00:01:01,000 --> 00:01:03,000
and we saw that function before already.

22
00:01:03,000 --> 00:01:05,000
And I can, for example,

23
00:01:05,000 --> 00:01:08,000
revalidate the data on /messages.

24
00:01:08,000 --> 00:01:11,000
With that any cached data used on this page

25
00:01:11,000 --> 00:01:13,000
will be thrown away and will be re-fetched

26
00:01:13,000 --> 00:01:16,000
whenever this function here was called.

27
00:01:16,000 --> 00:01:18,000
So right after adding a new message,

28
00:01:18,000 --> 00:01:21,000
I'm calling this function to tell NextJS

29
00:01:21,000 --> 00:01:24,000
that any data and the full route cache

30
00:01:24,000 --> 00:01:27,000
of the /messages page should be thrown away

31
00:01:27,000 --> 00:01:29,000
and the data should be re-fetched

32
00:01:29,000 --> 00:01:31,000
and the page should be re-rendered.

33
00:01:31,000 --> 00:01:33,000
Therefore, with this added,

34
00:01:33,000 --> 00:01:36,000
I still don't see the message if I reload,

35
00:01:36,000 --> 00:01:38,000
but now for every new message we add,

36
00:01:38,000 --> 00:01:39,000
the cache will be cleared

37
00:01:39,000 --> 00:01:43,000
and hence, any new messages now will show up here.

38
00:01:43,000 --> 00:01:45,000
As you can tell.

39
00:01:45,000 --> 00:01:48,000
So that's one way.

40
00:01:48,000 --> 00:01:51,000
Now, an alternative to calling revalidatePath

41
00:01:51,000 --> 00:01:54,000
and revalidate the data that's attached

42
00:01:54,000 --> 00:01:58,000
to a specific page is to instead call revalidateTag

43
00:01:58,000 --> 00:02:01,000
and add a tag to the cached data.

44
00:02:02,000 --> 00:02:05,000
And you can add a tag to cached data

45
00:02:05,000 --> 00:02:07,000
when using unstable_cache,

46
00:02:07,000 --> 00:02:10,000
which I renamed to nextCache here in my case,

47
00:02:10,000 --> 00:02:12,000
by passing a third argument

48
00:02:12,000 --> 00:02:15,000
to this unstable_cache function.

49
00:02:15,000 --> 00:02:18,000
And that third argument is a configuration object,

50
00:02:18,000 --> 00:02:22,000
which allows you to set up two different settings.

51
00:02:22,000 --> 00:02:25,000
With revalidate, you could set up a time period,

52
00:02:25,000 --> 00:02:28,000
in seconds again, after which the cache

53
00:02:28,000 --> 00:02:30,000
would always be re-validate.

54
00:02:30,000 --> 00:02:32,000
So that would be another way of re-setting it

55
00:02:32,000 --> 00:02:37,000
or re-fetching. But here I'm looking for the tags setting.

56
00:02:37,000 --> 00:02:39,000
And this then takes an array of tags,

57
00:02:39,000 --> 00:02:41,000
which are totally up to you.

58
00:02:41,000 --> 00:02:43,000
So you can add as many tags as you want

59
00:02:43,000 --> 00:02:46,000
and any tag values of your choice.

60
00:02:47,000 --> 00:02:52,000
That will then add those tags to this cached data.

61
00:02:52,000 --> 00:02:56,000
And if you then call revalidateTag with one of these tags,

62
00:02:56,000 --> 00:02:58,000
that data will be thrown away

63
00:02:58,000 --> 00:03:01,000
and any place in your NextJS application,

64
00:03:01,000 --> 00:03:04,000
any page layout or component that fetches data

65
00:03:04,000 --> 00:03:07,000
from that data source with that tag

66
00:03:07,000 --> 00:03:11,000
will be re-executed and the respective page

67
00:03:11,000 --> 00:03:14,000
and component will be re-rendered.

68
00:03:14,000 --> 00:03:15,000
So with this setup,

69
00:03:15,000 --> 00:03:19,000
if I now add a new message here like this,

70
00:03:19,000 --> 00:03:21,000
that message also shows up here

71
00:03:21,000 --> 00:03:23,000
because we're using revalidateTag.

72
00:03:24,000 --> 00:03:28,000
And that's how you can invalidate the cache data

73
00:03:28,000 --> 00:03:30,000
when managing the cache on your own.