1
00:00:01,000 --> 00:00:04,000
So having that request deduplication is nice.

2
00:00:04,000 --> 00:00:07,000
It would also be nice to have

3
00:00:07,000 --> 00:00:10,000
that data cache functionality though,

4
00:00:10,000 --> 00:00:12,000
which we also get out of the box

5
00:00:12,000 --> 00:00:13,000
when using the fetch function.

6
00:00:14,000 --> 00:00:18,000
Now for our own functions and our own data sources,

7
00:00:18,000 --> 00:00:23,000
we can enable caching by importing another function,

8
00:00:23,000 --> 00:00:28,000
this time, a function that must be imported from next/cache.

9
00:00:30,000 --> 00:00:33,000
And here it's the unstable_cache function.

10
00:00:33,000 --> 00:00:35,000
So another function called cache,

11
00:00:35,000 --> 00:00:40,000
though just as with the unstable_no_store function,

12
00:00:40,000 --> 00:00:43,000
at the point of time where you are viewing this,

13
00:00:43,000 --> 00:00:45,000
this might no longer be marked as unstable

14
00:00:45,000 --> 00:00:49,000
and it might therefore just be called cache.

15
00:00:49,000 --> 00:00:50,000
And then to avoid name clashes,

16
00:00:50,000 --> 00:00:54,000
you might want to assign an alias here.

17
00:00:55,000 --> 00:00:58,000
Now, at the point of time where I'm recording this,

18
00:00:58,000 --> 00:01:00,000
it's still is marked as unstable.

19
00:01:00,000 --> 00:01:03,000
I'll still assign that alias here though,

20
00:01:03,000 --> 00:01:05,000
but we can still use it

21
00:01:06,000 --> 00:01:09,000
and we use it in a kind of similar way

22
00:01:09,000 --> 00:01:13,000
as we used this cache function provided by React.

23
00:01:13,000 --> 00:01:17,000
You wrap this unstable_cache function,

24
00:01:17,000 --> 00:01:20,000
or in my case since I renamed it nextCache,

25
00:01:22,000 --> 00:01:26,000
you wrap that around the function that should be cached,

26
00:01:26,000 --> 00:01:29,000
which can be a function that's already wrapped by cache,

27
00:01:29,000 --> 00:01:30,000
that's fine.

28
00:01:30,000 --> 00:01:33,000
So now I got multiple layers of wrapping going on here,

29
00:01:33,000 --> 00:01:36,000
but the inner cache wrapping here

30
00:01:36,000 --> 00:01:38,000
is for a request deduplication.

31
00:01:38,000 --> 00:01:40,000
The outer wrapping,

32
00:01:40,000 --> 00:01:42,000
the nextCache function here,

33
00:01:42,000 --> 00:01:46,000
is for making this data that's returned by that function

34
00:01:46,000 --> 00:01:49,000
cacheable by NextJS in its data cache.

35
00:01:50,000 --> 00:01:54,000
And with nextCache wrapped around this function,

36
00:01:54,000 --> 00:01:57,000
I will now get an error

37
00:01:57,000 --> 00:02:00,000
when trying to load the messages page.

38
00:02:00,000 --> 00:02:01,000
The reason for that is

39
00:02:01,000 --> 00:02:06,000
that nextCache actually always returns a promise.

40
00:02:06,000 --> 00:02:08,000
So it returns to cached data,

41
00:02:08,000 --> 00:02:09,000
but wrapped in a promise.

42
00:02:11,000 --> 00:02:14,000
Previously, get messages did not yield a promise.

43
00:02:14,000 --> 00:02:16,000
Now, because I wrapped it with nextCache.

44
00:02:16,000 --> 00:02:19,000
So with unstable_cache, it does,

45
00:02:19,000 --> 00:02:24,000
and hence we must bring back the async keyword here

46
00:02:24,000 --> 00:02:26,000
on the components that use get messages

47
00:02:26,000 --> 00:02:27,000
and add await here,

48
00:02:29,000 --> 00:02:32,000
and also do that in the layout

49
00:02:32,000 --> 00:02:34,000
and have async await here as well.

50
00:02:36,000 --> 00:02:39,000
With that added, the application works again,

51
00:02:40,000 --> 00:02:43,000
and now you'll see that if I clear this

52
00:02:43,000 --> 00:02:45,000
and restart the development server,

53
00:02:45,000 --> 00:02:50,000
that if I reload this messages page, I got no log here.

54
00:02:51,000 --> 00:02:56,000
So this log where I log that I'm fetching messages from

55
00:02:56,000 --> 00:02:58,000
the database, I don't see that here

56
00:02:58,000 --> 00:03:00,000
no matter how often I reload

57
00:03:00,000 --> 00:03:03,000
because now indeed the data

58
00:03:03,000 --> 00:03:05,000
that was retrieved from the database

59
00:03:05,000 --> 00:03:07,000
is cached and is reused.

60
00:03:08,000 --> 00:03:13,000
Now the nextCache function actually has another argument,

61
00:03:13,000 --> 00:03:16,000
a second argument, which you should also specify,

62
00:03:16,000 --> 00:03:20,000
and that's an array of cache keys,

63
00:03:20,000 --> 00:03:24,000
which is then used internally to identify cached data.

64
00:03:24,000 --> 00:03:26,000
For example, messages, it's up to you.

65
00:03:27,000 --> 00:03:30,000
This is not to be confused with the tags you can assign.

66
00:03:30,000 --> 00:03:32,000
You will see how to assign tags

67
00:03:32,000 --> 00:03:34,000
to your own cached data later.

68
00:03:34,000 --> 00:03:37,000
This is just used internally,

69
00:03:37,000 --> 00:03:40,000
but with that, you can then make NextJS cache data

70
00:03:40,000 --> 00:03:42,000
from your own data source.