1
00:00:00,000 --> 00:00:02,000
So you can control caching

2
00:00:02,000 --> 00:00:05,000
with help of those fetch function settings.

3
00:00:05,000 --> 00:00:07,000
You can alternatively

4
00:00:07,000 --> 00:00:10,000
also add some file-wide settings

5
00:00:10,000 --> 00:00:13,000
in case you had multiple components in that file

6
00:00:13,000 --> 00:00:16,000
that would maybe all send fetch requests.

7
00:00:16,000 --> 00:00:17,000
Instead of then configuring

8
00:00:17,000 --> 00:00:20,000
all those requests manually step by step,

9
00:00:20,000 --> 00:00:23,000
you could set up a configuration for the entire file,

10
00:00:23,000 --> 00:00:25,000
which would then be used for all the requests

11
00:00:25,000 --> 00:00:28,000
sent from anywhere in that file.

12
00:00:28,000 --> 00:00:32,000
And you do that with help of two special constants

13
00:00:32,000 --> 00:00:35,000
you can add to your NextJS files.

14
00:00:35,000 --> 00:00:40,000
The first constant is the revalidate constant.

15
00:00:40,000 --> 00:00:43,000
This constant serves the same purpose

16
00:00:43,000 --> 00:00:45,000
as the revalidate setting on the fetch function

17
00:00:45,000 --> 00:00:48,000
I showed you a couple of seconds ago.

18
00:00:48,000 --> 00:00:49,000
You can set it to a number

19
00:00:49,000 --> 00:00:51,000
and that will be the number of seconds

20
00:00:51,000 --> 00:00:54,000
for which data will be cached and reused

21
00:00:54,000 --> 00:00:56,000
until a new request will be sent.

22
00:00:56,000 --> 00:00:59,000
Now for NextJS to pick up that constant,

23
00:00:59,000 --> 00:01:01,000
you also must export it,

24
00:01:01,000 --> 00:01:04,000
and this must be named revalidate

25
00:01:04,000 --> 00:01:09,000
because NextJS will explicitly look for this name here.

26
00:01:09,000 --> 00:01:10,000
So with that added,

27
00:01:10,000 --> 00:01:13,000
even if I don't set it on the fetch function,

28
00:01:13,000 --> 00:01:15,000
I'll get this same behavior as before.

29
00:01:15,000 --> 00:01:17,000
I got some logs here

30
00:01:17,000 --> 00:01:19,000
and now if I hammer the refresh button,

31
00:01:19,000 --> 00:01:21,000
which I am doing right now,

32
00:01:21,000 --> 00:01:25,000
you see only one new request was sent to the backend

33
00:01:25,000 --> 00:01:27,000
and then the cached data was reused

34
00:01:27,000 --> 00:01:29,000
because most of those requests

35
00:01:29,000 --> 00:01:32,000
were within that five-second timeframe

36
00:01:32,000 --> 00:01:34,000
after fetching new data.

37
00:01:34,000 --> 00:01:37,000
So that's one way of setting this up file-wide.

38
00:01:37,000 --> 00:01:41,000
Now you can also set up that other setting

39
00:01:41,000 --> 00:01:44,000
where you avoid caching all together file-wide

40
00:01:44,000 --> 00:01:46,000
if you want to.

41
00:01:46,000 --> 00:01:50,000
Because you can also export a constant called dynamic,

42
00:01:50,000 --> 00:01:53,000
which is another reserved name NextJS will be looking for.

43
00:01:54,000 --> 00:01:58,000
This dynamic constant takes various values.

44
00:01:58,000 --> 00:02:02,000
The default is auto and doesn't have to be set.

45
00:02:02,000 --> 00:02:05,000
Alternatively, you can set this to force dynamic,

46
00:02:05,000 --> 00:02:06,000
which is essentially the same

47
00:02:06,000 --> 00:02:10,000
as if you set the cache setting on a fetch request

48
00:02:10,000 --> 00:02:12,000
to no store.

49
00:02:12,000 --> 00:02:15,000
Because force dynamic tells NextJS

50
00:02:15,000 --> 00:02:18,000
to always re-fetch all the data

51
00:02:18,000 --> 00:02:21,000
that's needed anywhere in that file,

52
00:02:21,000 --> 00:02:23,000
which is exactly the same

53
00:02:23,000 --> 00:02:25,000
this cache no store setting did,

54
00:02:25,000 --> 00:02:27,000
now just applied to all requests

55
00:02:27,000 --> 00:02:30,000
sent from anywhere in that file.

56
00:02:30,000 --> 00:02:32,000
With that setting added,

57
00:02:32,000 --> 00:02:34,000
if I open that backend log again

58
00:02:34,000 --> 00:02:37,000
and I hammer that refresh shortcut here,

59
00:02:37,000 --> 00:02:40,000
you'll see that a bunch of new log messages

60
00:02:40,000 --> 00:02:42,000
are output here on the backend

61
00:02:42,000 --> 00:02:44,000
because now indeed no data is cached.

62
00:02:45,000 --> 00:02:50,000
You could also set this to force static to force caching,

63
00:02:50,000 --> 00:02:53,000
but this would then really never fetch any new data,

64
00:02:53,000 --> 00:02:56,000
which might often not be what you want.

65
00:02:57,000 --> 00:02:59,000
But force dynamic would be another way

66
00:02:59,000 --> 00:03:01,000
of avoiding caching altogether.

67
00:03:01,000 --> 00:03:02,000
It's not what I'll do here,

68
00:03:02,000 --> 00:03:06,000
but it is definitely a setting you should be aware of.

69
00:03:06,000 --> 00:03:09,000
And then, there is one last way of making sure

70
00:03:09,000 --> 00:03:12,000
that the data here is not cached,

71
00:03:12,000 --> 00:03:15,000
and that's a special function

72
00:03:15,000 --> 00:03:19,000
you can import from next cache,

73
00:03:19,000 --> 00:03:23,000
so from this cache sub-package of the next framework.

74
00:03:24,000 --> 00:03:28,000
And that's the unstable no store function

75
00:03:28,000 --> 00:03:31,000
though at the point of time where you are watching this,

76
00:03:31,000 --> 00:03:35,000
the unstable prefix might no longer be there.

77
00:03:35,000 --> 00:03:38,000
So if you don't find a unstable no store function,

78
00:03:38,000 --> 00:03:40,000
try just no store.

79
00:03:40,000 --> 00:03:43,000
Because indeed this is a relatively new function,

80
00:03:43,000 --> 00:03:48,000
which is recommended to be used over using this dynamic,

81
00:03:48,000 --> 00:03:50,000
force dynamic setting here.

82
00:03:50,000 --> 00:03:51,000
So instead of using that,

83
00:03:51,000 --> 00:03:53,000
NextJS recommends using that function.

84
00:03:53,000 --> 00:03:56,000
But at the point of time where I'm recording this,

85
00:03:56,000 --> 00:03:59,000
this function is not marked as stable

86
00:03:59,000 --> 00:04:02,000
and ready for production yet, hence the prefix.

87
00:04:03,000 --> 00:04:05,000
But the idea behind this function

88
00:04:05,000 --> 00:04:08,000
is that you simply call it inside of the component

89
00:04:08,000 --> 00:04:12,000
where you wanna make sure that data is not cached.

90
00:04:12,000 --> 00:04:14,000
So you would then get the same effect

91
00:04:14,000 --> 00:04:18,000
as if you set this dynamic constant to force dynamic,

92
00:04:18,000 --> 00:04:20,000
but you would now get this effect

93
00:04:20,000 --> 00:04:22,000
just inside of this component

94
00:04:22,000 --> 00:04:25,000
but in that component for all the requests

95
00:04:25,000 --> 00:04:28,000
that might be sent to any data sources.

96
00:04:29,000 --> 00:04:32,000
So if you had multiple components in the same page

97
00:04:32,000 --> 00:04:35,000
and you wanna cache data in some components,

98
00:04:35,000 --> 00:04:37,000
but not all components,

99
00:04:37,000 --> 00:04:41,000
you might not wanna set up a file-wide cache setting.

100
00:04:41,000 --> 00:04:43,000
And then, you can instead use this function

101
00:04:43,000 --> 00:04:47,000
to just disable caching for one specific component.

102
00:04:47,000 --> 00:04:50,000
That's what unstable no store does.

103
00:04:50,000 --> 00:04:53,000
And therefore here again, if I restart that backend server

104
00:04:53,000 --> 00:04:56,000
and I hammer that refresh button

105
00:04:56,000 --> 00:04:58,000
or refresh shortcut,

106
00:04:58,000 --> 00:04:59,000
you see a bunch of logs here

107
00:04:59,000 --> 00:05:03,000
because I disabled caching for this page component.

108
00:05:04,000 --> 00:05:08,000
So that's another function in this case you should know.

109
00:05:08,000 --> 00:05:10,000
And these are all different ways

110
00:05:10,000 --> 00:05:14,000
of managing and disabling that data cache

111
00:05:14,000 --> 00:05:17,000
or of controlling that data cache.

112
00:05:17,000 --> 00:05:20,000
It's up to you which approach you want to use,

113
00:05:20,000 --> 00:05:21,000
you saw their differences,

114
00:05:21,000 --> 00:05:24,000
and therefore it really just comes down

115
00:05:24,000 --> 00:05:25,000
to your exact use case.